美文网首页自定义控件
使用LinearGradient实现文字轮播

使用LinearGradient实现文字轮播

作者: NoBugException | 来源:发表于2019-03-17 17:31 被阅读16次

    使用线性渲染(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

    相关文章

      网友评论

        本文标题:使用LinearGradient实现文字轮播

        本文链接:https://www.haomeiwen.com/subject/dkwumqtx.html