【Jetpack Compose】 要素を中央に配置する

ColumnやRowはあるけど、要素をCenterに配置するのってどうやるのがベストなんだろうって思ってちょっと調べました。

結論としては、ColumnやRowのAlignmentとArrangementをCenterにするっていうのが正解っぽそうです。

    Column(
       modifier = Modifier.fillMaxSize(),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally,
   ) {
       CircularProgressIndicator()
   }

期待したとおりにCenter表示されました！​

プログレス表示とか、Center表示する機会はそこそこあると思うのですが、毎回ColumnやRowを使うとなかなかに可読性が低そうです。なので、自分でCenter Composableを定義して使うのが良さそうです。

こんな感じでComposableを作ってあげれば、使うほうはCenterで書けるようになるので可読性が上がりますね🤗

Center {
    CircularProgressIndicator()
}

Modifierを公開しているので、paddingとか付けたい場合でも大丈夫です。

Center(modifier = Modifier.padding(top = 16.dp)) {
   CircularProgressIndicator()
}