如何使用Kotlin在Android的ImageView控件上叠加图片及文本内容

方案1：直接在现有Drawable上绘制文本（无需修改布局） #

将当前ImageView已设置的Drawable转成Bitmap，用Canvas在对应位置绘制文字后再设置回控件即可，适配你已设置的imageMatrix的示例代码如下：

// 1. 生成与当前图片尺寸一致的Bitmap画布
val originalDrawable = myXmlImage.drawable
val bitmap = Bitmap.createBitmap(
    originalDrawable.intrinsicWidth,
    originalDrawable.intrinsicHeight,
    Bitmap.Config.ARGB_8888
)
val canvas = Canvas(bitmap)

// 2. 应用已设置的matrix变换，保证文字和图片变换逻辑一致
canvas.concat(myXmlImage.imageMatrix)
originalDrawable.setBounds(0, 0, canvas.width, canvas.height)
originalDrawable.draw(canvas)

// 3. 配置文本样式并绘制，坐标可根据需求自行调整
val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    color = Color.WHITE
    textSize = 48f
    textAlign = Paint.Align.CENTER
}
// 示例为绘制在图片底部居中位置
val textX = canvas.width / 2f
val textY = canvas.height - 50f
canvas.drawText(newText, textX, textY, textPaint)

// 4. 把叠加了文字的图片设置回ImageView
myXmlImage.setImageBitmap(bitmap)

如果需要调整文本透明度、描边等效果，直接修改textPaint的对应参数即可

方案2：布局嵌套叠加TextView（灵活度最高，适合样式复杂的场景） #

如果后续需要调整文本样式、添加点击事件、动态显隐等需求，更推荐修改布局，用FrameLayout包裹原有控件叠加TextView：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/myXmlImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/overlayText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="16dp"
        android:textColor="@android:color/white"
        android:textSize="18sp"/>
</FrameLayout>

Kotlin代码中直接给TextView赋值即可：

overlayText.text = newText

方案3：自定义ImageView（适合多页面重复使用的场景） #

如果多个业务场景都需要用到带文字叠加的ImageView，可以自定义控件封装逻辑，避免重复代码：

class TextOverlayImageView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {

    // 对外暴露设置文字、文字样式的属性
    var overlayText: String = ""
        set(value) {
            field = value
            invalidate()
        }
    var textColor: Int = Color.WHITE
        set(value) {
            field = value
            textPaint.color = value
            invalidate()
        }
    var textSize: Float = 48f
        set(value) {
            field = value
            textPaint.textSize = value
            invalidate()
        }

    private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = textColor
        textSize = this@TextOverlayImageView.textSize
        textAlign = Paint.Align.CENTER
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (overlayText.isNotEmpty()) {
            // 文字位置可根据需求调整，也可对外暴露属性自定义
            canvas.drawText(overlayText, width / 2f, height - 50f, textPaint)
        }
    }
}

使用时直接替换布局中原有ImageView的全类名，代码中赋值即可：

myXmlImage.overlayText = newText

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