😺

JetpackCompose よくあるけど作るのめんどくさそう系レイアウト(かまぼこ型、縦線、Excel表みたいなやつ)

2022/03/13に公開

メモ的なものなのでコードはクソ汚いから使うときは最適化してください

かまぼこ型

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 = "月")
                    }
                }
            }
        }
    }

参考記事

https://takusan.negitoro.dev/posts/android_jc_tab_rounded_indicator/

https://qiita.com/Nabe1216/items/910

Discussion