android--实现textView的渲染加载效果

最近看了下自定义view，看到了一个渲染器，感觉比较好玩，学习了下。
　在Android中，提供了Shader类专门用来渲染图像以及一些几何图形。

　　Shader类包括了5个直接子类，分别为：BitmapShader、ComposeShader、LinearGradient、RadialGradient以及SweepGradient。其中，BitmapShader用于图像渲染；ComposeShader用于混合渲染；LinearGradient用于线性渲染；RadialGradient用于环形渲染；而SweepGradient则用于梯度渲染。

　　使用Shader类进行图像渲染时，首先需要构建Shader对象，然后通过Paint的setShader()方法来设置渲染对象，最后将这个Paint对象绘制到屏幕上即可。

　　有一点需要注意，使用不同的方式渲染图像时需要构建不同的对象。
　　1.BitmapShader（图像渲染）

　　BitmapShader的作用是使用一张位图作为纹理来对某一区域进行填充。可以想象成在一块区域内铺瓷砖，只是这里的瓷砖是一张张位图而已。

　　BitmapShader函数原型为：

　　public BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY);

　　其中，参数bitmap表示用来作为纹理填充的位图；参数tileX表示在位图X方向上位图衔接形式；参数tileY表示在位图Y方向上位图衔接形式。

　　Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR。

　　CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色。REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图。MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图。

2.LinearGradient（线性渲染）

　　LinearGradient的作用是实现某一区域内颜色的线性渐变效果。

　　LinearGradient的函数原型为：

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

　　其中，参数x0表示渐变的起始点x坐标；参数y0表示渐变的起始点y坐标；参数x1表示渐变的终点x坐标；参数y1表示渐变的终点y坐标；参数colors表示渐变的颜色数组；参数positions用来指定颜色数组的相对位置；参数tile表示平铺方式。

　　通常，参数positions设为null，表示颜色数组以斜坡线的形式均匀分布。

3.ComposeShader（混合渲染）

　　ComposeShader的作用是实现渲染效果的叠加，如BitmapShader与LinearGradient的混合渲染效果等。

　　ComposeShader的函数原型为：

　　public ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode);

　　其中，参数shaderA表示某一种渲染效果；参数shaderB也表示某一种渲染效果；参数mode表示两种渲染效果的叠加模式。

　　PorterDuff.Mode有16种参数可供选择，分别为：CLEAR、SRC、DST、SRC_OVER、DST_OVER、SRC_IN、DST_IN、SRC_OUT、DST_OUT、SRC_ATOP、DST_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。

　　这16种叠加模式的具体叠加效果如图1所示。

图1 叠加效果

4.RadialGradient（环形渲染）

　　RadialGradient的作用是在某一区域内实现环形的渐变效果。

　　RadialGradient的函数原型为：

　　public RadialGradient (float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile);

　　其中，参数x表示环形的圆心x坐标；参数y表示环形的圆心y坐标；参数radius表示环形的半径；参数colors表示环形渐变的颜色数组；参数positions用来指定颜色数组的相对位置；参数tile表示平铺的方式。

5.SweepGradient（梯度渲染）

　　SweepGradient也称为扫描渲染，是指在某一中心以x轴正方向逆时针旋转一周而形成的扫描效果的渲染形式。

　　SweepGradient的函数原型为：

　　public SweepGradient (float cx, float cy, int[] colors, float[] positions);

　　其中，参数cx表示扫描的中心x坐标；参数cy表示扫描的中心y坐标；参数colors表示梯度渐变的颜色数组；参数positions用来指定颜色数组的相对位置。

前面的都是别人的东西，借鉴过来理解这个渲染器。下面是一个自己写的demo。

静态图看不到效果，直接上代码吧。也就是一个自定义view

package com.example.hzp.demo;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Shader;import android.util.AttributeSet;import android.widget.TextView;/** * Created by hzp on 16/4/14. */public class GradientView extends TextView {    private float mViewWidth;    private Paint mPaint;    private LinearGradient mLineargradient;    private Matrix mGradientMatrix;    private float mTranslate;    public GradientView(Context context) {        super(context);        mViewWidth = getWidth();        mPaint = new Paint();    }    public GradientView(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        if(mViewWidth==0)            //设置控件的长度            mViewWidth = getMeasuredWidth();            if(mViewWidth>0){                //将画笔设置给当前画笔                mPaint = getPaint();                //得到Lineargraadient属性                mLineargradient = new LinearGradient(                        0,0,mViewWidth,0,new int[]{                        Color.BLUE,0xffffffff,Color.RED                }                        ,null, Shader.TileMode.CLAMP//设置显示的模式  clamp 先显示一遍blue再显示一篇红色 ,MIRROR 快速交替REPEAT 混合                );                //给画笔设置颜色交替属性                mPaint.setShader(mLineargradient);                mGradientMatrix = new Matrix();            }    }    public void setPaint(){        mPaint = null;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if(mGradientMatrix!=null){            mTranslate+=mViewWidth/5;            if(mTranslate>2*mViewWidth){                mTranslate= -mViewWidth/2;            }            mGradientMatrix.setTranslate(mTranslate,0);            mLineargradient.setLocalMatrix(mGradientMatrix);            postInvalidateDelayed(100);        }    }}

然后把这个控件加载出来就可以出现波浪滚动的效果了。当然了还有其他的可以尝试！