Android开发：如何为View设置任意形状？需为TextView添加指定背景

嘿，刚好在项目里经常处理这类需求，来给你梳理几个靠谱的方案，不管是给普通View设置任意形状，还是给TextView加指定样式背景都能用：

1. 使用Shape Drawable（适合规则/简单自定义形状） #

这是最常用的方式，通过XML定义形状，直接给View的background属性引用即可。支持圆角矩形、椭圆、环形，还能加渐变、边框、内边距等效果。

比如定义一个带渐变的圆角矩形：

<!-- res/drawable/custom_shape.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 渐变背景 -->
    <gradient
        android:startColor="#FF4081"
        android:endColor="#3F51B5"
        android:angle="90"/>
    <!-- 圆角 -->
    <corners android:radius="12dp"/>
    <!-- 边框 -->
    <stroke
        android:width="2dp"
        android:color="#FFFFFF"/>
</shape>

布局中引用：

<View
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/custom_shape"/>

2. 自定义Drawable（适合复杂不规则形状） #

如果Shape满足不了你的需求（比如五角星、自定义多边形、不规则路径），可以自己写一个Drawable子类，通过Canvas和Path绘制任意形状。

举个简单的五角星Drawable实现：

class StarDrawable : Drawable() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.RED
        style = Paint.Style.FILL
    }
    private val path = Path()

    override fun onBoundsChange(bounds: Rect) {
        super.onBoundsChange(bounds)
        path.reset()
        val centerX = bounds.centerX().toFloat()
        val centerY = bounds.centerY().toFloat()
        val outerRadius = min(bounds.width(), bounds.height()) / 2f
        val innerRadius = outerRadius * 0.5f

        // 计算五角星的五个顶点路径
        for (i in 0 until 5) {
            val angle = Math.toRadians((i * 144).toDouble())
            val x = centerX + outerRadius * Math.cos(angle).toFloat()
            val y = centerY + outerRadius * Math.sin(angle).toFloat()
            if (i == 0) {
                path.moveTo(x, y)
            } else {
                val innerAngle = Math.toRadians((i * 144 + 72).toDouble())
                val innerX = centerX + innerRadius * Math.cos(innerAngle).toFloat()
                val innerY = centerY + innerRadius * Math.sin(innerAngle).toFloat()
                path.lineTo(innerX, innerY)
                path.lineTo(x, y)
            }
        }
        path.close()
    }

    override fun draw(canvas: Canvas) {
        canvas.drawPath(path, paint)
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
        invalidateSelf()
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        paint.colorFilter = colorFilter
        invalidateSelf()
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }
}

代码中使用：

val starDrawable = StarDrawable()
yourView.background = starDrawable

3. 使用ClipPath（裁剪View实现任意形状） #

这种方式是把View超出指定路径的部分裁剪掉，让View显示为路径的形状。注意API 21以上可以直接调用View.setClipPath()，低版本需要在View的onDraw方法中使用Canvas.clipPath()。

举个裁剪为圆形的例子：

class CircleView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val path = Path()

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        path.addCircle(w/2f, h/2f, min(w,h)/2f, Path.Direction.CW)
    }

    override fun onDraw(canvas: Canvas) {
        canvas.clipPath(path)
        super.onDraw(canvas)
    }
}

⚠️ 注意：复杂路径的ClipPath可能会影响性能，部分场景下需要关闭硬件加速才能生效。

TextView的背景本质上和普通View一样，不过因为要适配文字显示，通常会加内边距避免文字贴边，下面是几种常用方案：

1. Shape Drawable实现常规样式 #

比如做一个带圆角、边框的标签样式：

<!-- res/drawable/tv_tag_bg.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFEB3B"/>
    <corners android:radius="16dp"/>
    <stroke
        android:width="1dp"
        android:color="#FBC02D"/>
    <!-- 内边距，让文字和边框保持距离 -->
    <padding
        android:left="10dp"
        android:top="4dp"
        android:right="10dp"
        android:bottom="4dp"/>
</shape>

布局引用：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="热门标签"
    android:textColor="#333333"
    android:background="@drawable/tv_tag_bg"/>

2. LayerList实现多层叠加背景 #

如果需要阴影、多层形状叠加的效果，可以用layer-list。比如带阴影的白色圆角背景：

<!-- res/drawable/tv_shadow_bg.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影层 -->
    <item
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#80000000"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
    <!-- 主背景层 -->
    <item
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners android:radius="8dp"/>
            <stroke
                android:width="1dp"
                android:color="#EEEEEE"/>
        </shape>
    </item>
</layer-list>

3. 代码动态修改背景样式 #

如果需要根据业务逻辑动态切换背景（比如点击变色），可以在代码中创建GradientDrawable并设置属性：

// 扩展方法：dp转px
fun Int.dpToPx(context: Context): Int {
    return (this * context.resources.displayMetrics.density).toInt()
}

// 动态创建TextView背景
fun setupTextViewBg(textView: TextView) {
    val shape = GradientDrawable().apply {
        shape = GradientDrawable.RECTANGLE
        cornerRadius = 8.dpToPx(textView.context).toFloat()
        setColor(ContextCompat.getColor(textView.context, R.color.blue))
        setStroke(1.dpToPx(textView.context), ContextCompat.getColor(textView.context, R.color.dark_blue))
        // 设置内边距
        setPadding(12.dpToPx(textView.context), 6.dpToPx(textView.context),
            12.dpToPx(textView.context), 6.dpToPx(textView.context))
    }
    textView.background = shape
}

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