TextView 流光效果

1、推荐使用:facebook

2、自己研究:

attrs.xml

<!-- 流光效果 -->
<declare-styleable name="ShimmerTextView">
    <attr name="stv_text_color" format="color" />
    <attr name="stv_shimmer_color" format="color" />
</declare-styleable>

方案一:TextView 流光

public class ShimmerTextView extends AppCompatTextView {

    //渲染器
    private LinearGradient mLinearGradient;
    //渲染范围
    private Matrix mGradientMatrix;
    //渲染的起始位置
    private int mViewWidth = 0;
    //渲染的终止距离
    private int mTranslate = 0;
    //是否启动动画
    private boolean mAnimating = true;
    //多少毫秒刷新一次
    private int speed = 50;
    private Paint mPaint;
    //文字颜色
    private int textColor;
    //流光颜色
    private int shimmerColor;

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

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

    public ShimmerTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShimmerTextView);
        try {
            textColor = a.getColor(R.styleable.ShimmerTextView_stv_text_color, ContextCompat.getColor(context, R.color.custom_color_909599));
            shimmerColor = a.getColor(R.styleable.ShimmerTextView_stv_shimmer_color, ContextCompat.getColor(context, R.color.custom_color_909599));
        } finally {
            a.recycle();
        }
        mPaint = getPaint();
        mGradientMatrix = new Matrix();
    }

    /**
     * 设置开启获取关闭
     *
     * @param isShimmer
     */
    public void setShimmer(boolean isShimmer) {
        this.mAnimating = isShimmer;
    }


    @SuppressLint("DrawAllocation")
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mViewWidth = getMeasuredWidth();
    }

    public void initLinearGradient() {
        mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0, new int[]{textColor, shimmerColor, textColor}, null, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mAnimating) {
            if (mGradientMatrix != null && mLinearGradient != null) {
                mTranslate += mViewWidth / 10;//每次移动屏幕的1/10宽
                if (mTranslate > 2 * mViewWidth) {
                    mTranslate = -mViewWidth;
                }
                mGradientMatrix.setTranslate(mTranslate, 0);
                mLinearGradient.setLocalMatrix(mGradientMatrix);//在指定矩阵上渲染
            } else {
                initLinearGradient();
            }
            postInvalidateDelayed(speed);
        }
    }

}

 

方案二:流光View

/**
  通过设置 visibility 来开启和关闭流光效果
*/
public class ShimmerView extends View {
    private Shader mGradient;
    private Matrix mGradientMatrix;
    private Paint mPaint;
    private int mViewWidth = 0, mViewHeight = 0;
    private float mTranslateX = 0, mTranslateY = 0;
    private Rect rect;
    private int textColor;
    private int shimmerColor; //需要设置AD透明度效果


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

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

    public ShimmerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShimmerTextView);
        try {
            textColor = a.getColor(R.styleable.ShimmerTextView_stv_text_color, ContextCompat.getColor(context, R.color.custom_color_909599));
            shimmerColor = a.getColor(R.styleable.ShimmerTextView_stv_shimmer_color, ContextCompat.getColor(context, R.color.custom_color_909599));
        } finally {
            a.recycle();
        }
        rect = new Rect();
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        rect.set(0, 0, getWidth(), getHeight());
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mViewWidth == 0) {
            mViewWidth = getWidth();
            mViewHeight = getHeight();
            if (mViewWidth > 0) {
                mGradient = new LinearGradient(0, 0, mViewWidth, 0, new int[]{textColor, shimmerColor, textColor}, null, Shader.TileMode.CLAMP);
                mPaint.setShader(mGradient);
                mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
                mGradientMatrix = new Matrix();
                mGradientMatrix.setTranslate(-2 * mViewWidth, mViewHeight);
                mGradient.setLocalMatrix(mGradientMatrix);
                rect.set(0, 0, w, h);
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(rect, mPaint);
        mTranslateX += mViewWidth / 10;//每次移动屏幕的1/10宽
        if (mTranslateX > 2 * mViewWidth) {
            mTranslateX = -mViewWidth;
        }
        //❷ 平移matrix, 设置平移量
        if (mGradientMatrix != null) {
            mGradientMatrix.setTranslate(mTranslateX, 0);
        }
        //❸ 设置线性变化的matrix
        if (mGradient != null) {
            mGradient.setLocalMatrix(mGradientMatrix);
        }
        postInvalidateDelayed(50);
    }

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值