自定义View之Paint

RadialGradient

RadialGradient即放射性渐变，由中心点向四周逐渐渐变，其颜色渐变是由中心点向四周以线性变化。以达到这样的效果：

它有两个构造函数：

• RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)
• RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)

双色的放射渐变

先看其对应的构造函数：

• RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)

其各参数的意义如下：

• centerX：表示渐变中心的X坐标
• centerY：表示渐变中心的Y坐标
• radius：表示渐变的半径
• centerColor：表示中心点的颜色
• edgeColor：边缘的颜色
• tileMode：表示渲染器的平铺模式

看一个例子：

onDraw{    ***    val widthView: Int = measuredWidth    val heightView: Int = measuredHeight    val radius = if (widthView > heightView) heightView / 2.0f else widthView / 2.0f    val colorResA = resources.getColor(android.R.color.holo_red_dark)    val colorResB = resources.getColor(android.R.color.holo_blue_dark)    val radialGradient = RadialGradient(widthView / 2.0f, heightView / 2.0f, radius, colorResA, colorResB, Shader.TileMode.REPEAT)    mPaint.shader = radialGradient    canvas?.drawRect(0f, 0f, measuredWidth.toFloat(), measuredHeight.toFloat(), mPaint)}

在onDraw方法中，创建了一个RadialGradient的实例，其中心点就是View的中心点。所绘制的矩形是一个矩形，其空白区域的填充采用模式是Shader.TileMode.REPEAT。

多色的放射渐变

先看其对应的构造函数：

• RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)

其各参数的意义如下：

• centerX：表示渐变中心的X坐标
• centerY：表示渐变中心的Y坐标
• radius：表示渐变的半径
• colors：表示渲染的颜色，它是一个颜色数组，数组长度必须大于等于2
• stops：表示相对位置数组，表示colors数组中几个颜色的相对位置，是一个float类型的数组，该数组的长度必须与colors数组的长度相同。如果这个参数使用null也可以，这时系统会按照梯度线来均匀分配colors数组中的颜色。
• tileMode：表示渲染器的平铺模式

看一个列子：

onDraw{    ***    val widthView: Int = measuredWidth    val heightView: Int = measuredHeight    val radius = if (widthView > heightView) heightView / 4.0f else widthView / 4.0f    val colorResA = resources.getColor(android.R.color.holo_red_dark)    val colorResB = resources.getColor(android.R.color.holo_blue_dark)    val colorResC = resources.getColor(android.R.color.black)    val colorResD = resources.getColor(android.R.color.holo_green_dark)    val colorArray = intArrayOf(colorResA, colorResB, colorResC, colorResD)    val radialGradient = RadialGradient(widthView / 2.0f, heightView / 2.0f, radius,            colorArray, null, Shader.TileMode.REPEAT)    mPaint.shader = radialGradient    canvas?.drawRect(0f, 0f, measuredWidth.toFloat(), measuredHeight.toFloat(), mPaint)}

在onDraw方法中，创建了一个RadialGradient，其stops传递了一个null。可以看到，其颜色是根据颜色数组中的颜色，按照梯度均匀线性变化的。

当定一个相对位置数组，并将其传递给RadialGradient：

val positionArray = floatArrayOf(0.0f, 0.3f, 0.4f, 1.0f)val radialGradient = RadialGradient(widthView / 2.0f, heightView / 2.0f, radius,            colorArray, positionArray, Shader.TileMode.REPEAT)

从效果图上可以看到，颜色的渐变并没有按照梯度均匀分布，其渐变的效果是：

1. 0.0f - 0.3f：这30%的占比中，渐变的起始颜色是红色，边缘颜色是蓝色
2. 0.3f - 0.4f：这10%的占比中，渐变的起始颜色是蓝色，边缘颜色是黑色
3. 0.4f - 1.0f：这60%的占比中，渐变的起始颜色是黑色，边缘颜色是绿色

这里需要注意的是：

1. 相对位置数组可以为NULL，当设置为NULL时，颜色沿梯度线性均匀变化
2. 如果设置了相对位置数组，该数组的的大小必须与颜色数组的长度一致。因为它的值一一对应了颜色的值。
3. 相对位置数组的值在0-1之间的Float值，它决定了相对应颜色的线变区间
4. 颜色数组的长度必须大于2
   

---

若想了解更多Paint相关的内容，请跳入： 自定义View系列文章目录

---

如果觉得我的文章对您有用，请随意点赞、评论。您的支持将鼓励我继续创作！