自定义View之Paint - RadialGradient

最新推荐文章于 2022-05-31 14:55:25 发布

行云间

最新推荐文章于 2022-05-31 14:55:25 发布

阅读量947

点赞数

CC 4.0 BY-SA版权

分类专栏： android自定义view 文章标签： Android Paint 放射性渐变 Radial

本文链接：https://blog.youkuaiyun.com/IO_Field/article/details/78460490

android自定义view 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了Android中的RadialGradient，包括双色和多色放射性渐变的实现方式，通过构造函数解析参数含义，并通过示例代码展示不同配置下的渐变效果，强调了相对位置数组在颜色分布中的重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)

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