2024年4月25日木曜日

東北TECH道場 秋田道場 2024年04月 online3

 東北TECH道場 秋田道場 道場主の菅原です。

オンライン開催を4/18(木)に実施しました!
今回は1名参加いただきました。

今回は雑談会的な感じで、ちょっとTableauまわりのお話をしていました~

4月、5月と毎週木曜にオンライン開催予定で、4/28(日)にはオフライン開催しようと思います!

オンラインからでもオフラインからでも、是非お気軽にご参加ください!
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

この後の予定です

東北TECH道場 秋田道場 2024年04月 online2

東北TECH道場 秋田道場 道場主の菅原です。

オンライン開催を4/11(木)に実施しました!
今回は1名参加いただきました。

今回もいつも通り各々のテーマでの作業です!

私の方ではアプリを作ろうと思って、引き続き作りたいUIをちょっとずつ仕込んでいます。
アコーディオンっぽいメニューを実装したかったのですが、Compose Multiplatformでの例をなかなか見つけられず・・・Jetpack Composeの実装は見つけられたので移植を試みたのですが、上手くいかず・・・
https://docs.google.com/presentation/d/1LNn-fI4a3hOFTn93u8hn_9OAon9HnFGkylc1inr6b-o/edit#slide=id.gf6a57e036c_0_42

4月、5月と毎週木曜にオンライン開催予定で、4/28(日)にはオフライン開催しようと思います!

オンラインからでもオフラインからでも、是非お気軽にご参加ください!
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

この後の予定です


2024年4月4日木曜日

東北TECH道場 秋田道場 2024年04月 online1 + ComposeMultiplatformでタブUIを実装する

東北TECH道場 秋田道場 道場主の菅原です。

オンライン開催を4/4(木)に実施しました!
今回は1名参加いただきました~

今回もいつも通り各々のテーマでの作業です!

私の方ではアプリを作ろうと思って、作りたいUIをちょっとずつ仕込んでいます。
今回は以下のJetpackComposeの記事を参考にして、タブUIを実装してみました!
https://zenn.dev/shogo/articles/3930dbb1c9e2f1

シンタックスハイライトも無いしほぼコピペなのであれですが、色設定の部分だけComposeMultiplatformには無いようなので、そこだけ書き換えてあげると参考リンクの実装がそのまま機能します。

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.primarySurface
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.ui.tooling.preview.Preview
@OptIn(ExperimentalResourceApi::class)
@Composable
@Preview
fun App() {
    var selectedTabIndex by remember { mutableStateOf(0) }
    val presses by remember { mutableStateOf(0) }
    Scaffold(
        topBar = {
            TopAppBar(
                backgroundColor = MaterialTheme.colors.primarySurface,
                contentColor = MaterialTheme.colors.onPrimary,
                title = {
                    Text("テイスティングアプリ")
                },
                actions = {
                    IconButton(onClick = { /*  */ }) {
                        Icon(Icons.Default.Add, "Add Tab")
                    }
                    IconButton(onClick = { /*  */ }) {
                        Icon(Icons.Default.Settings, "Open Settings Page")
                    }
                }
            )
        },
    ) { innerPadding ->
        Column {
            TabRow(
                selectedTabIndex = selectedTabIndex,
                backgroundColor = MaterialTheme.colors.surface
            ) {
                Tab(
                    selected = selectedTabIndex == 0,
                    onClick = {
                        selectedTabIndex = 0
                    },
                    text = {
                        Text(
                            text = "冬樹",
                            fontWeight = FontWeight.Bold,
                            color = if (selectedTabIndex == 0) Color.DarkGray else Color.LightGray
                        )
                    }
                )
                Tab(
                    selected = selectedTabIndex == 1,
                    onClick = {
                        selectedTabIndex = 1
                    },
                    text = {
                        Text(
                            text = "十四代",
                            fontWeight = FontWeight.Bold,
                            color = if (selectedTabIndex == 1) Color.DarkGray else Color.LightGray
                        )
                    }
                )
            }
            Column(
                modifier = Modifier
                    .background(Color.LightGray)
                    .verticalScroll(rememberScrollState()),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                repeat(100) { index ->
                    Text(text = "$presses Item: $index")
                }
            }
        }
    }
}

あとはちょっとTableauのお話もしたりしてました。

4月も毎週木曜にオンライン開催予定で、4/28(日)にオフライン開催しようと思います!

オンラインからでもオフラインからでも、是非お気軽にご参加ください!
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

4月の予定です!