Jetpack Compose 「Modifierは子1つ目だけに適用する」の考え方

実際のコード例で考えてみる。


Column {
  Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
  )
  Text(
    text = "World",
    modifier = Modifier.padding(16.dp)
  )
}


val modifier = Modifier.padding(16.dp)

Column {
  Text(text = "Hello", modifier = modifier)
  Text(text = "World", modifier = modifier)
}


Column(
  modifier = Modifier.padding(16.dp)
) {
  Text(text = "Hello")
  Text(text = "World")
}


@Composable
fun ParentLayout() {
  Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
  ) {
    for (i in 1..10) {
      ListItem(
        text = "Item $i",
        modifier = Modifier.padding(8.dp)
      )
    }
  }
}

@Composable
fun ListItem(modifier: Modifier, text: String) {
  Text(
    text = text,
    modifier = modifier.background(Color.LightGray)
  )
}

共有することの意味は「統一性」だろうけども、

見通しが悪くなるので「1つ目まで」としているのだろう。

「まずは個別につけてから共通部分をホイストしていく。」

「親から渡すときは子まで影響。孫は個別に。」

そんな考え方の順番が簡単で自然だと思います。


Android Architecture Samples でみる JetpackCompose UI コンポーネントのネスト



表示されてるコンテンツまでにいくつかのコンポーネントを経由している。

👉 architecture-samples/app/src/main/java/com/example/android/architecture/blueprints/todoapp/TodoNavGraph.kt at 130f5dbebd0c7b5ba195cc08f25802ed9f0237e5 · android/architecture-samples

中心は、NavGraph として利用されている NavHost

ModalDrawer ごと切り替えてる。


Activity
  + NavHost
    + ModalDrawer
      + 【Screen】
        + Scaffold
          + SwipeRefresh
            + 【Content】    
    + ModalDrawer
      + 【Screen】
        + Scaffold
          + SwipeRefresh
            + 【Content】
    + ModalDrawer
      + 【Screen】
        + Scaffold
          + SwipeRefresh
            + 【Content】

きっと、使いやすい理にかなった入れ子関係なのだろう。


Activity
   ↓
NavHost
   ↓ 1:*
ModalDrawer
   ↓
【Screen】
   ↓
Scaffold
   ↓
SwipeRefresh
   ↓
【Content】

参考にしたいですね。

👉 android/architecture-samples: A collection of samples to discuss and showcase different architectural tools and patterns for Android apps.


Jetpack Compose Material3 の ListItem で設定画面を秒でつくる

実際、秒、ってことないけども。

まあまあ簡単で見た目も綺麗にできます。

Jetpack Compose Material3 の ListItem を使います。


@Composable
fun ListItem(
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    colors: ListItemColors = ListItemDefaults.colors(),
    tonalElevation: Dp = ListItemDefaults.Elevation,
    shadowElevation: Dp = ListItemDefaults.Elevation
): Unit


👉 androidx.compose.material3  |  Android Developers

Card を利用して、設定項目をグループ分けします。

👉 Card  |  Jetpack Compose  |  Android Developers

以下のようなレイアウト構成。


SettingScreen
  LazyColumn
    Card - Group
      ListItem - Clickable
      ListItem - Switch
      ListItem - Checkbox
    Card
      ListItem - Clickable
      ListItem - Switch
      ListItem - Checkbox
    ...

こう書けました。

こんな感じです。

Material3 って、今では結構使えるんですね!


【Kotlin】バージョンカタログ libs.versions.toml の記述だるくね? module 記述のほうが良くね?

なんか面倒なだけな気がしてきた。


hilt-android = { group = "com.google.dagger", name = "hilt-android", version.ref = "hilt" }
hilt-compiler = { group = "com.google.dagger", name = "hilt-compiler", version.ref = "hilt" }

group, name より、

module 記述で良くないか。


hilt-android = { module = "com.google.dagger:hilt-android", version.ref = "hilt" }
hilt-compiler = { module = "com.google.dagger:hilt-compiler", version.ref = "hilt" }

まあ、無駄に几帳面に書いてました。

こんなにスッキリ。

👉 Pokedex/gradle/libs.versions.toml at main · skydoves/Pokedex


Android のアーキテクチャで何が Google に「強く推奨」されているか図で理解する

👉 Recommendations for Android architecture  |  Android Developers

分かりやすいドキュメントなのでさらに分かりやすくなるように図にしてみます。

 

🤔 Layered Architecture


UI Layer
  |
Coroutine
  |
DataL Layer
  |
Repository

👉 Layered architecture - Recommendations for Android architecture  |  Android Developers

 

🤔 UI Layer


UI Layer
  UDF
  AAC ViewModel
  Lifecycle
  User Event

👉 UI layer - Recommendations for Android architecture  |  Android Developers

 

🤔 ViewModel


ViewModel
  Depencencies
  Coroutine Flow
  State Holder

👉 ViewModel - Recommendations for Android architecture  |  Android Developers

 

🤔 Lifecycle


Lifecycle
  LifecycleObserver

👉 Lifecycle - Recommendations for Android architecture  |  Android Developers


 

🤔 Handle dependencies


Constructor Injection
Container

👉 Handle dependencies - Recommendations for Android architecture  |  Android Developers

 

🤔 Test


ViewModel
Data Entity (Repository + DataSource)
FakeData
StateFlow

👉 Test - Recommendations for Android architecture  |  Android Developers

 

🤔 まとめ

しれっと、公式リファレンスも分かりやすく更新されていて驚きました。

👉 【Android】アーキテクチャーとして Google が推奨していること #Kotlin - Qiita