Android中如何实现类似PowerPoint的图片填充文字效果？

嘿，这个需求我之前折腾过，其实Android里实现图片填充文字的核心是用Paint的Shader，而不是直接设置颜色～下面给你一步步讲怎么搞：

核心思路 #

Android没有直接的paint.setcolor(bounds, Bitmap)方法，但可以通过BitmapShader来实现——它能把Bitmap作为画笔的填充纹理，让文字的区域用这个纹理来填充，刚好对应你想要的PPT图片填充文字效果。

具体实现步骤 #

• 先自定义一个TextView，继承AppCompatTextView，重写onDraw方法，这是自定义View的常规操作。
• 准备好要填充的Bitmap，创建BitmapShader并设置合适的平铺模式（比如拉伸、重复，按需选择）。
• 根据文字的边界区域调整Shader的矩阵，避免图片拉伸变形，让图片刚好适配文字范围。

完整代码示例 #

class ImageFillTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.textViewStyle
) : AppCompatTextView(context, attrs, defStyleAttr) {

    private var fillBitmap: Bitmap? = null
    private val shaderMatrix = Matrix()

    // 对外提供设置填充图片的方法
    fun setFillBitmap(bitmap: Bitmap) {
        fillBitmap = bitmap
        invalidate() // 触发重绘，让新图片生效
    }

    override fun onDraw(canvas: Canvas) {
        fillBitmap?.let { bitmap ->
            // 先获取当前文字的边界框，知道要把图片缩放到多大
            val textBounds = Rect()
            paint.getTextBounds(text.toString(), 0, text.length, textBounds)
            
            // 计算缩放比例，让图片能覆盖文字区域，同时保持比例
            val scaleX = textBounds.width().toFloat() / bitmap.width
            val scaleY = textBounds.height().toFloat() / bitmap.height
            val scale = max(scaleX, scaleY)
            
            // 调整Shader的矩阵，让图片居中填充文字区域
            shaderMatrix.reset()
            shaderMatrix.setScale(scale, scale)
            shaderMatrix.postTranslate(
                textBounds.left.toFloat() + (textBounds.width() - bitmap.width * scale) / 2,
                textBounds.top.toFloat() + (textBounds.height() - bitmap.height * scale) / 2
            )
            
            // 创建BitmapShader并绑定到画笔上
            val shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
            shader.setLocalMatrix(shaderMatrix)
            paint.shader = shader
        }
        
        super.onDraw(canvas)
        // 绘制完成后清空Shader，避免影响后续其他绘制（可选，看你的需求场景）
        paint.shader = null
    }
}

使用方式 #

在布局里引用这个自定义View：

<com.yourpackage.ImageFillTextView
    android:id="@+id/image_fill_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World"
    android:textSize="60sp"/>

然后在代码里设置填充的图片：

val imageFillTextView = findViewById<ImageFillTextView>(R.id.image_fill_tv)
val kittenBitmap = BitmapFactory.decodeResource(resources, R.drawable.kitten)
imageFillTextView.setFillBitmap(kittenBitmap)

小提示 #

• 如果文字是动态变化的，记得在文字改变后调用invalidate()触发重绘，重新计算Shader矩阵。
• 平铺模式可以按需改：CLAMP是拉伸图片边缘填充剩余区域，REPEAT是重复平铺图片，MIRROR是镜像重复平铺。
• 如果图片太大，建议先压缩Bitmap，避免内存占用过高导致OOM。

这样就能实现你想要的图片填充文字效果啦～

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