如何在Compose中轻松绘制带内部文本的图形？支持XML或Android API吗？

一、常规XML + 原生Android API实现 #

1. 简单图形（圆形/矩形/圆角矩形）：TextView + Shape资源 #

这种方式适合快速实现常见基础图形：

• 第一步：创建Shape资源文件（如res/drawable/shape_circle.xml）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF4081"/>
</shape>

• 第二步：在布局XML中使用TextView，将Shape设为背景并居中显示文本

<TextView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="@drawable/shape_circle"
    android:text="示例文本"
    android:textColor="@android:color/white"
    android:textSize="16sp"
    android:gravity="center"/>

2. 复杂自定义图形：自定义View重写onDraw #

针对多边形、不规则图形这类复杂形状，需要自定义View绘制：

class ShapeWithTextView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    // 图形画笔
    private val shapePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#FF4081")
        style = Paint.Style.FILL
    }
    // 文本画笔
    private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.WHITE
        textSize = sp(16).toFloat()
        textAlign = Paint.Align.CENTER
    }
    private val displayText = "自定义图形"

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 绘制五边形示例
        val centerX = width / 2f
        val centerY = height / 2f
        val radius = min(width, height) / 2f - 10f
        val path = Path().apply {
            val angleStep = 2 * Math.PI / 5
            moveTo(
                centerX + radius * cos(0.0).toFloat(),
                centerY + radius * sin(0.0).toFloat()
            )
            repeat(4) { index ->
                val angle = (index + 1) * angleStep
                lineTo(
                    centerX + radius * cos(angle).toFloat(),
                    centerY + radius * sin(angle).toFloat()
                )
            }
            close()
        }
        canvas.drawPath(path, shapePaint)

        // 绘制垂直居中的文本
        val fontMetrics = textPaint.fontMetrics
        val baselineY = centerY - (fontMetrics.ascent + fontMetrics.descent) / 2
        canvas.drawText(displayText, centerX, baselineY, textPaint)
    }
}

在布局XML中引用该自定义View：

<com.yourpackage.ShapeWithTextView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_centerInParent="true"/>

二、Jetpack Compose实现 #

Compose的声明式UI让这类需求实现更简洁，无需复杂的自定义View逻辑：

1. 简单图形快速实现 #

通过Box组合背景修饰符和Text，快速完成基础图形+文本的组合：

Box(
    modifier = Modifier
        .size(120.dp)
        .background(Color(0xFF4081), shape = CircleShape),
    contentAlignment = Alignment.Center
) {
    Text(
        text = "示例文本",
        color = Color.White,
        fontSize = 16.sp
    )
}

替换shape参数为RoundedCornerShape、RectangleShape等，即可快速切换不同基础图形。

2. 复杂自定义图形实现 #

用drawBehind修饰符直接绘制自定义路径，再在Box中放置文本：

Box(
    modifier = Modifier
        .size(120.dp)
        .drawBehind {
            // 绘制五边形路径
            val center = Offset(size.width / 2, size.height / 2)
            val radius = min(size.width, size.height) / 2 - 10f
            val path = Path().apply {
                val angleStep = 2 * Math.PI / 5
                moveTo(
                    center.x + radius * cos(0.0).toFloat(),
                    center.y + radius * sin(0.0).toFloat()
                )
                repeat(4) { index ->
                    val angle = (index + 1) * angleStep
                    lineTo(
                        center.x + radius * cos(angle).toFloat(),
                        center.y + radius * sin(angle).toFloat()
                    )
                }
                close()
            }
            drawPath(path = path, color = Color(0xFF4081))
        },
    contentAlignment = Alignment.Center
) {
    Text(
        text = "自定义图形",
        color = Color.White,
        fontSize = 16.sp
    )
}

方案对比 #

• 常规XML+原生API：基础图形实现快，但复杂图形需要编写自定义View，代码量较大。
• Jetpack Compose：无论基础还是复杂图形，都能通过声明式代码快速实现，逻辑更直观，代码更简洁。

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