高级UI<第二十篇>：使用LinearGradient实现文字轮播

使用线性渲染（LinearGradient）可以实现文字轮播效果。

其思路是：
（1）获取文字的宽度；
（2）计划每三个字为线性渲染的长度（文字宽度 / 字数 * 3）；
（3）重绘时使用矩阵变换的平移操作；

    mMatrix.setTranslate(mTranslate, 0);
    mLinearGradient.setLocalMatrix(mMatrix);

（4）实现轮播

    postInvalidateDelayed(100);

代码如下：

public class GradientTextView extends android.support.v7.widget.AppCompatTextView {

    private LinearGradient mLinearGradient;
    private TextPaint mPaint;
    private Matrix mMatrix;

    //移动总量
    private float mTranslate;
    //每次重绘的偏移量
    private float offset = 20;
    //文字宽度
    private float textWith;
    //线性渲染线段长度
    private int gradientSize;

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

    public GradientTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GradientTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = getPaint();
        mMatrix = new Matrix();

        String text = getText().toString();

        //获取文字的宽度
        textWith = mPaint.measureText(text,0,text.length());

        //设置渐变的宽度，就按照3个字作为一个渐变长度
        gradientSize = (int) (textWith / text.length() * 3);

        mLinearGradient = new LinearGradient(0, 0, gradientSize, 0, new int[]{Color.parseColor("#22ffffff"), Color.parseColor("#ffffffff"), Color.parseColor("#22ffffff")}, null, Shader.TileMode.CLAMP);

        mPaint.setShader(mLinearGradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //将背景设置成黑色
        canvas.drawColor(Color.BLACK);

        //这里有绘制文字的逻辑
        super.onDraw(canvas);

        mTranslate += offset;

        if (mTranslate >= textWith) {
            mTranslate -= offset;
            offset = -offset;
        }

        if(mTranslate <= 0){
            offset = -offset;
            mTranslate += offset;
        }

        //移动渐变
        mMatrix.setTranslate(mTranslate, 0);
        mLinearGradient.setLocalMatrix(mMatrix);

        //每次重绘延迟时间是100毫秒
        postInvalidateDelayed(100);
    }
}

效果如下：

2.gif

[本章完...]