🐻‍❄️

［Jetpack Compose］BoxのmatchParentで特定の要素に他の要素をマスクする

katz

2023/04/28に公開

方法

特定の要素の上に他の要素をマスクしたい場合にはBox内に配置した子要素に対してmatchParentを付加することでうまく実装ができる。

BoxにはwrapContentSizeを付加して子要素の一番大きいサイズにあわせる
子要素のTextはsizeを付加して固定サイズにする
子要素のSpacerはmatchParentSizeを付加してBoxのサイズにあわせる（Spacerの子要素を除く,子要素の中で一番大きいサイズにあわせる、ようにする）
このように実装するとBoxはTextのサイズにあわせる、SpacerはBoxのサイズにあわせる、という関係性が構築できる。そのためSpacerとTextのサイズが同じになり、このようなマスク表示が可能になる

@Composable
fun SampleBox() {
    Box(
        modifier = Modifier
            .wrapContentSize()
            .background(Color.White)
    ) {
        Text(
            text = "TEXT",
            modifier = Modifier
                .size(200.dp)
                .background(Color.Red.copy(alpha = 0.5f))
        )

        Spacer(
            modifier = Modifier
                .matchParentSize()
                .background(Color.Green.copy(alpha = 0.5f))
        )
    }
}

よくある間違い

特定の要素の上に他の要素をマスクしたい場合によくある間違いはBox内に配置した要素に対してfillMaxSizeを付加してしまう間違い。

BoxにはwrapContentSizeを付加して子要素の一番大きいサイズにあわせる
子要素のTextはsizeを付加して固定サイズにする
子の要素のSpacerはfillMaxSizeを更かして可能な限り大きなサイズにする
このように実装するとBoxはSpacerのサイズにあわせる、Spacerは可能な限りサイズを大きくする、という関係性が構築される。そのため以下のようにSpacerのサイズが大きくなってしまい、Textのサイズが同じにならずマスク表示にはならない。

@Composable
fun SampleBox() {
    Box(
        modifier = Modifier
            .wrapContentSize()
            .background(Color.White)
    ) {
        Text(
            text = "TEXT",
            modifier = Modifier
                .align(Alignment.Center)
                .size(200.dp)
                .background(Color.Red.copy(alpha = 0.5f))
        )

        Spacer(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Green.copy(alpha = 0.5f))
        )
    }
}

参考資料

株式会社ゆめみPublication

みんな知ってるあのサービスも、ゆめみが一緒に作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用の内製化支援。Swift,Kotlin,Rust,Go,Flutter,ML,React,AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中

方法

よくある間違い

参考資料

Discussion