前言：經常使用頭條的朋友們都知道，每當我們切換頁面的載入的時候，然後都會閃現出一段文字“你關注的才是頭條”，一閃一閃的。在我們上一節《Android開發之高階渲染》大家對渲染有一定的瞭解，今天我們結合一個小案例，用到線性渲染和Matrix然後結合文字，實現這一個閃閃發光的文字，不過我們實現的要比頭條的那個更加豐富，更加亮眼！

---------------分割線-----------

ok，先來看一下效果

---------------分割線--------------

實現：1.首先繼承TextView類，方便我們獲取文字的資訊。

2.在onsizechanged裡面獲取文字的相關資訊。

3.在onsizechanged設定線性渲染（記得設定渲染的寬度）。

4.在onDraw裡面動態獲取文字的大小。

5.自增translateX，然後根據文字的大小判斷是否閃動到頭。

6.在onDraw裡面動態改變matrix.setTranslate(translateX, 0)。

7.最後在onDraw裡面重新整理頁面（延遲重新整理）。

--------------分割線---------------

ok我們來看下完整程式碼：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Shader;
import android.support.v7.widget.AppCompatTextView;
import android.text.TextPaint;
import android.util.AttributeSet;


/**
 * Created by Fly on 2017/6/6.
 */

public class LinearGradientTextView4 extends AppCompatTextView {

    private TextPaint paint;
    private LinearGradient linearGradient;
    private Matrix matrix;
    private float translateX;
    private float deltaX = 20;

    private int showTime;//顯示的時間
    private int lineNumber;//行數
    private int showStyle;
    public static final int UNIDIRECTION = 0;
    public static final int TWOWAY = 1;
    private int color;

    public LinearGradientTextView4(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LinearGradientTextView4);
        showTime = typedArray.getInteger(R.styleable.LinearGradientTextView4_showTime, 40);
        lineNumber = typedArray.getInteger(R.styleable.LinearGradientTextView4_lineNumber, 1);
        showStyle = typedArray.getInt(R.styleable.LinearGradientTextView4_showStyle, UNIDIRECTION);
        color = typedArray.getColor(R.styleable.LinearGradientTextView4_textColor, Color.BLUE);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        paint = getPaint();
        String text = getText().toString();
        float textWidth = paint.measureText(text);
        //GradientSize=三個文字的大小
        int gradientSize = (int) (3 * textWidth / text.length());
        //邊緣融合
        linearGradient = new LinearGradient(-gradientSize, 0, gradientSize, 0, new int[]{color - 0xAF000000, color, color - 0xAF000000},
                new float[]{0, 0.5f, 1}, Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);
        matrix = new Matrix();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float textWidth = (getPaint().measureText(getText().toString())) / lineNumber;
        translateX += deltaX;
        switch (showStyle) {
            case UNIDIRECTION:
                //單向閃動
                if (translateX > textWidth + 1 || translateX < 1) {
                    translateX = 0;
                    translateX += deltaX;
                }
                break;
            case TWOWAY:
                //來回閃動
                if (translateX > textWidth + 1 || translateX < 1) {
                    deltaX = -deltaX;
                }
                break;
        }

        matrix.setTranslate(translateX, 0);
        linearGradient.setLocalMatrix(matrix);
//        if (lineNumber > 1) {
//            postInvalidateDelayed(showTime * lineNumber);
//        } else {
//            postInvalidateDelayed(showTime);
//        }
        postInvalidateDelayed(showTime * lineNumber);
//        postInvalidate();
    }
}
 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LinearGradientTextView4">
        <attr name="lineNumber" format="integer"></attr>
        <attr name="showTime" format="integer"></attr>
        <attr name="textColor" format="color"></attr>
        <attr name="showStyle">
            <enum name="UNIDIRECTION" value="0"></enum>
            <enum name="TWOWAY" value="1"></enum>
        </attr>

    </declare-styleable>
</resources>
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.fly.lsn31_gradient.MainActivity">

    <com.fly.lsn31_gradient.LinearGradientTextView4
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="你關心的   \n    是Fly學院"
        android:textSize="35sp"
        app:lineNumber="2"
        app:showStyle="UNIDIRECTION"
        app:showTime="40" />

    <com.fly.lsn31_gradient.LinearGradientTextView4
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="你關心的是Fly學院"
        android:textSize="35sp"
        app:lineNumber="1"
        app:showStyle="TWOWAY"
        app:showTime="40"
        app:textColor="#6e6e6e" />

</LinearLayout>