「Composeの基本レイアウト」のメモ#2

のつづき

6. Favorite collection カード - マテリアル サーフェス

• テキストが titleMedium である
• このコンテナの背景色は、画面全体の背景とは異なる surfaceVariant を使用している
• 角が丸められている

UIの説明

• Favorite collectionカードには、マテリアルの Surfaceコンポーザブルを使用して、カードの背景と形状を設定
• FavoriteCollectionCardコンポーザブルを作成する
  • 引数にmodifier: Modifier = Modifierを渡す
  • ラムダ本文にSurfaceコンポーザブルを呼び出す
    • 引数としてshape = MaterialTheme.shapes.mediumとmodifier = modifierを渡す
    • shape: カードの角の丸みを MaterialTheme.shapes.medium で指定
  • Surfaceコンポーザブルのラムダ本文でRowコンポーザブルをラップする
    • RowコンポーザブルでImageとTextコンポーザブルをラップする
    • Rowの引数にverticalAlignment = Alignment.CenterVerticallyとModifier.width(255.dp)を渡す
      • ImageコンポーザブルではpainterとcontentDescriptionを引数として渡す
        • さらにcontentScale = ContentScale.Cropを使用して画像はアスペクト比を維持したまま、表示領域内に収まるようにリサイズされる
        • modifier = Modifier.size(80.dp)でサイズを調整
      • Textコンポーザブルでは引数textに表示したい文字列リソースを渡す

7. Align your body の行 - 配置

• Arrangement.spacedBy() メソッドを使用して、各子コンポーザブル間に固定スペースを追加できる
  
• LazyRowを利用して、横方向にスクロール可能なリストを作成する

UIの説明

• @Composableを付けて、AlignYourBodyRowコンポーザブルを作成する

• 引数にはmodifier: Modifier = Modifierを渡す

  • ラムダ本文でLazyRowをラップする
    • LazyRowのhorizontalArrangement引数にArrangement.spacedBy(8.dp)を渡す
    • LazyRowのラムダ本文でitemsメソッドを使用して要素を配置する

• itemsは、Jetpack ComposeのLazyRowやLazyColumnなどのLazyコンポーネント内で使用される関数

• リストや配列のようなデータの集合をitemsの引数として受け取り、データの集合の各要素に対して、指定されたコンポーザブル関数をitem -> の後に呼び出して、画面上に表示する