自定义View-第十六步：LinearGradient线性渐变与

前言

根据启舰 的博客所学习的自定义View。
大家还记得gradient标签么？这里的LinearGradient的效果是线性渐变，可以设置多种颜色的渐变。

一、 初识LinearGradient

public LinearGradient(float x0, float y0, float x1, float y1,int color0, int color1, TileMode tile)

• (x0,y0): 起始渐变点坐标
• (x1,y1): 结束渐变点坐标
• color0:起始颜色，颜色值必须使用0xAARRGGBB形式的16进制表示！表示透明度的AA一定不能少
• color1:终止颜色
• TileMode tile：与BitmapShader一样，用于指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法。忘记的，可以进入paint的各种方法的BitmapShader一节查看。

这里稍微提一下吧！⤵️

模式	效果
Shader.TileMode.CLAMP	会将边缘的一个像素进行拉伸、扩展
Shader.TileMode.MIRROR	镜面翻转
Shader.TileMode.REPEAT	平移复制

看了半天，这个明明只能设置两种颜色渐变吧，表担心，看这个

public LinearGradient(float x0, float y0, float x1, float y1,int colors[], float positions[], TileMode tile)

• (x0,y0): 起始渐变点坐标
• (x1,y1): 结束渐变点坐标
• colors[]: 用于指定渐变的颜色值数组，同样，颜色值必须使用0xAARRGGBB形式的16进制表示！表示透明度的AA一定不能少。
• positions[]: 与渐变的颜色相对应，取值是0-1的float类型，表示在每一个颜色在整条渐变线中的百分比位置
• TileMode tile：指定控件区域大于指定的渐变区域时，空白区域颜色填充方法。

这个构造函数则可以实现多种颜色渐变哦！

二、小试牛刀

  //从红色到蓝色两色渐变，从（0，0）到（100，100）渐变，模式为平移复制
        paint.setShader(new LinearGradient(0, 0, 100, 100, 0xffff0000, 0xff0000ff, Shader.TileMode.REPEAT));
        canvas.drawRect(0, 0, 200, 200, paint);
        canvas.translate(0,300);

        //多色渐变
        int[] colors = {0xffff0000,0xff00ff00,0xffff0000,0xffffff00,0xff0000ff};
        float[]  pos = {0f,0.2f,0.4f,0.6f,1.0f};
        paint.setShader(new LinearGradient(0, 0, 100, 100, colors, pos, Shader.TileMode.REPEAT));
        canvas.drawRect(0, 0, 200, 200, paint);

        paint.setTextSize(50);
        canvas.drawText("HELLO WORLD",0,300,paint);

效果图
注意： colors和pos的个数一定要相等

三、动起来~

效果图

原理：
让渐变的LinearGradient逐渐从屏幕外移动到文字上。
源码如下：

     int x;
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        ValueAnimator animator=ValueAnimator.ofInt(getMeasuredWidth());
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setDuration(3000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                x = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(LAYER_TYPE_SOFTWARE, null);//对单独的View在运行时阶段禁用硬件加速
        canvas.drawColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setTranslate(x, 0);
        LinearGradient linearGradient = new LinearGradient(-getMeasuredWidth(), 300, 0, 0 ,0xffff0000,0xff0000ff, Shader.TileMode.REPEAT);
        linearGradient.setLocalMatrix(matrix);
        paint.setShader(linearGradient);
        paint.setTextSize(50);
        canvas.drawText("HELLO WORLD", 0, 300, paint);
    }

四、SweepGradient：扫描式渐变

SweepGradient(float cx, float cy, int color0, int color1)  
SweepGradient(float cx, float cy, int[] colors, float[] positions)  

• (cx,cy) 扫描中心的坐标
• color0:起始颜色，颜色值必须使用0xAARRGGBB形式的16进制表示！表示透明度的AA一定不能少
• color1:终止颜色
  举个栗子

    SweepGradient sweepGradient = new SweepGradient(100, 100, 0x00FF0000, 0xFF0000FF);
        paint.setShader(sweepGradient);
        canvas.drawCircle(100, 100, 50, paint);

效果图

详细的就不讲解啦，自己试一下吧