Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。
そのライブラリ中のDividerについて、構成や使用方法などをまとめます。
※環境：Android Studio Hedgehog | 2023.1.1 Patch 2
Kotlin 1.9.0
Compose Compiler 1.5.1
androidx.compose.material3:material3 1.1.1
スポンサーリンク
UIの概要
Dividerは仕切り（縦：上下に分割）の表示を行うUI要素です。
並べて配置されるコンテンツの間に表示して、境界を明確にします。
@Preview_mdpi
@Composable
fun ColumnDividerSample() {
Column(modifier = Modifier.size(320.dp, 240.dp)) {
Image(
painter = painterResource(R.drawable.leaf1),
...
)
Divider()
Image(
painter = painterResource(R.drawable.leaf2),
...
)
}
}
スポンサーリンク
関数の引数
Dividerの状態（装飾、演出など）は、引数により指定できます。
@Composable
fun Divider(
modifier: Modifier = Modifier,
thickness: Dp = DividerDefaults.Thickness,
color: Color = DividerDefaults.color,
) { ... }
| 引数 | 概要 | |
|---|---|---|
| modifier | Modifier | UI全般のCompose修飾子 |
| thickness | Dp | 仕切りの太さ |
| color | Color | 仕切りの色 |
スポンサーリンク
関数の構成
Dividerの実態は背景の付いたBoxです。
仕切りの太さは引数：thicknessで指定できます。
しかし、長さは領域一杯になります。これは記述（fillMaxWidth）で固定化されており、変更できません。
@Composable
fun Divider(
modifier: Modifier = Modifier,
thickness: Dp = DividerDefaults.Thickness,
color: Color = DividerDefaults.color,
) {
val targetThickness = if (thickness == Dp.Hairline) {
(1f / LocalDensity.current.density).dp
} else {
thickness
}
Box(
modifier
.fillMaxWidth()
.height(targetThickness)
.background(color = color)
)
}
スポンサーリンク
横の仕切りは表示不可
Dividerは縦（上下に分割）の仕切りのみで、横（左右に分割）の仕切りは表示不可です。
これは、関数の構成でBoxのサイズ定義が「height⇒太さ、width⇒長さ」になっているためです。
横の仕切りに用いれば、以下のような結果になります。
@Preview_mdpi
@Composable
fun RowDividerSample() {
Row(modifier = Modifier.size(320.dp, 240.dp)) {
Image(
painter = painterResource(R.drawable.leaf1),
...
)
Divider(thickness = 2.dp, color = Color.Cyan)
Image(
painter = painterResource(R.drawable.leaf2),
...
)
}
}
スポンサーリンク
横の仕切りが表示可能なDivider
縦・横（左右に分割）の仕切りが表示可能なDividerを作成します。
enum class DividerDirection(val value: Boolean) {
Horizontal(false),
Vertical(true)
}
@Composable
fun DividerHV(
direction: DividerDirection,
modifier: Modifier = Modifier,
thickness: Dp = DividerDefaults.Thickness,
color: Color = DividerDefaults.color
) {
val targetThickness = if (thickness == Dp.Hairline) {
(1f / LocalDensity.current.density).dp
} else {
thickness
}
val _modifierH = Modifier
.fillMaxWidth()
.height(targetThickness)
val _modifierW = Modifier
.width(targetThickness)
.fillMaxHeight()
Box(
modifier
.then(if (direction.value) _modifierH else _modifierW)
.background(color = color)
)
}
オリジナルのDividerを参考に、「height⇒太さ、width⇒長さ」と「height⇒長さ、width⇒太さ」を切り替えられる構成に変更しています。
横の仕切り縦の仕切り
@Preview_mdpi
@Composable
fun RowDividerHVSample() {
Row(modifier = Modifier.size(320.dp, 240.dp)) {
Image(
painter = painterResource(R.drawable.leaf1),
...
)
DividerHV(direction = DividerDirection.Horizontal)
Image(
painter = painterResource(R.drawable.leaf2),
...
)
}
}
@Preview_mdpi
@Composable
fun ColumnDividerHVSample() {
Column(modifier = Modifier.size(320.dp, 240.dp)) {
Image(
painter = painterResource(R.drawable.leaf1),
...
)
DividerHV(direction = DividerDirection.Vertical)
Image(
painter = painterResource(R.drawable.leaf2),
...
)
}
}
スポンサーリンク
関連記事：
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のButtonについて、構成や使用方法などをまとめます。 ※環境：Android Studio Flamingo | 2022.2.1 ：androidx.compose.material3:material3:1.1.1 ：androidx.compose.ui:ui:1.4.3 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSurfaceについて、構成や使用方法などをまとめます。 ※環境：Android Studio Flamingo | 2022.2.1 ：androidx.compose.material3:material3:1.1.1 ：androidx.compose.ui:ui:1.4.3 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のRadioButtonについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Kotlin 1.8.10 Compose Compiler 1.4.3 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中にUI要素を格納する機能をもつコンテナ型のUIがあります。 Column/Row/Boxがコンテナ型のUIです。構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 1 Kotlin 1.8.10 Compose Compiler 1.4.3 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のImageについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 2 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation 1.5.0 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSliderについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 2 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.material3:material3 1.1.1 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のScaffoldについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.material3:material3 1.1.1 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のTopAppBarについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.material3:material3 1.1.1 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のBottomAppBarについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.material3:material3 1.1.1 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のFloatingActionButtonについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.material3:material3 1.1.1 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSnackbarについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.material3:material3 1.1.1 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyColumnについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyRowについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Patch 1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
スポンサーリンク