美文网首页
两行代码完美解决TextView跑马灯效果

两行代码完美解决TextView跑马灯效果

作者: _非_阳_ | 来源:发表于2019-03-29 14:14 被阅读0次

    这篇是从本人的CSDN上搬运过来的 https://blog.csdn.net/RunningShadow_007
    以后准备在简书上做技术摘录了,能帮到别跟更好,帮不到就当是做个记录吧!

    最近项目里要实现一个公告条功能,需要用到TextView的跑马灯效果!

       <!--公告-->
        <TextView
            android:id="@+id/tvAnnouncement"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:textColor="#333333"
            android:singleLine="true"
            android:ellipsize="marquee"
            android:textSize="14sp"
            tools:text="司机APP版本更新1.0"/>
    

    按照上面的设置了singleLine=true 和ellipsize="marquee"但是,完全没效果!!!
    网上有说是因为TextView没有获取焦点导致的.
    于是乎我重写了TextVIew的isFocusd()方法,强制让其返回true,跑马灯效果出来了,但是我的测试机是红米Note2,新的问题出现了.文字虽然滚动了,但是文字的结尾是省略号...,也就是说即使文字滚动了,仍然看不到全部内容....


    撸起袖子,查看一下TextView的源码.

    TextVIew在构造函数中获取ellipsize属性值

          case com.android.internal.R.styleable.TextView_ellipsize:
                    ellipsize = a.getInt(attr, ellipsize);
                    break;
    

    然后根据ellipsize属性值,来设置TextView的ellipsize模式

    
    
            switch (ellipsize) {
                case 1:
                    setEllipsize(TextUtils.TruncateAt.START);
                    break;
                case 2:
                    setEllipsize(TextUtils.TruncateAt.MIDDLE);
                    break;
                case 3:
                    setEllipsize(TextUtils.TruncateAt.END);
                    break;
                case 4:
                    // 当我们在xml中设置ellipsize="marquee"时,便会走到这里
                    // 部分机型ViewConfiguration.get(context).isFadingMarqueeEnabled()==false,所以导致文字虽然滚动了,但是仍然末尾有省略号...
                    if (ViewConfiguration.get(context).isFadingMarqueeEnabled()) {
                        setHorizontalFadingEdgeEnabled(true);
                        mMarqueeFadeMode = MARQUEE_FADE_NORMAL;
                    } else {
                        setHorizontalFadingEdgeEnabled(false);
                        mMarqueeFadeMode = MARQUEE_FADE_SWITCH_SHOW_ELLIPSIS;
                    }
                    setEllipsize(TextUtils.TruncateAt.MARQUEE);
                    break;
            }
    
      private void startMarquee() {
            // Do not ellipsize EditText
            if (getKeyListener() != null) return;
    
            if (compressText(getWidth() - getCompoundPaddingLeft() - getCompoundPaddingRight())) {
                return;
            }
    //可以看到,如果想要跑马灯效果起作用,  if ((mMarquee == null || mMarquee.isStopped()) && (isFocused() || isSelected()) && getLineCount() == 1 && canMarquee())   >,需要很多满足这么多条件!
            if ((mMarquee == null || mMarquee.isStopped()) && (isFocused() || isSelected()) &&
                    getLineCount() == 1 && canMarquee()) {
    
                if (mMarqueeFadeMode == MARQUEE_FADE_SWITCH_SHOW_ELLIPSIS) {
                    mMarqueeFadeMode = MARQUEE_FADE_SWITCH_SHOW_FADE;
                    final Layout tmp = mLayout;
                    mLayout = mSavedMarqueeModeLayout;
                    mSavedMarqueeModeLayout = tmp;
                    setHorizontalFadingEdgeEnabled(true);
                    requestLayout();
                    invalidate();
                }
    
                if (mMarquee == null) mMarquee = new Marquee(this);
                mMarquee.start(mMarqueeRepeatLimit);
            }
        }
    

    由于singleLine属性已经deprecated,于是有人设置了maxLines=1,跑马灯不起效,这里必须设置singleLine=true

    源码也看了,下面开始解决问题.

    有两种方式解决跑马灯问题

    方法一 重写TextView 简单粗暴的满足TextView可以跑马灯动起来的所有条件isFocused返回true singleLine 且 setEllipsize(TruncateAt.MARQUEE);

    package com.sprucetec.driver.ui.widget;
    
    import android.content.Context;
    import android.text.TextUtils.TruncateAt;
    import android.util.AttributeSet;
    
    /**
     * Copyright:meixiansong-driver-android
     * Author: liyang <br>
     * Date:2018/4/2 下午2:50<br>
     * Desc: <br>
     */
    
    public class MarqueeTextView extends android.support.v7.widget.AppCompatTextView {
    
        public MarqueeTextView(Context context) {
            super(context);
            initView();
        }
    
        private void initView() {
            setSingleLine();
            setEllipsize(TruncateAt.MARQUEE);
        }
    
        public MarqueeTextView(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
    
        public MarqueeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initView();
        }
    
    
        @Override
        public boolean isFocused() {
            return true;
        }
    }
    
    

    然后再布局中引用即可

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--公告-->
        <com.sprucetec.driver.ui.widget.MarqueeTextView
            android:id="@+id/tvAnnouncement"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:textColor="#333333"
            android:textSize="14sp"
            tools:text="司机APP版本更新1.0"/>
    </LinearLayout>
    

    方法二 无需重写TextView

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--公告-->
        <TextView
            android:id="@+id/tvAnnouncement"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:textColor="#333333"
            android:singleLine="true"
            android:ellipsize="marquee"
            android:textSize="14sp"
            tools:text="司机APP版本更新1.0"/>
    </LinearLayout>
    

    代码中

           /**
         * 获取公告列表信息
         */
        private void getAnnouncementList() {
    
            announcement.add("3老吾老以及人之老,幼吾幼以及人之幼.Time is over");
            announcement.add("nihaos");
            announcement.add("dajiahao ");
            CommonAdapter<String> adapter = new CommonAdapter<String>(mActivity, announcement,
                R.layout.item_announcement) {
                @Override
                protected void fillData(ViewHolder holder, int position) {
                    String announceTxt = (String) getItem(position);
                    //  跑马灯起作用需要满足mMarquee == null || mMarquee.isStopped()) && (isFocused() || isSelected()) && getLineCount() == 1 && canMarquee()
                    //通过反射强制让ViewConfiguration.get(mActivity).isFadingMarqueeEnabled()返回true,
                    //且通过 tvAnnouncement.setSelected(true);  我们就无需关心TextView是否获取焦点问题了,因为(isFocused() || isSelected())只要isFocused和isSelected满足其一就返回了true
                    Class viewConfiguration = ViewConfiguration.get(mActivity).getClass();
                    for (Field field : viewConfiguration.getDeclaredFields()) {
                        if (field.getName().equalsIgnoreCase("mFadingMarqueeEnabled")){
                            field.setAccessible(true);
                            try {
                                field.setBoolean(ViewConfiguration.get(mActivity),true);
                            } catch (IllegalAccessException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                    TextView  tvAnnouncement = holder.getView(R.id.tvAnnouncement);
                    tvAnnouncement.setText(announceTxt);
                    tvAnnouncement.setSelected(true);
                }
            };
    
            viewFlipper.setAdapter(adapter);
            viewFlipper.setInAnimation(mActivity, R.animator.slidefade_in_from_bottom);
            viewFlipper.setOutAnimation(mActivity, R.animator.slidefade_out_to_top);
    
        }
    

    上效果


    20180402171513182.gif

    相关文章

      网友评论

          本文标题:两行代码完美解决TextView跑马灯效果

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