😺
JetpackCompose よくあるけど作るのめんどくさそう系レイアウト(かまぼこ型、縦線、Excel表みたいなやつ)
メモ的なものなのでコードはクソ汚いから使うときは最適化してください
かまぼこ型
Box(
contentAlignment = Alignment.Center
) {
Column {
Box(
modifier = Modifier
.height(16.dp)
.fillMaxWidth()
.background(
Color.Black,
RoundedCornerShape(
100, 100, 0, 0
)
)
)
Box(
modifier = Modifier
.height(40.dp)
.fillMaxWidth()
.background(Color.Red)
)
}
Text(
text = "かまぼこ",
fontSize = 32.sp,
fontWeight = FontWeight.Bold,
color = Color.White
)
}
縦線
Spacer(
modifier = modifier
.height(16.dp)
.width(1.dp)
.background(color = Color.Black)
)
Excel表
Row(
modifier = Modifier
.background(Color.Black)
.padding(1.dp)
) {
Column(
modifier = Modifier
.weight(1f)
) {
Box(
modifier = Modifier
.height(24.dp)
.fillMaxWidth()
.background(Color.White)
)
Spacer(modifier = Modifier.height(1.dp))
Box(
modifier = Modifier
.height(24.dp)
.fillMaxWidth()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(text = "00:00〜00:00")
}
Spacer(modifier = Modifier.height(1.dp))
Box(
modifier = Modifier
.height(24.dp)
.fillMaxWidth()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(text = "00:00〜00:00")
}
}
Row(
) {
for (i in listOf("月", "火", "水", "木", "金", "土", "日", "祝")) {
Spacer(modifier = Modifier.width(1.dp))
Column(
) {
Box(
modifier = Modifier
.height(24.dp)
.width(32.dp)
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = i,
color = if (i == "日" || i == "祝") Color.Red else Color.Black
)
}
Spacer(modifier = Modifier.height(1.dp))
Box(
modifier = Modifier
.height(24.dp)
.width(32.dp)
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(text = "月")
}
Spacer(modifier = Modifier.height(1.dp))
Box(
modifier = Modifier
.height(24.dp)
.width(32.dp)
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(text = "月")
}
}
}
}
}
参考記事
Discussion