自定义View——Shader的使用

楔子——Shader

我们在生活中经常会使用到一些渐变效果如：

那么在自定义View的时候我们如何在我们的View上添加这种效果呢？
并且我们在特效中经常看到一些就是背景颜色仿佛在流动的字这种效果又是如何实现的呢？

这些都是使用了Shader这个类来完成的。

如何使用Shader

Shader的种类

首先我们介绍Shader有哪些种类，每种Shader能够实现什么效果。首先我们要知道所有的渐变效果类都是继承了Shader这个类的。也就是Shader是所有渐变类的父类。（策略模式）

• LinearGradient 线性渐变

  效果展示：

  
  从效果中我们可以看出，线性渐变是从左上角渐变到右下角。而不是从上到下或者从左到右的。那么怎么改变其渐变的方向呢？这个稍后再揭晓~

  展示代码：

//注释：之后的代码展示只展示"主要代码"，其他代码为该代码片段。
public class ShaderView extends View {
   
    private int mViewWidth;
    private int mViewHeight;
    //创建画笔
    private final Paint mPaint = new Paint();

    public ShaderView(Context context) {
        this(context,null);
    }

    public ShaderView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public ShaderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView(){
        //设置笔触类型
        mPaint.setStyle(Paint.Style.FILL);
        //抗锯齿
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //获取View的大小
        mViewWidth = w;
        mViewHeight = h;

        //主要代码：线性渐变
        LinearGradient linearGradient = new LinearGradient(
                0,0,w,h, Color.RED,Color.GREEN, Shader.TileMode.CLAMP
        );
        //添加到画笔中
        mPaint.setShader(linearGradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //在画布上绘制矩形
        canvas.drawRect(0,0,mViewWidth,mViewHeight,mPaint);
    }
}
//原理：首先设置渐变的范围(左上角和右下角的坐标)，之后设置渐变的颜色（关于颜色，官方给的构造方法默认是必须有两种颜色，那么怎么设置多种颜色呢，我们稍后会讲解到）。最后设置渐变的模式（首先讲解下作用：当绘制的范围，超出了渐变的范围的时候，剩余部分会根据渐变的模式，进行填充。详情见后文，现在知道就可以了,为拉伸模式）。将其放入画笔中，将其绘制在画布上。

• RadialGradient 光束渐变

  效果展示：

  <