Jetpack Composeのレイアウト

Jetpack Composeでレイアウトを組むための基本的なまとめです

Image for post
Image for post
Photo by La-Rel Easter on Unsplash

レイアウトComposable

Box

Box(
modifier = Modifier.preferredSize(120.dp, 60.dp),
backgroundColor = Color.Yellow,
gravity = ContentGravity.Center
) {
Text(text = "Sample")
}
Image for post
Image for post

Stack

Stack {
Box(
modifier = Modifier.preferredSize(120.dp),
backgroundColor = Color.Yellow
)
Box(
modifier = Modifier.preferredSize(80.dp),
backgroundColor = Color.Blue
)
Box(
modifier = Modifier.preferredSize(40.dp),
backgroundColor = Color.Red
)
}
Image for post
Image for post

Column

Column {
Box(
modifier = Modifier.preferredSize(120.dp, 30.dp),
backgroundColor = Color.Yellow
)
Box(
modifier = Modifier.preferredSize(120.dp, 30.dp),
backgroundColor = Color.Blue
)
Box(
modifier = Modifier.preferredSize(120.dp, 30.dp),
backgroundColor = Color.Red
)
}
Image for post
Image for post

Row

Row {
Box(
modifier = Modifier.preferredSize(60.dp, 120.dp),
backgroundColor = Color.Yellow
)
Box(
modifier = Modifier.preferredSize(60.dp, 120.dp),
backgroundColor = Color.Blue
)
Box(
modifier = Modifier.preferredSize(60.dp, 120.dp),
backgroundColor = Color.Red
)
}
Image for post
Image for post

ScrollableColumn / ScrollableRow

ScrollableColumn {
(0..20).forEach { i ->
Box(
modifier = Modifier.preferredSize(120.dp, 20.dp),
backgroundColor = colors[i % 3]
)
}
}
Image for post
Image for post

LazyColumnFor / LazyRowFor

val colors = listOf(Color.Yellow, Color.Blue, Color.Red)
val items = (0..20).toList()
LazyColumnFor(items) { item ->
Box(
modifier = Modifier.preferredSize(120.dp, 20.dp),
backgroundColor = colors[item % 3]
)
}

Spacer

Column {
Box(
modifier = Modifier.preferredSize(120.dp, 30.dp),
backgroundColor = Color.Yellow
)
Spacer(modifier = Modifier.preferredHeight(16.dp))

Box(
modifier = Modifier.preferredSize(120.dp, 30.dp),
backgroundColor = Color.Blue
)
}
Image for post
Image for post

Size

preferredSize / preferredWidth / preferredHeight

Box(
modifier = Modifier.preferredSize(120.dp),
backgroundColor = Color.Blue
)

size / width / height

fillMaxSize / fillMaxWidth / fillMaxHeight

Box(
modifier = Modifier.fillMaxSize(),
backgroundColor = Color.Blue
)
Image for post
Image for post
Box(
modifier = Modifier.fillMaxSize(0.5f),
backgroundColor = Color.Blue
)
Image for post
Image for post

Alignment

Stack(modifier = Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.gravity(Alignment.Center)
.preferredSize(60.dp),
backgroundColor = Color.Blue
)
}
Image for post
Image for post
Column(modifier = Modifier.fillMaxWidth()) {
Box(
modifier = Modifier
.gravity(Alignment.End)
.preferredSize(60.dp),
backgroundColor = Color.Blue
)
}
Image for post
Image for post
Row(modifier = Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.gravity(Alignment.Bottom)
.preferredSize(60.dp),
backgroundColor = Color.Blue
)
}
Image for post
Image for post

参考

Written by

Programmer / Gamer / Google Developers Expert for Android, Kotlin / @STAR_ZERO

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store