LinearGradient(线性渲染器)介绍（实现歌词效果和进度球效果）

1、LinearGradient（介绍）

查看文档发现它是继承于Shader类的,Shader类专门用来渲染图像以及一些几何图形。

Shader类包括了5个直接子类，分别为：BitmapShader、ComposeShader、LinearGradient、RadialGradient以及SweepGradient。

其中，BitmapShader用于图像渲染；ComposeShader用于混合渲染；LinearGradient用于线性渲染；RadialGradient用于环形渲染；而SweepGradient则用于梯度渲染。

2、使用

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

参数一：渐变坐标的起起始x坐标

参数二：渐变坐标的起起始y坐标

参数三：渐变坐标的终点x坐标

参数四：渐变坐标的终点Y坐标

参数五：渐变的颜色数组,沿梯度线分布

参数六：参数positions用来指定颜色数组的相对位置（可以为null，如果为null则所述颜色被均匀地分布沿梯度线）

参数七：shader的平铺模式

有以下几种:

      /**
         * 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);

下面写一个例子：

首先上效果图：

 

代码：

/**
 * @author 雷子
 */
public class MyTextView extends TextView {

    //线性渲染器
    private LinearGradient mLinearGradient;
    //是否停止线程
    private boolean isStop = true;
    //画笔
    private Paint mPaint;

    //相对位置信息
    private float position1;
    private float position2;

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

    public MyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //开启线程
        new Thread(thread).start();
    }

    //开启一个线程
    private Thread thread = new Thread() {
        @Override
        public void run() {
            super.run();
            while (isStop) {
                position1 += 0.002;
                position2 += 0.002;
                if (position2 >= 1) {
                    position1 = 0f;
                    position2 = 0f;
                }
                try {
                    sleep(10);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                postInvalidate();
            }
        }
    };

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int length = getText().length();
        float Size = getTextSize();
        float len = length * Size;
        mLinearGradient = new LinearGradient(0, 0, len, 0, new int[]{Color.GREEN, Color.BLUE}, new float[]{position1, position2}, Shader.TileMode.CLAMP);
        getPaint().setShader(mLinearGradient);
    }

    /**
     * 开始
     */
    public void start() {
        isStop = true;
        new Thread(thread).start();
    }

    /**
     * 停止
     */
    public void stop() {
        isStop = false;
    }
}

主要是获取到Paint,然后开一个线程不断改变LinearGradient 相对位置的position值，在调用PostIvalidate()，从而达到渐变的效果，代码量不多，主要是为了加深理解

Activity

public class MyActivity extends BaseActivity {

    @ViewInject(R.id.btn_start)
    private Button btn_start;

    @ViewInject(R.id.tv_text)
    private MyTextView myTextView;

    private boolean isflag = true;


    @Event(value = R.id.btn_start)
    private void onViewClick(View v) {
        if (isflag) {
            btn_start.setText("点击开始");
            myTextView.stop();
            isflag = false;
        } else {
            btn_start.setText("点击停止");
            myTextView.start();
            isflag = true;
        }
    }

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/whitesmoke"
    android:orientation="vertical">

    <com.lly.miss.view.MyTextView
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="好好学习,天天向上"
        android:textSize="60sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btn_start"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_below="@+id/tv_text"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="82dp"
        android:text="点击停止"
        android:textSize="30sp" />

</RelativeLayout>

 

还可以用在其他方面！

 

还记得360那个圆形清理球吗？下面来试试看！

 

主要代码：（PS：就从之前那个View改了一下）

/**
 * @author 雷子
 */
public class MyButton extends View {

    //线性渲染器
    private LinearGradient mLinearGradient;
    //是否停止线程
    private boolean isStop = true;
    //相对位置信息
    private float position1;
    private float position2;

    //画圆
    private Paint mPaint;
    //画面的边距
    private Paint mPaint1;
    //画文字
    private Paint mPaint2;

    //进度
    int mProgress = 0;
    //进度文字大小
    private float mTextSize = 30f;

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

    public MyButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        //开启线程
        new Thread(thread).start();
        mPaint = new Paint();
        mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint1.setColor(Color.LTGRAY);
        mPaint1.setStrokeWidth(2);
        mPaint1.setStyle(Paint.Style.STROKE);

        mPaint2 = new Paint();
        mPaint2.setTextSize(mTextSize);
    }

    //开启一个线程
    private Thread thread = new Thread() {
        @Override
        public void run() {
            super.run();
            while (isStop) {
                position1 += 0.001;
                position2 += 0.001;
                if (position1 >= 1) {
                    position1 = 0f;
                    position2 = 0f;
                }
                try {
                    sleep(20);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                postInvalidate();
            }
        }
    };

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float len = getWidth();
        mLinearGradient = new LinearGradient(0, getHeight() / 2 + 100, 0, getHeight() / 2 - 100, new int[]{Color.GREEN, Color.WHITE}, new float[]{position1, position2}, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
        //画圆
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, mPaint);
        //画圆边框
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 102, mPaint1);
        //画进度比
        mProgress = (int) ((position1 / 1) * 100);
        float textWidth = mPaint2.measureText(mProgress + "%");
        canvas.drawText(mProgress + "%", getWidth() / 2 - textWidth / 2, getWidth() / 2 + mTextSize / 2, mPaint2);
    }

    /**
     * 开始
     */
    public void start() {
        isStop = true;
        new Thread(thread).start();
    }

    /**
     * 停止
     */
    public void stop() {
        isStop = false;
    }
}

效果图：

 

 

 

是不是有点像！很多东西都是靠自己想象的！要试着自己去尝试~