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

来源：互联网发布：泛华掌中保车险知乎编辑：程序博客网时间：2024/05/21 05:36

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;    }}

效果图：

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

0 0