🔥

JetpackCompose レイアウトで点線描画方法(Canvas)

2022/08/29に公開約4,400字

結論

Canvas使ってよしなに頑張る

ただCanvas内のdrawうんたらかんたらはよくわからないので

公式見たり他の方が既に色々されてるっぽいので参考にしながら

ガチャガチャ触るしかなさそうな感じ。

サンプルコード

@Composable
private fun Card() {
    // 点の横幅っぽい
    val onInterval = 1f
    // 点の感覚っぽい
    val offInterval = 5f

    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .fillMaxWidth()
            .clip(RoundedCornerShape(10.dp))
            .background(Color.White)
            .rippleClickable { },
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Column(
            modifier = Modifier
                .padding(15.dp)
                .weight(1f),
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Row(verticalAlignment = Alignment.Bottom) {
                Text(
                    text = "title",
                    fontSize = 17.sp,
                    fontWeight = FontWeight.SemiBold
                )
                Spacer(modifier = Modifier.width(10.dp))
                Text(
                    text = "name",
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Light
                )

            }
            Spacer(modifier = Modifier.height(11.dp))
            Canvas(modifier = Modifier.fillMaxWidth()) {
                drawRoundRect(
                    color = Color.Black,
                    cornerRadius = CornerRadius(1f),
                    style = Stroke(
		            // 点の縦幅っぽい
                        width = 1f,
                        pathEffect = PathEffect.dashPathEffect(
                            intervals = floatArrayOf(onInterval, offInterval),
                            phase = onInterval + offInterval,
                        )
                    )
                )
            }
            Spacer(modifier = Modifier.height(11.dp))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Row(verticalAlignment = Alignment.Bottom) {
                    Text(
                        text = "label",
                        color = Color.LightGray,
                        fontSize = 10.sp,
                        fontWeight = FontWeight.SemiBold
                    )
                    Spacer(modifier = Modifier.width(10.dp))
                    Text(
                        text = "name",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Light
                    )
                }
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Text(
                        text = "label",
                        modifier = Modifier
                            .background(
                                Color.DarkGray,
                                RoundedCornerShape(3.dp)
                            )
                            .padding(horizontal = 5.dp, vertical = 2.dp),
                        color = Color.White
                    )
                    Spacer(modifier = Modifier.width(5.dp))
                    Text(
                        text = "name",
                        fontSize = 13.sp,
                        fontWeight = FontWeight.Light
                    )
                }
            }

        }
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.dp)
                .background(Color.Blue),
            contentAlignment = Alignment.Center
        ) {
            Icon(imageVector = Icons.Rounded.Add, contentDescription = null, tint = Color.White)
        }
    }
}

// 値を反転させた場合
val onInterval = 5f
val offInterval = 1f

参考記事

http://y-anz-m.blogspot.com/2021/07/jetpack-compose.html

https://tagsqa.com/detail/24349

https://developer.android.com/jetpack/compose/graphics?hl=ja

https://y-anz-m.blogspot.com/2021/05/jetpack-compose-canvas-composable.html

https://medium.com/falabellatechnology/jetpack-compose-canvas-8aee73eab393

https://zenn.dev/oh_naoki/articles/a1791ce30b8563

https://www.yuuuki-blog.com/2021/12/29/【Jetpack-Compose】Canvasでモンスターボールを描く/

Discussion

ログインするとコメントできます