线性渐变LinearGradient的使用

来源：互联网发布：网络电视直播软件apk 编辑：程序博客网时间：2024/04/30 02:34

如下图所示是产品设计出来的自定义view，风险等级的；其中的一部分就是中间的那个渐变的bar；这里就讲解下LinearGradient

这里写图片描述

整个自定义view可以拆分成几部分：
绘制：
- 中间的条形bar
- 上下的刻度线和刻度值
- 下面的圆圈
- 滑块
- 左下角和右下角的文字（整个可以忽略）
事件：
- 滑块的滚动
- 刻度值的放大
- 滑块的矫正（只能滑到刻度值上，其他地方做判断，离哪个近就跳到哪一个）

这节主要来将中间的条形bar的渐变色
首先我把中间的条目定义出来

package com.newtouch.levelbar;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.RectF;import android.graphics.drawable.BitmapDrawable;import android.util.AttributeSet;import android.view.ViewGroup;/** * 功能：自定义的风险等级 * @author xiehj * @time 2016/12/22 14:06 */public class LevelBar extends ViewGroup {    private int mViewWidth = 0;//view的宽度    private int mViewHeight = 0;//view的高度    private int leftAndRightMargin = 10;//左右两边的间距,可以用户自定义    private int mLevelBarHeight = 30;//等级条的高度    //创建一个画笔    private Paint mPaint = new Paint();    //初始化画笔    private void initPaint() {        mPaint.setColor(Color.BLACK);       //设置画笔颜色        mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充        mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px    }    public LevelBar(Context context) {        this(context, null);    }    public LevelBar(Context context, AttributeSet attrs) {        super(context, attrs);        setBackgroundDrawable(new BitmapDrawable());        /**         * 获得我们所定义的自定义样式属性         */        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.LevelBar);        leftAndRightMargin = a.getDimensionPixelSize(R.styleable.LevelBar_leftAndRightMargin,10);//左右间距        mLevelBarHeight = a.getDimensionPixelSize(R.styleable.LevelBar_barHeight,30);//bar高度        a.recycle();        initPaint();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        //默认测量模式为EXACTLY，否则请使用上面的方法并指定默认的宽度和高度        mViewWidth = MeasureSpec.getSize(widthMeasureSpec);        mViewHeight = MeasureSpec.getSize(heightMeasureSpec);        setMeasuredDimension(mViewWidth, mViewHeight);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        //设置滑块在父布局的位置    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        drawRiskLevelBar(canvas);//画条形bar    }    /**     * 画风险等级条     * @param canvas     */    private void drawRiskLevelBar(Canvas canvas) {        //渐变色        LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), 0,new int[]{getResources().getColor(R.color.start),getResources().getColor(R.color.end)}, null, LinearGradient.TileMode.CLAMP);        mPaint.setShader(linearGradient);        //矩形左上角和右下角的点的坐标        RectF rectF = new RectF(leftAndRightMargin,mViewHeight/2-mLevelBarHeight/2,mViewWidth-leftAndRightMargin,mViewHeight/2+mLevelBarHeight/2);        canvas.drawRoundRect(rectF, 4, 4, mPaint);    }}

效果图：
这里写图片描述

首先看下LinearGradient的构造方法和各个参数的含义
这里写图片描述

/** Create a shader that draws a linear gradient along a line.        @param x0           The x-coordinate for the start of the gradient line        @param y0           The y-coordinate for the start of the gradient line        @param x1           The x-coordinate for the end of the gradient line        @param y1           The y-coordinate for the end of the gradient line        @param  colors      The colors to be distributed along the gradient line        @param  positions   May be null. The relative positions [0..1] of                            each corresponding color in the colors array. If this is null,                            the the colors are distributed evenly along the gradient line.        @param  tile        The Shader tiling mode    */    public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],            TileMode tile) {        if (colors.length < 2) {            throw new IllegalArgumentException("needs >= 2 number of colors");        }        if (positions != null && colors.length != positions.length) {            throw new IllegalArgumentException("color and position arrays must be of equal length");        }        mType = TYPE_COLORS_AND_POSITIONS;        mX0 = x0;        mY0 = y0;        mX1 = x1;        mY1 = y1;        mColors = colors;        mPositions = positions;        mTileMode = tile;        init(nativeCreate1(x0, y0, x1, y1, colors, positions, tile.nativeInt));    }    /** Create a shader that draws a linear gradient along a line.        @param x0       The x-coordinate for the start of the gradient line        @param y0       The y-coordinate for the start of the gradient line        @param x1       The x-coordinate for the end of the gradient line        @param y1       The y-coordinate for the end of the gradient line        @param  color0  The color at the start of the gradient line.        @param  color1  The color at the end of the gradient line.        @param  tile    The Shader tiling mode    */    public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,            TileMode tile) {        mType = TYPE_COLOR_START_AND_COLOR_END;        mX0 = x0;        mY0 = y0;        mX1 = x1;        mY1 = y1;        mColor0 = color0;        mColor1 = color1;        mTileMode = tile;        init(nativeCreate2(x0, y0, x1, y1, color0, color1, tile.nativeInt));    }

构造方法一参数：

x0表示渲染起始位置的x坐标
y0表示渲染起始位置的y坐标
x1表示渲染结束位置的x坐标
y1表示渲染结束位置的y坐标
colors[]表示渲染的颜色，它是一个颜色数组，数组长度必须大于等于2
positions[]表示colors数组中几个颜色的相对位置，是一个float类型的数组，该数组的长度必须与colors数组的长度相同。如果这个参数使用null也可以，这时系统会按照梯度线来均匀分配colors数组中的颜色
tile表示平铺方式，有三种，我们分别来看

构造方法二参数：

x0表示渲染起始位置的x坐标
y0表示渲染起始位置的y坐标
x1表示渲染结束位置的x坐标
y1表示渲染结束位置的y坐标
color1表示渲染的第一个颜色
color1表示渲染的第二个颜色
tile表示平铺方式，有三种，我们分别来看

上面的效果可以使用两种中的任意一种

 LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), 0,new int[]{getResources().getColor(R.color.start),getResources().getColor(R.color.end)}, null, LinearGradient.TileMode.CLAMP);        LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), 0,getResources().getColor(R.color.start),getResources().getColor(R.color.end), LinearGradient.TileMode.CLAMP);

到这里前面几个参数都没有问题了，下面来看下最后一个TitleMode的模式

public enum TileMode {        /**         * replicate the edge color if the shader draws outside of its         * original bounds         */        CLAMP   (0),        /**         * repeat the shader's image horizontally and vertically         */        REPEAT  (1),        /**         * repeat the shader's image horizontally and vertically, alternating         * mirror images so that adjacent images always seam         */        MIRROR  (2);        TileMode(int nativeInt) {            this.nativeInt = nativeInt;        }        final int nativeInt;    }

可以看到它是枚举类型的，并且有三种
LinearGradient.TileMode.CLAMP：**
LinearGradient.TileMode.REPEAT：**
LinearGradient.TileMode.MIRROR:**

未完待续

0 0