✨速習 - Ki-Kobayashi/Android-Wiki GitHub Wiki

✨速習サイト

https://qiita.com/satoru_pripara/items/a62252d7aa6cc1d7aa90#typograhy 　　

🟩 ComponentActivity

🟩 LaunchedEfect

一つ目の引数（key）に何らかの変更が加わるたびに、二つ目の引数で指定したクロージャ内の処理を実行する。
実行中にもう一度実行指示が出た場合は、実行中の処理をキャンセルし、新しい処理の方に行く。
サンプルで理解するJetpack Composeの副作用の仕組み

🟩 Modifier

ComposeのUI部品について、背景色、パディング、高さや横のサイズ、輪郭などなど、さまざまな設定を付与できる。

Android developer - Compose 修飾子のリスト
Qiita - Jetpack Compose Modifier(修飾)

複数のModifierを使った場合、Modifierが適用されるのは、上から順である。

Modifiers in Jetpack Compose — Basic Concepts to Get You Started

🟡部品の角を丸くしたい。

.clipモディファイアを使えば可能である。四隅のうち、特定の角のみを丸くすることも可能である。以下は、下方の角のみを丸くした例。

        modifier = modifier
            .clip(shape = RoundedCornerShape(0.dp, 0.dp, 25.dp, 25.dp))

🟡Icons

ボタンなどで使えるアイコンとしてMaterial Iconが用意されている。

Material Icons

以下のように用いる。

Icon(Icons.Rounded.Favorite, contentDescription = "Favorite")

🟩 Scaffold

UI部品の最下層に設置することが多く、他の画面（UI部品）の他、アプリバー、フローティングアクションボタン、スナックバー、ドロワーなどを設定できる。

Scaffoldのラムダ式には引数としてpaddingValuesという値が渡され、子UI部品にModifier経由でパディングとして設定することで、アプリバーなどの分の余白を考慮したデザインとできる。

🟡AppBar

Scaffoldに設定できるアプリ上部のバー。
androidx.compose.material - TopAppBar

Material3 ではCenterTopAppBarというのがあるので、これを使うとタイトル部分を中央寄りにできる。

CenterAlignedTopAppBar
How to align title at layout center in TopAppBar?

🟡

🟡

🟩 Typograhy

Textなどの文字の大きさを変えられる。

Typography - Material Design3 ［Jetpack Compose］TextStyle を適用する Text コンポーザブルを予め定義しておくと便利

🟡使い方

Android studioで「File > New > Activity > Empty Compose Activity」を選択するなどして、「ComponentActivity」を継承したActivityを作るなどする。

@Composableマークのついた関数を作る。これによりレイアウトが作られる。
@Previewマークをつければ、Android Studioでプレビューが即確認できるようになり大変便利。
@RequiresOptInがついているマークがついているクラスを使いたい場合は、@OptInマークをつけて使う必要がある。

Android Compose のチュートリアル

子部品の配置を決定する際、親部品の配置を参考にしたい。

BoxWithConstraintsを利用するとできる。

            BoxWithConstraints {
                print("maxHeight $maxHeight")
                inputArea(
                    height = maxHeight - bottomUpperHeight,
                )
            }

Composeでのレイアウト - レスポンシブレイアウト
BoxWithConstraintsScope

🟩

🟩

🟩

🟩

🟩

🟩

🟩

🟩