[Jetpack Compose]VerticalDividerとHorizontalDividerを自作する

VerticalDividerを自作する

Dividerは水平方向に線を描画する用に定義されていて、垂直方向の線の描画する用に定義されていない。なので垂直方向に線を描画するVerticalDividerを自作して、垂直方向に簡単に線を描画できるようにしてみる。

定義

@Composable
fun VerticalDivider(
    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
            .fillMaxHeight()
            .width(targetThickness)
            .background(color = color)
    )
}

サンプル

@Composable
fun Sample() {
    Row(
        modifier = Modifier
            .height(100.dp)
            .wrapContentWidth()
            .background(Color.LightGray)
    ) {
        Text(text = "1", modifier = Modifier.align(Alignment.CenterVertically))
        VerticalDivider(thickness = 3.dp, color = Color.Blue)
        Text(text = "2", modifier = Modifier.align(Alignment.CenterVertically))
        VerticalDivider(thickness = 6.dp, color = Color.Green)
        Text(text = "3", modifier = Modifier.align(Alignment.CenterVertically))
    }
}

HorizonDividerも自作する

Dividerで水平方向の線の描画はできる。やはりVerticalDividerと対となるHorizontalDividerもある方がわかりやすい。なのでHorizontalDividerも自作してみた。

定義

@Composable
fun HorizontalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
) {
    Divider(modifier, thickness, color)
}

サンプル

@Composable
fun Sample() {
    Row(
        modifier = Modifier
            .height(100.dp)
            .wrapContentWidth()
            .background(Color.LightGray)
    ) {
        Text(text = "1", modifier = Modifier.align(Alignment.CenterVertically))
        VerticalDivider(thickness = 3.dp, color = Color.Blue)
        Text(text = "2", modifier = Modifier.align(Alignment.CenterVertically))
        VerticalDivider(thickness = 6.dp, color = Color.Green)
        Text(text = "3", modifier = Modifier.align(Alignment.CenterVertically))
    }
}