「Composeの基本レイアウト」のメモ#5 ~Favorite collection カードの実装~

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

• カスタマイズ性の高いカードを作成するので、Surface コンポーザブルを使用して作成する
• 画像と文字列を横並びで設定するので、以下の構成となる
• Surface（)
  • Row()
    • Image()
    • Text()

最小構成

@Composable
fun FavoriteCollectionCard(
    modifier: Modifier = Modifier
){
    Row(
        modifier
    ) {
        Image(
            painter = painterResource(R.drawable.),
            contentDescription = null
        )
        Text(
            text = stringResource(R.string)
        )
    }
}

Imageコンポーザブルの微調整

Imageコンポーザブルの調整パラメータと同様に、contentScaleとModifier.sizeで画像を調整する。

Rowコンポーザブルの微調整

• Columnコンポーザブルの調整パラメータと同様に、縦方向の調整をverticalAlignmentで調整する
• 横幅を255.dpにする
  • modifier = Modifier.width(255.dp)

Textコンポーザブルの微調整

• 左右にpaddhingを追加して位置を調整する
  • modifier = Modifier.padding(horizontal = 16.dp)