用于在彩色圆圈中显示文本视图的gradientDrawable

关于 GradientDrawable 在彩色圆圈中显示文本视图的全面解析

基础概念

GradientDrawable 是 Android 中用于定义各种形状和渐变效果的可绘制对象，它是 Drawable 的一个子类。通过 GradientDrawable，开发者可以创建矩形、椭圆形、线条和环形等形状，并为其设置纯色或渐变颜色。

优势

灵活性：可以动态创建各种形状而无需准备多张图片资源
性能优化：相比位图资源，GradientDrawable 占用内存更少
适配性：自动适应不同屏幕尺寸和密度
可编程性：可以在运行时修改形状属性
矢量特性：不会因缩放而失真

类型

GradientDrawable 支持以下几种主要形状类型：

矩形（RECTANGLE）
椭圆形（OVAL）
线条（LINE）
环形（RING）

应用场景

圆形头像或图标背景
带圆角的按钮
渐变背景的视图
状态指示器（如在线状态圆点）
进度指示器
自定义形状的标签或徽章

在彩色圆圈中显示文本视图的实现

XML 方式实现

<!-- res/drawable/circle_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF5722" />
    <size
        android:width="100dp"
        android:height="100dp" />
</shape>

然后在布局中使用：

<TextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/circle_background"
    android:text="AB"
    android:textColor="#FFFFFF"
    android:gravity="center"
    android:textSize="24sp" />

Java/Kotlin 动态实现

Kotlin 示例：

val textView = TextView(context).apply {
    layoutParams = ViewGroup.LayoutParams(100, 100)
    text = "AB"
    setTextColor(Color.WHITE)
    gravity = Gravity.CENTER
    textSize = 24f
    
    background = GradientDrawable().apply {
        shape = GradientDrawable.OVAL
        setColor(Color.parseColor("#FF5722"))
    }
}

添加渐变效果

val gradientDrawable = GradientDrawable(
    GradientDrawable.Orientation.TOP_BOTTOM,
    intArrayOf(Color.parseColor("#FF5722"), Color.parseColor("#FF9800"))
).apply {
    shape = GradientDrawable.OVAL
    gradientType = GradientDrawable.LINEAR_GRADIENT
    cornerRadius = 50f // 对于圆形，半径应为宽度/高度的一半
}

textView.background = gradientDrawable

常见问题及解决方案

问题1：圆形显示为椭圆

原因：视图的宽度和高度不相等，或者 cornerRadius 设置不当。

解决方案：

确保视图的宽度和高度相同
对于动态创建的 GradientDrawable，设置 shape 为 OVAL 而不是依赖 cornerRadius

问题2：渐变效果不明显

原因：颜色值过于接近或渐变方向设置不当。

解决方案：

选择对比度更高的颜色
调整渐变方向（如 LEFT_RIGHT, TOP_BOTTOM 等）

问题3：文本显示不居中

原因：视图的 gravity 或文本对齐方式未正确设置。

解决方案：

在 TextView 中设置 android:gravity="center"
对于其他视图，可以使用 android:layout_gravity="center"（在父布局中）

问题4：圆形边缘锯齿

原因：抗锯齿未启用或视图尺寸过小。

解决方案：

gradientDrawable.setAntiAlias(true)

高级应用示例：带边框的圆形文本视图

val gradientDrawable = GradientDrawable().apply {
    shape = GradientDrawable.OVAL
    setColor(Color.WHITE)
    setStroke(4, Color.BLUE) // 4px宽的蓝色边框
    setSize(100, 100) // 设置固定尺寸
}

val textView = TextView(context).apply {
    layoutParams = ViewGroup.LayoutParams(100, 100)
    text = "AB"
    setTextColor(Color.BLACK)
    gravity = Gravity.CENTER
    textSize = 24f
    background = gradientDrawable
}

通过 GradientDrawable，开发者可以轻松创建各种自定义形状的视图，特别是圆形文本视图这种常见需求，既减少了资源文件数量，又提高了应用的性能和灵活性。