Jetpack ComposeのRowで画面の幅に合わせてUIを折り返す（FlowRow）

はじめに

Jetpack Composeで開発をしている際に下のようなレイアウトを再現したいと思いました。

このUIでは、Rowを使用しているのですが、画面の幅がいっぱいになったら折り返して次の行からまたレイアウトしていくという、CSSで言うとflex-box?みたいなのを再現しようとした時に、あんまり記事がなかったので今回書いてみます。

やり方

デフォルトでJetpack ComposeのRowでは、画面の幅以上に要素を並べようとした場合にこのようなUIになります。

コードはこんな感じです

@Composable
fun OnBoardScreen() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Text(text = "Demo", style = MaterialTheme.typography.h1)
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Card(
                modifier = Modifier.size(150.dp),
                backgroundColor = MaterialTheme.colors.primary
            ) {
                Text(text = "Hello")
            }
            Card(
                modifier = Modifier.size(150.dp),
                backgroundColor = MaterialTheme.colors.secondary
            ) {
                Text(text = "Hello")
            }
            Card(
                modifier = Modifier.size(150.dp),
                backgroundColor = MaterialTheme.colors.error
            ) {
                Text(text = "Hello")
            }
            Card(
                modifier = Modifier.size(150.dp),
                backgroundColor = MaterialTheme.colors.secondaryVariant
            ) {
                Text(text = "Hello")
            }
            Card(
                modifier = Modifier.size(150.dp),
                backgroundColor = MaterialTheme.colors.onSurface
            ) {
                Text(text = "Hello")
            }
        }
    }
}

ごく簡単なコードで、サイズが150.dpのCardを5つ表示しています。
しかし、Rowでは、3つ目の半分までしか表示されません。
画面の幅を超えてしまったからですね。

これを画面の幅を超えてしまった場合に折り返すようにするためには、*FlowRow*を使います。

使い方はシンプルです。
まずは、build.gradleに下記を追加します。

build.gradle

dependencies {
    .....
    implementation "com.google.accompanist:accompanist-flowlayout:0.24.2-alpha"
}

これで、*FlowRow*が使えるようになりました。
早速使ってみましょう！

MainActivity.kt

// さっきのコードのRowの部分をFlowRowに変える
FlowRow(
            modifier = Modifier.fillMaxSize(),
            mainAxisSpacing = 12.dp,
            mainAxisAlignment = MainAxisAlignment.Center,
            crossAxisSpacing = 5.dp,
        ) {
........
}

• mainAxisSpacingで、要素間の横のスペースを定義しています。
• mainAxisAlignmentで、要素を真ん中に寄せています。
• crossAxisSpacingで、要素間の縦のスペースを定義しています。

UIはこうなります。

さっきみたいに画面の外にはみ出さずに、折り返して全ての要素が表示されていますね。
これで、完成です！

最後に

Rowを使って、多くの要素を横並びに表示したいときに、役に立つのでぜひ使ってみてください！

参考