美文网首页
自定义跑马灯字幕滚动

自定义跑马灯字幕滚动

作者: 雾中的影子 | 来源:发表于2017-10-20 17:33 被阅读0次

    当遇到一个通过横幅滚动文字来做公告通知的时候,一开始想着用TextView自带的效果
    android:ellipsize="marquee",但发现有很多限制条件并不能满足需求。网上查了一些资料,大致有三种实现方式:

    1. 用原生的TextView,想办法让它滚动起来
    2. 用页面滑动来实现,利用动画
    3. 自定义View,通过draw来实现。

    我在github也找了一些,但有的过于复杂,有的有很多bug,都不是很满意。所以干脆自己动手撸了一个简单好用的,最终选择上述第三种方式。

    国际惯例,先上效果图吧


    image

    通过继承AppCompatTextView,然后在ondraw方法里 去掉super.onDraw(),onDraw方法代码如下:

    @Override
    protected void onDraw(Canvas canvas) {
        if(TextUtils.isEmpty(mText)){
            return;
        }
    
        startX-=mSpeed;
        canvas.drawText(getText().toString(),startX,startY,mPaint);
        if(startX<-textWidth){
            startX = getMeasuredWidth();
        }
        if(!isStart || isStop){
            return;
        }
        invalidate();
    }
    

    自定义属性:

    <declare-styleable name="ScrollTextView">
        <attr name="scrollTextColor" format="color"/>
        <attr name="scrollSpeed">
            <enum name="slow" value="1"/>
            <enum name="normal" value="2"/>
            <enum name="fast" value="3"/>
        </attr>
    </declare-styleable>
    

    主要是通过不断改变字符串的绘制起点startX,反复调用onDraw进行绘制达到 字幕滚动的目的。

    每次改变的量通过mSpeed来控制,文字在竖直方向上的居中通过初始化计算drawText所需的 baseline参数

    private float getBaseLineY(){
        Paint.FontMetrics fm = mPaint.getFontMetrics();
        textHeight = fm.bottom - fm.top;
        return getMeasuredHeight()/2 + textHeight/2 - fm.bottom;
    }
    

    然后提供了一些变量来控制,开始,停止等状态:

    private boolean isStop = false;
    private boolean isStart = false;
    
    
    public void startScroll(){
        if(View.VISIBLE!=getVisibility()){
            setVisibility(View.VISIBLE);
        }
        isStart = true;
        isStop = false;
        invalidate();
    
    }
    
    public void pauseScroll(){
        isStop =  true;
    }
    
    public void stopScroll(){
        isStop =  true;
        startX = getMeasuredWidth();
        setVisibility(View.GONE);
    }
    

    暂停只是让滚动的文字停留在当前时刻的位置,而停止除此之外,还要重置startX的值,并且隐藏控件。

    还提供了一个方法,用于开启滚动一段时间后自动停止消失:

    public void startScrollTimer(long time){
        startScroll();
        postDelayed(new Runnable() {
            @Override
            public void run() {
                stopScroll();
            }
        },time);
    }
    

    完整代码及用法,可见github:

    https://github.com/xiongliangshan/scrolltext

    点击下载demo apk

    相关文章

      网友评论

          本文标题:自定义跑马灯字幕滚动

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