Android实现跑马灯效果

实现方式1

    <TextView
        android:id="@+id/tvTip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFDE9EB"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:paddingLeft="10dp"
        android:paddingTop="12dp"
        android:paddingRight="10dp"
        android:paddingBottom="12dp"
        android:scrollHorizontally="true"
        android:singleLine="true"
        android:text="物流公告:受疫情影响,2020-08-20起,深圳地区暂时不支持发货"
        android:textColor="#FFEB2C3E"
        android:textSize="15sp">

    </TextView>

    //设置跑马灯效果,避免跑马灯效果失效
    private void setMarqueeText() {
        mTvTip.setEllipsize(TextUtils.TruncateAt.MARQUEE);
        mTvTip.setSingleLine(true);
        mTvTip.setSelected(true);
        mTvTip.setFocusable(true);
        mTvTip.setFocusableInTouchMode(true);
    }

跑马灯相关属性

android:singleLine="true"  //设置单行
android:scrollHorizontally="true"
android:ellipsize="marquee"  //跑马灯
android:focusable="true"  //获得焦点
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"  //无限循环

实现方式2:自定义跑马灯类

上面方式1能暂时实现跑马灯效果,但在多次点击事件之后容易失焦。而且在Android4.4上实现有短暂停顿。

MarqueeTextView

public class MarqueeTextView extends AppCompatTextView {

    /**
     * 滚动次数
     */
    private int marqueeNum = -1;//-1为永久循环,大于0是循环次数。

    public void setMarqueeNum(int marqueeNum) {
        this.marqueeNum = marqueeNum;
    }

    public MarqueeTextView(Context context) {
        super(context);
        setAttr();
    }

    public MarqueeTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setAttr();
    }

    public MarqueeTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setAttr();
    }

    /**
     * 始终获取焦点
     * 跑马灯在TextView处于焦点状态的时候才会滚动
     */
    @Override
    public boolean isFocused() {
        return true;
    }

    /**
     * 设置相关属性
     */
    private void setAttr() {
        this.setEllipsize(TextUtils.TruncateAt.MARQUEE);//设置跑马等效果
        this.setMarqueeRepeatLimit(marqueeNum);//设置跑马灯重复次数
        this.setSingleLine(true);//设置单行
    }
}
    <com.zly.demo10.MarqueeTextView2
        android:id="@+id/tv_person_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="#FFFDE9EB"
        android:paddingLeft="10dp"
        android:paddingTop="12dp"
        android:paddingRight="10dp"
        android:paddingBottom="12dp"
        android:text="物流公告:受疫情影响,2020-08-20起,深圳地区暂时不支持发货"
        android:textColor="#FFEB2C3E"
        android:textSize="15sp" />

实现方式3:自定义跑马灯类(自定义绘制控件)

MarqueeTextView

/**
 * 自定义跑马灯
 */

public class MarqueeTextView extends View {
    /**
     * 界面刷新时间(ms)
     */
    public static final int INVALIDATE_TIME = 12;
    /**
     * 每次移动的像素点(px)
     */
    public static final int INVALIDATE_STEP = 2;
    /**
     * 是否第一次
     */
    //private boolean isfirstCycle = true;

    private String drawingText;
    private TextPaint paint;
    public boolean exitFlag;
    private float textWidth;
    private int posX = 0;
    private float posY;
    private int width;
    private RectF rf;
    private boolean hasInit;

    private Handler mHandler = new Handler();

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

    public MarqueeTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MarqueeTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView(context, attrs, defStyle);
    }

    private void initView(Context context, AttributeSet attrs, int defStyle) {
        paint = new TextPaint();
        rf = new RectF(0, 0, 0, 0);
        paint.setAntiAlias(true);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MarqueeTextView);
        setTextSize(typedArray.getDimension(R.styleable.MarqueeTextView_mtvtextsize, 30f));
        setTextColor(typedArray.getColor(R.styleable.MarqueeTextView_mtvtextcolor, Color.WHITE));
        setText(typedArray.getString(R.styleable.MarqueeTextView_mtvtext));

    }

    public void setText(String text) {
        this.drawingText = text;
        posX = 0;
    }

    public void setTextSize(float dp) {
        if (this.paint == null)
            return;
        this.paint.setTextSize(dp);
    }

    public void setTextColor(int color) {
        if (this.paint == null)
            return;
        this.paint.setColor(color);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        width = MeasureSpec.getSize(widthMeasureSpec);

        if (drawingText != null) {
            textWidth = paint.measureText(drawingText, 0, drawingText.length());
        }
        if (posX == 0 && !hasInit) {
            rf.right = 0;
            rf.bottom = MeasureSpec.getSize(heightMeasureSpec);
            posX = 0;
            posY = getTextDrawingBaseline(paint, rf);
            hasInit = true;
        }
        setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        if (getVisibility() != View.VISIBLE || TextUtils.isEmpty(drawingText)) {
            return;
        }
        canvas.save();
        canvas.drawText(drawingText, 0, drawingText.length(), posX, posY, paint);
        canvas.restore();
    }

    private Runnable moveRun = new Runnable() {

        @Override
        public void run() {
            //控制文本宽度大于控件宽度才进行滚动
            if (width >= textWidth) {
                posX = 0;
                invalidate();
                return;
            }
            //左移
            posX -= INVALIDATE_STEP;
            //当文字和空格完全移出屏幕,x值从1开始移动
            if (posX < -1 * textWidth - paint.measureText("", 0, "".length())) {
                posX = getWidth();
            }
            invalidate();
            if (!exitFlag) {
                mHandler.postDelayed(this, INVALIDATE_TIME);
                return;
            }
            posX = 0;

        }
    };

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stopMove();
    }

    @Override
    protected void onWindowVisibilityChanged(int visibility) {
        super.onWindowVisibilityChanged(visibility);
        if (visibility == View.VISIBLE) {
            startMove();
        } else {
            stopMove();
        }
    }

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        if (hasWindowFocus) {
            startMove();
        } else {
            stopMove();
        }

    }


    private void stopMove() {
        exitFlag = true;
        if (mHandler == null)
            return;
        mHandler.removeCallbacksAndMessages(null);
    }

    public void startMove() {
        exitFlag = false;
        if (mHandler == null)
            return;
        mHandler.removeCallbacksAndMessages(null);
        mHandler.postDelayed(moveRun, 0);
    }

    public void startMove(long delay) {
        exitFlag = false;
        if (mHandler == null)
            return;
        mHandler.removeCallbacksAndMessages(null);
        mHandler.postDelayed(moveRun, delay);
    }

    /**
     * 获取绘制文字的baseline
     *
     * @param paint
     * @param targetRect
     * @return
     */
    public static float getTextDrawingBaseline(Paint paint, RectF targetRect) {
        if (paint == null || targetRect == null) {
            return 0;
        }
        Paint.FontMetrics fontMetric = paint.getFontMetrics();
        return targetRect.top + (targetRect.height() - fontMetric.bottom + fontMetric.top) / 2.0f - fontMetric.top;
    }
}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MarqueeTextView">
        <attr name="mtvtextsize" format="dimension"/>
        <attr name="mtvtextcolor" format="color"/>
        <attr name="mtvtext" format="string"/>
    </declare-styleable>
</resources>

使用

    <com.zly.demo10.MarqueeTextView
        android:id="@+id/tvTip3"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="16dp"
        android:background="#FFFDE9EB"
        app:mtvtext="物流公告:受疫情影响,2020-08-20起,深圳地区暂时不支持发货"
        app:mtvtextcolor="#FFEB2C3E"
        app:mtvtextsize="15sp"
        tools:text="物流公告:受疫情影响,2020-08-20起,深圳地区暂时不支持发货" />
        mTvTip3.setText("仓为品牌特卖仓储中心,库存较少,请尽a电视剧花短时间撒分散打发第三方大师傅大师傅奥德赛飞a");
        mTvTip3.setTextColor(Color.BLACK);
        mTvTip3.startMove(1000);

第三方跑马灯库

MarqueeView:可垂直跑、可水平跑的跑马灯。

MarqueeViewLibrary:一个很方便使用和扩展的跑马灯Library,通过提供不同的MarqueeFactory来定制不同的跑马灯View, 并且提供了常用类型的跑马灯效果:SimpleMarqueeView。

第三方跑马灯库MarqueeView的使用

 implementation 'com.sunfusheng:MarqueeView:1.4.1'
image.png

XML

<com.sunfusheng.marqueeview.MarqueeView
    android:id="@+id/marqueeView"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    app:mvAnimDuration="1000"
    app:mvDirection="bottom_to_top"
    app:mvInterval="3000"
    app:mvTextColor="@color/white"
    app:mvTextSize="14sp"
    app:mvSingleLine="true"
    app:mvFont="@font/huawenxinwei"/>

设置字符串列表数据,或者设置自定义的Model数据类型

MarqueeView marqueeView = (MarqueeView) findViewById(R.id.marqueeView);

List<String> messages = new ArrayList<>();
messages.add("1. 大家好,我是孙福生。");
messages.add("2. 欢迎大家关注我哦!");
messages.add("3. GitHub帐号:sunfusheng");
messages.add("4. 新浪微博:孙福生微博");
messages.add("5. 个人博客:sunfusheng.com");
messages.add("6. 微信公众号:孙福生");
marqueeView.startWithList(messages);

// 或者设置自定义的Model数据类型
public class CustomModel implements IMarqueeItem {
    @Override
    public CharSequence marqueeMessage() {
        return "...";
    }
}

List<CustomModel> messages = new ArrayList<>();
marqueeView.startWithList(messages);

// 在代码里设置自己的动画
marqueeView.startWithList(messages, R.anim.anim_bottom_in, R.anim.anim_top_out);

设置字符串数据

String message = "心中有阳光,脚底有力量!心中有阳光,脚底有力量!心中有阳光,脚底有力量!";
marqueeView.startWithText(message);

// 在代码里设置自己的动画
marqueeView.startWithText(message, R.anim.anim_bottom_in, R.anim.anim_top_out);

设置事件监听

marqueeView.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
    @Override
    public void onItemClick(int position, TextView textView) {
        Toast.makeText(getApplicationContext(), String.valueOf(marqueeView1.getPosition()) + ". " + textView.getText(), Toast.LENGTH_SHORT).show();
    }
});

在 Activity 或 Fragment 中

@Override
public void onStart() {
    super.onStart();
    marqueeView.startFlipping();
}

@Override
public void onStop() {
    super.onStop();
    marqueeView.stopFlipping();
}

在 ListView 或 RecyclerView 的 Adapter 中

@Override
public void onViewDetachedFromWindow(@NonNull ViewHolder holder) {
    super.onViewDetachedFromWindow(holder);
    holder.marqueeView.stopFlipping();
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,417评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,921评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,850评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,945评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,069评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,188评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,239评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,994评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,409评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,735评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,898评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,578评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,205评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,916评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,156评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,722评论 2 363
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,781评论 2 351

推荐阅读更多精彩内容