如何在Android Jetpack Compose中创建如图所示的自定义形状？

实现步骤 #

要制作图中顶部圆角、底部中间带凹口的自定义形状，只需继承Compose的Shape接口，重写createOutline方法，通过Path手动绘制轮廓即可。

1. 自定义Shape类 #

import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp

class BottomNotchedShape(
    private val cornerRadius: Float = 16.dp.toPx(),
    private val notchRadius: Float = 24.dp.toPx()
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // 起始点：左上角圆角左侧端点
            moveTo(cornerRadius, 0f)
            
            // 绘制顶部直线到右上角圆角左侧端点
            lineTo(size.width - cornerRadius, 0f)
            
            // 绘制右上角圆角
            arcTo(
                rect = androidx.compose.ui.geometry.Rect(
                    left = size.width - cornerRadius,
                    top = 0f,
                    right = size.width,
                    bottom = cornerRadius
                ),
                startAngleDegrees = 270f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
            )
            
            // 绘制右侧垂直直线到底部
            lineTo(size.width, size.height)
            
            // 绘制底部右侧直线到凹口右侧端点
            lineTo(size.width / 2 + notchRadius, size.height)
            
            // 绘制底部中间凹口圆弧
            arcTo(
                rect = androidx.compose.ui.geometry.Rect(
                    left = size.width / 2 - notchRadius,
                    top = size.height - notchRadius,
                    right = size.width / 2 + notchRadius,
                    bottom = size.height + notchRadius
                ),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            
            // 绘制底部左侧直线到左下角
            lineTo(0f, size.height)
            
            // 绘制左侧垂直直线到左上角圆角底部端点
            lineTo(0f, cornerRadius)
            
            // 绘制左上角圆角
            arcTo(
                rect = androidx.compose.ui.geometry.Rect(
                    left = 0f,
                    top = 0f,
                    right = cornerRadius,
                    bottom = cornerRadius
                ),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
            )
            
            // 闭合路径
            close()
        }
        return Outline.Generic(path)
    }
}

2. 在Compose组件中使用 #

直接将自定义形状应用到Surface、Box等支持形状的组件即可：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun NotchedShapeDemo() {
    // 使用Surface
    Surface(
        shape = BottomNotchedShape(),
        color = Color(0xFF2196F3),
        modifier = Modifier.size(300.dp, 200.dp)
    ) {
        // 内部可添加任意子组件
    }

    // 或使用Box+background
    Box(
        modifier = Modifier
            .size(300.dp, 200.dp)
            .background(Color(0xFF2196F3), shape = BottomNotchedShape())
    )
}

参数自定义说明 #

• cornerRadius：控制顶部两个圆角的大小，默认16dp
• notchRadius：控制底部凹口的圆弧半径，默认24dp
  可根据视觉需求调整这两个参数，快速适配不同尺寸的形状。

内容的提问来源于stack exchange，提问作者Kawan Osman