Compose UI:Divider

投稿日:  更新日:

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のサンプル

スポンサーリンク

関数の引数

Dividerの状態(装飾、演出など)は、引数により指定できます。

@Composable
fun Divider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
) { ... }
引数概要
modifierModifierUI全般のCompose修飾子
thicknessDp仕切りの太さ
colorColor仕切りの色
スポンサーリンク

関数の構成

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

縦・横(左右に分割)の仕切りが表示可能な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),
            ...
        )
    }
}

DividerHV(横の仕切り)

@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),
            ...
        )
    }
}

DividerHV(縦の仕切り)

スポンサーリンク

関連記事:

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コンポーネントをライブラリで提供しています。 そのライブラリ中のSpacerについて、構成や使用方法などをまとめます。 ※環境: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 ...
スポンサーリンク