JetpackCompose チュートリアル5

更新滞りがちですがちまちま公式のCodeLab進めてます。

背景色の指定

Jetpack Compose のテーマ設定より

要素の色を設定する際は、適切なコンテンツ色である CompositionLocal 値が設定されるため、Surface を使用することをおすすめします。Modifier.background を直接呼び出すと適切なコンテンツ色が設定されないため、注意が必要です。

ColumnやRowなどのレイアウト用のコンポーネントのmodifierにModifier.background()でMaterialTheme.colors.backgroundなどを設定しても、その内部のコンテンツはonBackgroundなどにはなりません。その場合はSurface()で色を指定し、その内部にColumnやRowなどを配置することで、ColumnやRowの内部コンテンツにもテーマカラーを適用できます。

これ思いっきりModifier側でやってたので意識して修正して行かねば。

-Row(Modifier.background(MaterialTheme.colors.primary)) {
+Surface(color = MaterialTheme.colors.primary) {

単純な値変化のアニメーション

val backgroundColor = if (tabPage == TabPage.Home) Purple100 else Green300

で変化させていたのをanimateColorAsStateを使って指定するだけ
実際の適用は各要素で。

val backgroundColor by animateColorAsState(if (tabPage == TabPage.Home) Purple100 else Green300)

表示（ボタンの拡大・縮小）のアニメーション

単純に表示を切り替える場合はifの中がextendedによって表示・非表示

if (extended) {
    Text(
        text = stringResource(R.string.edit),
        modifier = Modifier
            .padding(start = 8.dp, top = 3.dp)
    )
}

アニメーションさせる場合

AnimatedVisibility(extended) {
    Text(
        text = stringResource(R.string.edit),
        modifier = Modifier
            .padding(start = 8.dp, top = 3.dp)
    )
}

アイテムの幅に合わせてアニメーション（表示・非表示）

enterに表示契機、exitに非表示契機を指定する。
各OffsetでfullHeight（縦の表示非表示なので）を指定する。
animationSpecを指定することで様々なアニメーションの指定が可能になるが後日見てみる。

AnimatedVisibility(
    visible = shown,
    enter = slideInVertically(
        // Enters by sliding down from offset -fullHeight to 0.
        initialOffsetY = { fullHeight -> -fullHeight }
    ),
    exit = slideOutVertically(
        // Exits by sliding up from offset 0 to -fullHeight.
        targetOffsetY = { fullHeight -> -fullHeight }
    )
) {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        color = MaterialTheme.colors.secondary,
        elevation = 4.dp
    ) {
        Text(
            text = stringResource(R.string.edit_message),
            modifier = Modifier.padding(16.dp)
        )
    }
}

参考：Jetpack Compose で要素をアニメーション化するのCodeLab