Open1

modifireいろいろ

Kotlin
Android Studio
Jetpack Compose
modifier
形状
るるすたるるすた

角を丸くしたい

１．clip(shape) と RoundedCornerShape を使用する方法

要素の描画を指定した形状で切り取る。
RoundedCornerShape を使用することで、四角形を角丸に切り取ることができる。
RoundedCornerShape(size): size に角丸の半径を Dp 単位で指定。

// Box の角を 8dp 丸くする
Box(
    modifier = Modifier
        .size(100.dp, 100.dp) // サイズを指定
        .background(Color.Blue) // 背景色を設定
        .clip(RoundedCornerShape(8.dp)) // <-- 角を丸める (8dp の半径で)
) {
    // Box のコンテンツ
}

★特定の角だけを丸める:
RoundedCornerShape のコンストラクタに、各角の半径を個別に指定することもできる。

RoundedCornerShape(
    topStart = 16.dp, // 左上
    topEnd = 0.dp,    // 右上 (丸めない)
    bottomEnd = 16.dp, // 右下
    bottomStart = 0.dp // 左下 (丸めない)
)

★パーセンテージで指定する:
Dp 単位ではなく、要素のサイズに対するパーセンテージで角丸のサイズを指定することも可能。

RoundedCornerShape(percent = 50) // 角丸の半径を要素のサイズの 50% にする (円形になります)

clip Modifier は Modifierの順番が重要。
通常、背景色や画像など、角丸にしたいコンテンツを設定する Modifier の後に clip Modifier を適用。これにより、それより前に設定された描画内容が、指定した角丸の形状で切り取られることになる。

2. background(color, shape) や border(width, color, shape) の shape パラメータを使用する方法

background Modifier や border Modifier には、直接 shape パラメータを指定できる。
これにより、背景やボーダー自体が角丸の形状で描画。
clip Modifier と組み合わせることも、単独で使用することも可能。

// 例: 角丸の背景を持つ Box
Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .background(
            color = Color.Red,
            shape = RoundedCornerShape(12.dp) // background の shape パラメータで角を丸める
        )
) {
    // Box のコンテンツ
}

// 例: 角丸のボーダーを持つ Box
Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .border(
            width = 2.dp,
            color = Color.Black,
            shape = RoundedCornerShape(8.dp) // border の shape パラメータで角を丸める
        )
) {
    // Box のコンテンツ
}

要素全体とその内容を角丸にしたい場合は、clip(RoundedCornerShape(...)) を使用するのが最も柔軟で一般的。
背景だけを角丸にしたい場合は background の shape を、ボーダーだけを角丸にしたい場合は border の shape を使用。