版权声明

本文来自博客园，作者：观心静，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/9708597.html

本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

前言

在android自定义View中设置颜色渐变的分类有：

LinearGradient线性渐变

线性渐变的参数为：

A点X坐标，A点Y坐标，B点X坐标，B点Y坐标，int[] 颜色数组，float[] 渐变点数组，渲染器模式；

RadialGradient镜像渐变

镜像渐变的参数为：

圆心点X坐标，圆心点Y坐标，半径增量值，int[] 颜色数组，float[] 渐变点数组，渲染器模式；

SweepGradient角度渐变

角度渐变的参数为：

圆心点X坐标，圆心点Y坐标，int[] 颜色数组，float[] 渐变点数组；

渲染器模式说明

Shader.TileMode.CLAMP 边缘拉伸

Shader.TileMode.MIRROR 镜像（在水平方向和垂直方向交替镜像, 两个相邻图像间没有缝隙）

Shader.TileMode.REPEAT 重复模式（在水平方向和垂直方向重复摆放,两个相邻图像间有缝隙缝隙）

特别注意

所有的渐变设置都最好在onDraw里实例并且设置，原因是渐变的坐标也是需要跟随View大小改变的（这样动态改变View的时候渐变效果也会随时改变），而且在onDraw渐变好处是如果是用使用View的高宽确定坐标值，这个时候View已经onMeasure完成了

线性渐变 LinearGradient

效果图：

代码：

package com.example.lenovo.mydemo.myViewDemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import com.example.lenovo.mydemo.R;

/**
 * Created by lenovo on 2018/7/2.
 */

public class MyView_1 extends View {
    private final String TAG = "MyView_1";
    private Paint mPaint;
    private int i = 0;

    public MyView_1(Context context) {
        super(context);
    }

    public MyView_1(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyView_1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);


    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint = new Paint();
        mPaint .setStrokeWidth(20);
        //LinearGradient 参数是 开始坐标和结束坐标 和 颜色
        LinearGradient linearGradient = new LinearGradient(0,100,1000,100,
                getResources().getColor(R.color.colorGreen),
                getResources().getColor(R.color.colorIndigo),
                Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);
        canvas.drawLine(0,100,i,100,mPaint);
        if (i==1000){
            i=1000;
        }else {
            i=i+10;
        }
        postInvalidateDelayed(50);

    }
}

另外，请注意线性渐变是通过坐标来控制渐变方向的

        //从上到下渐变
        val linearGradient = LinearGradient(0f, 0f, 0f, mHeight.toFloat(), mStartColor, mEndColor, Shader.TileMode.CLAMP)
        //从下到上渐变
       val linearGradient = LinearGradient(0f, mHeight.toFloat(), 0f, mHeight.toFloat(), mStartColor, mEndColor, Shader.TileMode.CLAMP)

角度渐变SweepGradient

效果图：

代码：

package com.example.lenovo.mydemo.myViewDemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import com.example.lenovo.mydemo.R;

/**
 * Created by lenovo on 2018/7/2.
 */

public class MyView_1 extends View {
    private final String TAG = "MyView_1";
    private Paint mPaint;
    private int i = 0;
    private Bitmap mBitmap;

    public MyView_1(Context context) {
        super(context);
    }

    public MyView_1(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mBitmap = BitmapFactory.decodeResource(context.getResources(),R.mipmap.ic_bg);
        mPaint = new Paint();
    }

    public MyView_1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);


    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /*
        导入图片
         */
        mPaint.reset();
        Rect bPRect = new Rect(0,0,mBitmap.getWidth(),mBitmap.getHeight());
        Rect canvasRect = new Rect(0,0,getWidth(),getHeight());
        canvas.drawBitmap(mBitmap,bPRect,canvasRect,mPaint);
        mPaint.reset();
        /*
        画底图圆环
         */
        mPaint.setColor(getResources().getColor(R.color.colorGray));
        mPaint.setStrokeWidth(50);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(getWidth()/2,getHeight()/2,300,mPaint);
        mPaint.reset();

        /*
        画渐变色彩圆弧
         */
        mPaint.setStrokeWidth(40);
        /*   这个方式的渐变也可以直接使用
                SweepGradient sweepGradient = new SweepGradient(getWidth()/2,getHeight()/2,
                getResources().getColor(R.color.colorIndigo),
                getResources().getColor(R.color.colorGreen));
                */
        //添加渐变颜色
        int [] colors= new int[]{getResources().getColor(R.color.colorIndigo),
                getResources().getColor(R.color.colorIndigo2),
                getResources().getColor(R.color.colorIndigo3),
                getResources().getColor(R.color.colorGreen)
                };
        //添加渐变颜色改变点
        float[] f = new float[]{0,0.3f,0.6f,1};
        //SweepGradient 的参数是： X中心点，Y中心点，颜色数组，渐变点数组
        SweepGradient sweepGradient1 = new SweepGradient(getWidth()/2,getHeight()/2,colors,f);
        mPaint.setShader(sweepGradient1);
        //设置风格为空心圆
        mPaint.setStyle(Paint.Style.STROKE);
        //设置线条风格
        mPaint.setStrokeCap(Paint.Cap.BUTT);

        //设置圆弧坐标
        RectF rectF = new RectF();
        rectF.left = getLeft()+(getWidth()/2-300);
        rectF.right = getWidth()/2+300;
        rectF.top = getTop()+(getHeight()/2-300);
        rectF.bottom = getHeight()/2+300;
        //以中心点逆时针旋转画布90度
        canvas.rotate(-90,getWidth()/2,getHeight()/2);
        //圆弧值
        if(i==360) {
            i = 0;
        }else {
            i = i+10;
        }
        //画圆弧 第一个参数为圆形四角坐标,第二个参数为起始角度,第三个参数为增量角度,第四参数是否闭合图形
        canvas.drawArc(rectF,0,i,false,mPaint);
        //设置每50毫秒刷新
        postInvalidateDelayed(50);
        mPaint.reset();


    }
}

设置SweepGradient 渐变的开始角度：

因为大多数圆形渐变开始位置都不是一致的，所以我们需要设置渐变的开始角度

SweepGradient sg = new SweepGradient(getWidth()/2,getHeight()/2,colors,floats);
        Matrix matrix = new Matrix();
        //matrix.reset(); //如果是全局变量需要重置在插入值
        matrix.preRotate(135,getWidth(),getHeight());
        sg.setLocalMatrix(matrix);
        mPaint.setShader(sg);

posted on 2018-07-03 14:29 观心静阅读(2173) 评论(0) 编辑收藏举报

刷新页面返回顶部