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

前言:经常使用头条的朋友们都知道,每当我们切换页面的加载的时候,然后都会闪现出一段文字“你关注的才是头条”,一闪一闪的。在我们上一节《Android开发之高级渲染》大家对渲染有一定的了解,今天我们结合一个小案例,用到线性渲染和Matrix然后结合文本,实现这一个闪闪发光的文本,不过我们实现的要比头条的那个更加丰富,更加亮眼!

---------------分割线-----------

ok,先来看一下效果

Android开发之让你的文本颜色来回闪动_第1张图片

---------------分割线--------------

实现: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();
    }
}
属性:


    
        
        
        
        
            
            
        

    
在布局中具体使用:



    

    


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

你可能感兴趣的:(安卓系列,文本闪动,颜色闪动,安卓Paint高级使用)