如何在Android XML中实现多层嵌套椭圆加右侧半圆的UI效果？

直接用自定义View结合Canvas就能搞定，以下是具体步骤：

1. 编写自定义View类 #

创建一个继承自View的类，在onDraw方法里完成图形绘制：

class NestedOvalView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    private val paint = Paint().apply {
        isAntiAlias = true
        style = Paint.Style.STROKE
        strokeWidth = 8f // 线条粗细，按需调整
    }
    private val ovalRect = RectF()
    private val semiCircleRect = RectF()

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val centerX = width / 2f
        val centerY = height / 2f
        
        // 三层椭圆的尺寸参数，间距自己调
        val outerRadiusX = width * 0.45f
        val outerRadiusY = height * 0.45f
        val middleRadiusX = outerRadiusX - 15f
        val middleRadiusY = outerRadiusY - 15f
        val innerRadiusX = middleRadiusX - 15f
        val innerRadiusY = middleRadiusY - 15f

        // 画外层椭圆
        ovalRect.set(centerX - outerRadiusX, centerY - outerRadiusY, centerX + outerRadiusX, centerY + outerRadiusY)
        paint.color = Color.parseColor("#E0E0E0")
        canvas.drawOval(ovalRect, paint)

        // 画中层椭圆
        ovalRect.set(centerX - middleRadiusX, centerY - middleRadiusY, centerX + middleRadiusX, centerY + middleRadiusY)
        paint.color = Color.parseColor("#B0B0B0")
        canvas.drawOval(ovalRect, paint)

        // 画内层椭圆
        ovalRect.set(centerX - innerRadiusX, centerY - innerRadiusY, centerX + innerRadiusX, centerY + innerRadiusY)
        paint.color = Color.parseColor("#808080")
        canvas.drawOval(ovalRect, paint)

        // 画顶部右侧半圆
        val semiRadius = outerRadiusX * 0.3f // 半圆大小，按需调整
        semiCircleRect.set(centerX, centerY - outerRadiusY - semiRadius, centerX + semiRadius * 2, centerY - outerRadiusY + semiRadius)
        paint.color = Color.parseColor("#808080") // 和内层椭圆同色，可改
        // 绘制上半圆：起始角度270°，扫过180°
        canvas.drawArc(semiCircleRect, 270f, 180f, false, paint)
    }
}

2. 在XML布局中引用 #

把自定义View加到布局里，设置合适的宽高：

<com.yourpackage.NestedOvalView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_gravity="center"/>

调整说明 #

• 想要修改线条粗细，改strokeWidth的值就行
• 椭圆之间的间距，调整middleRadiusX = outerRadiusX - 15f里的15f
• 半圆的大小和位置，修改semiRadius和semiCircleRect的参数
• 如果需要填充颜色，把Paint.Style.STROKE换成Paint.Style.FILL或者FILL_AND_STROKE

内容的提问来源于stack exchange，提问作者Abhishek Tiwari