Jetpack Composeにおけるレイアウト管理
Jetpack Composeの特徴
Jetpack Composeは、AndroidのUIを作成するための宣言型UIフレームワークです。従来のXMLベースのUI構築に比べて、Kotlinコードのみでレイアウトを記述できるため、柔軟かつ効率的にUIを作成できます。
Jetpack Composeでは、Column、Row、Boxという基本的なコンポーネントを使用してレイアウトを管理します。本記事では、それぞれの役割と活用方法について詳しく解説します。
Columnの基本と応用
Columnとは？
Columnは、子要素を縦方向（上から下）に配置するレイアウトコンポーネントです。
@Composable
fun ColumnExample() {
Column {
Text(text = "アイテム1")
Text(text = "アイテム2")
Text(text = "アイテム3")
}
}
このコードを実行すると、テキストが縦に並びます。
Columnのプロパティ
Columnには、modifierパラメータを使用して配置やスタイルを設定できます。
@Composable
fun StyledColumnExample() {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "中央揃えのテキスト1")
Text(text = "中央揃えのテキスト2")
}
}
fillMaxWidth()：親の最大幅に広がるpadding(16.dp)：余白を設定verticalArrangement：縦方向の配置（Top、Center、Bottomなど）horizontalAlignment：横方向の配置（Start、CenterHorizontally、Endなど）
Rowの基本と応用
Rowとは？
Rowは、子要素を横方向（左から右）に配置するコンポーネントです。
@Composable
fun RowExample() {
Row {
Text(text = "アイテムA")
Text(text = "アイテムB")
Text(text = "アイテムC")
}
}
このコードを実行すると、テキストが横に並びます。
Rowのプロパティ
Rowでもmodifierを活用することで、スタイルや配置を調整できます。
@Composable
fun StyledRowExample() {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(text = "左")
Text(text = "中央")
Text(text = "右")
}
}
fillMaxWidth()：親の最大幅に広がるpadding(16.dp)：余白を設定horizontalArrangement：横方向の配置（Start、Center、End、SpaceBetweenなど）verticalAlignment：縦方向の配置（Top、CenterVertically、Bottomなど）
Boxの基本と応用
Boxとは？
Boxは、子要素を重ねるためのレイアウトコンポーネントです。例えば、背景画像の上にテキストを配置する場合などに使用します。
@Composable
fun BoxExample() {
Box {
Image(
painter = painterResource(id = R.drawable.sample_image),
contentDescription = "背景画像"
)
Text(
text = "重ねたテキスト",
color = Color.White,
modifier = Modifier.align(Alignment.Center)
)
}
}
Boxのプロパティ
Boxでは、modifierを活用して子要素の配置を設定できます。
@Composable
fun StyledBoxExample() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Gray)
) {
Text(
text = "中央揃えのテキスト",
modifier = Modifier.align(Alignment.Center)
)
}
}
fillMaxSize()：親のサイズに広がるbackground(Color.Gray)：背景色を設定align(Alignment.Center)：中央に配置
Column、Row、Boxの組み合わせ
これらのレイアウトコンポーネントを組み合わせることで、複雑なUIを構築できます。
@Composable
fun ComplexLayout() {
Column(
modifier = Modifier.fillMaxSize()
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = "左")
Text(text = "右")
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Text(text = "中央のテキスト", fontSize = 24.sp)
}
}
}
このコードでは、Column内にRowとBoxを配置し、それぞれの特性を活かしてレイアウトを作成しています。
まとめ
Jetpack Composeにおけるレイアウト管理の基本として、Column、Row、Boxの使い方を紹介しました。
Columnは縦方向に要素を並べるRowは横方向に要素を並べるBoxは要素を重ねて配置する
これらを適切に組み合わせることで、柔軟なレイアウトを構築できます。Jetpack Composeを使いこなすために、実際にコードを書いて試してみましょう！
