「Composeの基本レイアウト」のメモ#4 ~AlignYourBodyの実装~

デザインの詳細

• 画像の高さは 88 dp にする
• テキストのベースラインと画像の間隔は 24 dp にする
• ベースラインと要素の底部の間隔は 8 dp にする
• テキストは bodyMedium のタイポグラフィスタイルにする

最小構成

• AlignYourBodyElement()
  • modifier
  • Column()
    • modifier
    • Image()
    • Text()

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

Imageコンポーザブルの調整パラメータ

• Imageコンポーザブル
  • contentScale
    • ContentScale.Cropで切り抜きの指定
      • modifierでのサイズ指定をもとに切り抜く
      • → contentScaleとmodifierはセットで機能する
  • modifier
    • 画像サイズの指定
      • Modifier.size(88.dp)　
    • 画像形状の指定
      • .clip(CircleShape)
      • 円形を指定

Columnコンポーザブルの調整パラメータ

• ColumnでラップしているUI要素を水平方向に中央揃えで配置
  • horizontalAlignment = Alignment.CenterHorizontally

Textコンポーザブルの調整パラメータ

• BaseLineからのpadding調整
  • modifier = Modifier.paddingFromBaseline(top = 24.dp, bottom = 8.dp)
• 文字のFont設定
  • style = MaterialTheme.typography.bodyMedium