📱
[Android]Jetpack ComposeにおけるUI作成のためのガイドラインのメモ
はじめに
GoogleがJetpack composeでコンポーネントを作る際の注意点を出していたのでその内容を雑にまとめたメモ
内容
-
コンポーネントは1つの問題しか解決してはいけない
-
コンポーネントの階層化をしよう(汎用的な低レベルコンポーネントを組み合わせて高レベル層のコンポーネントを構成する)
-
コンポーネント化するかどうかを見極める(jetpack composeライブラリで提供されるコンポーネントで解決できるなら必要ないかもしれない)
-
単一のカスタムUI要素はModifierを使用し, コンポーネントは複数箇所、独立、再利用性を意識
-
コンポーネントの命名について
- コンポーネントの名前はパスカルケースで書こう
- コンポーネント名の接頭辞を使いこなす(基本的な機能汎用的なものは「Basic*」とすることでそれ以外はすぐに使用可能なコンポーネントと認識できる)
- ユースケースに基づいた名前付け(用途や特性を示す名前、例：ScalingLazyColumnやCurvedText)
- デザインシステム仕様に基づいた名前付け(外観が異なる多数の同様のコンポーネントがある場合、例：ContainedButtonとOutlinedButton)
- モジュール/ライブラリの接頭辞（特定のモジュールやライブラリの一部である場合、例：GlideImage）
- 最も一般的なコンポーネントのデフォルト名（最も一般的で頻繁に使用される場合、接頭辞なしのシンプルな名前を選択する）
-
暗黙的な入力をコンポーネントの引数に渡さない(CompositionLocalでグローバルなstyleを作る的な)
-
Modifierについて
- 動作を追加するオプションのパラメーターを引数に渡さない
- 引数にModifierを定義しよう(動作と外観を担当するから最も外側で定義されている必要がある)
- デフォルトサイズが0な可能性がある場合はModifier引数を必須にすることを考えよう
- Modifierは１つで十分
- パラメータの順序は必須パラメータ、シングル modifier: Modifier = Modifier、オプションのパラメータ、(オプション) 末尾の@Composableラムダ
- 引数にelevation: Dp? = null こういうデフォルトでnullはだめ(elevation: Dp = 8.dpというようなデフォルト値を設定する)
- contentDescription: String?これはOK
-
ComponentDefaults名前空間の使用(デフォルト値をIconCardDefaults.Elevationというようなグローバルにアクセスできるものを使用する)
-
コンポーネントは可能であればステートレスにする(MutableState<T>を渡して変更可能にするといつ変更されるか制御できない、状態の変更を呼び出し元に許可するといったことをする)
-
引数にStateをそのまま渡さない(position: State<Dp>をposition: () -> Dpにして変更があった場合のみ発火するようにする)
-
スロットパラメータ(content: @Composable () -> Unit的な)を活用しよう(より汎用的なコンポーネントを作れる)
- 引数で受け取ったBoolean型変数でスロットパラメータの表示、非表示をしないで(ライフサイクルに影響を及ぼす)
- rememberを使ってあげる
- 引数で受け取ったBoolean型変数でスロットパラメータの表示、非表示をしないで(ライフサイクルに影響を及ぼす)
Discussion