Shader-＞LinearGradient线性渐变着色器详解

XML文件

<com.example.myapplication.MyView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_gravity="center"
    android:layout_height="400dp"/>

自定义View代码

class MyView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var mStartColor = Color.RED
    private var mMiddleColor = Color.BLUE
    private var mEndColor = Color.GREEN
    
    private var mDrawRect = RectF()
    private var mLinearGradient: LinearGradient? = null
    private var mDrawPaint = Paint()

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mDrawRect = RectF(0f, 0f, w.toFloat(), h.toFloat())
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        mLinearGradient?.let {
            mDrawPaint.shader = it
            canvas.drawRect(mDrawRect, mDrawPaint)
        }
    }
}

LinearGradient线性着色器参数详解

• LinearGradient线性着色器赋值给Paint画笔，可以使用Canvas画布和Paint画笔绘制具有线性渐变的内容

两种构造函数

public LinearGradient(float x0, // 起始点的x坐标
					  float y0, // 起始点的y坐标
					  float x1, // 结束点的x坐标
					  float y1, // 结束点的y坐标
       				  @ColorInt int color0, // 单个起始颜色
       				  @ColorInt int color1, // 单个结束颜色
      				  @NonNull TileMode tile // 颜色映射方式) {}

public LinearGradient(float x0, // 起始点的x坐标
					  float y0, // 起始点的y坐标
					  float x1, // 结束点的x坐标
					  float y1, // 结束点的y坐标
    				  @NonNull @ColorLong long[] colors, // 多个起始颜色
            		  @Nullable float[] positions, // 多个结束颜色
            		  @NonNull TileMode tile // 颜色映射方式) {}

起始点(x, y)和结束点(x, y)决定颜射映射方向和映射范围

• 如果着色器铺满整个绘制区域，区域有可能是Rect，Circle，Path，最后一个参数颜色映射方式Shader.TileMode会失效
• 水平方向

mLinearGradient = LinearGradient(
    mDrawRect.left,
    mDrawRect.top,
    mDrawRect.right,
    mDrawRect.top,
    mStartColor,
    mEndColor,
    Shader.TileMode.MIRROR
)

• 竖直方向

mLinearGradient = LinearGradient(
   mDrawRect.left,
   mDrawRect.top,
   mDrawRect.left,
   mDrawRect.bottom,
   mStartColor,
   mEndColor,
   Shader.TileMode.MIRROR
)

• 对角线方向

mLinearGradient = LinearGradient(
    mDrawRect.left,
    mDrawRect.top,
    mDrawRect.right,
    mDrawRect.bottom,
    mStartColor,
    mEndColor,
    Shader.TileMode.MIRROR
)

颜色数组IntArray和位置数组FloatArray决定颜色的数量和位置

• 起始颜色mStartColor和过渡颜色mMiddleColor只作用于[0f, 0.1f]这个区间
• 过渡颜色mMiddleColor和结束颜色mEndColor只作用于[0.9, 1f]这个区间
• 过渡颜色mMiddleColor只作用于[0.1f, 0.9f]这个区间

mLinearGradient = LinearGradient(
    mDrawRect.left,
    mDrawRect.top,
    mDrawRect.right,
    mDrawRect.top,
    intArrayOf(mStartColor, mMiddleColor,mMiddleColor, mEndColor),
    floatArrayOf(0f, 0.1f, 0.9f, 1f), 
    Shader.TileMode.MIRROR
)

映射方式Shader.TileMode决定着色器绘制区域之外的部分如何绘制

• 着色器绘制区域就是创建LinearGradient的时候指定的
• Shader.TileMode.CLAMP
  • 作用：边缘填充，只有结束颜色填充绘制区域之外的部分

mLinearGradient = LinearGradient(
    mDrawRect.left,
    mDrawRect.top,
    mDrawRect.right/2,
    mDrawRect.top,
    mStartColor, mEndColor,
    Shader.TileMode.CLAMP
)

• Shader.TileMode.REPEAT
  • 作用：重复填充，开始颜色和结束颜色一起填充绘制区域之外的部分

        mLinearGradient = LinearGradient(
            mDrawRect.left,
            mDrawRect.top,
            mDrawRect.right/2,
            mDrawRect.top,
            mStartColor, mEndColor,
            Shader.TileMode.REPEAT
        )

• Shader.TileMode.MIRROR
  • 作用：镜像填充，开始颜色和结束颜色一起填充绘制区域之外的部分

mLinearGradient = LinearGradient(
    mDrawRect.left,
    mDrawRect.top,
    mDrawRect.right/2,
    mDrawRect.top,
    mStartColor, mEndColor,
    Shader.TileMode.MIRROR
)