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 ...
スポンサーリンク