Jetpack Composeのレイアウト関係メモ - ゆるプログラミング日記

Jetpack Composeを勉強していくなかで、「これ何だったっけ？」と何回も調べ直してることをメモしていく。随時更新。

Imageコンポーザブルのカスタマイズ

Customize an image | Jetpack Compose | Android Developers
contentScale
画像を表示したい枠に合うように、画像を切り抜いたり大きさを変更したりする。

contentScale	画像の変化
Fit	画像が境界線と合うように拡大・縮小
Crop	空いているスペースがなくなるように画像を切り抜き(アスペクト比そのまま)
FillBounds	空いているスペースがなくなるように画像を切り抜き(アスペクト比無視)

clip
画像の形を決める。
例えばModifier.clip(CircleShape)で円形、Modifier.clip(RoundedCornerShape(16.dp)で角丸。

Image(
    painter = painterResource(id = R.drawable.sample),
    contentScale = ContentScale.Crop,
    modifier = Modifier.size(200.dp).clip(RoundedCornerShape(16.dp))
)

LazyColumn/Rowのアイテムの間隔

リストとグリッド | Jetpack Compose | Android Developers
Arrangement.spacedBy()
アイテム同士の間隔を空ける。
contentPadding
アイテム表示領域の上下左右に間隔を空ける。
(縦スクロールだったら、最初のアイテムの上、最後のアイテムの下、全てのアイテムの左右のpadding)

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
    verticalArrangement = Arrangement.spacedBy(4.dp),
)

Scroll 修飾子

操作 | Jetpack Compose | Android Developers
コンテンツの境界が最大サイズ制約より大きい場合に、
ユーザーが要素をスクロールできるようにverticalScrollもしくはhorizontalScrollを設定する。
例えば端末を横向きにしたときColumnで配置したコンテンツが画面の表示領域に収まらない場合、スクロールできないと困る。

Column(
     modifier = Modifier.verticalScroll(rememberScrollState())
)

ScrollState により、スクロール位置を変更したり現在の状態を取得したりする。

AnimatedVisibility

アニメーション | Jetpack Compose | Android Developers
コンテンツの表示・非表示をアニメーションにする。
表示・非表示をbeelean型のStateか、MutableTransitionStateで保存する。

var editable by remember { mutableStateOf(true) }
AnimatedVisibility(visible = editable) {
    Text(text = "Edit")
}

val state = remember {
    MutableTransitionState(false).apply {
        targetState = true
    }
}
Column {
    AnimatedVisibility(visibleState = state) {
        Text(text = "Hello, world!")
    }
    Text(...)
}