🔥
JetpackCompose レイアウトで点線描画方法(Canvas)
結論
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
参考記事
Discussion