Android开发之让你的文本颜色来回闪动

前言：经常使用头条的朋友们都知道，每当我们切换页面的加载的时候，然后都会闪现出一段文字“你关注的才是头条”，一闪一闪的。在我们上一节《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>

------------- 完！熬夜写博客，不容易，希望大家支持！-------------