自定义View之Paint - RadialGradient

本文详细介绍了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)

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

  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系列文章目录




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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值