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

最近项目里要实现一个公告条功能,需要用到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);

    }

上效果
这里写图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文字走马灯</title> <style type="text/css"> *{ margin: 0; padding: 0; font-size:12px; } body{ background-color: #2C1914; font-family:"宋体"; } .abs{ position:absolute; } .rel{ position:relative; } .wrap{ min-height:1000px; } .main{ height:718px; } .con980{ width:980px; margin:0 auto; } .header{ width:100%; height:50px; } .play{ background:url() no-repeat; width:980px; height:625px; padding:22px 0 0 21px; } td{ width:187px; height:115px; font-family:"微软雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px; } .playcurr{ background-color:#F60; color: #FFFFFF; } .playnormal{ background-color:#666; } .play_btn{ width:480px; height:115px; display:block; background-color:#F60; border:0; cursor:pointer; font-family:"微软雅黑"; font-size:40px;} .play_btn:hover{ color:#fff; } .btn_arr{ left:255px; top:255px; } </style> </head> <body> <div class="wrap"> <div class="header"></div> <div class="main"> <div class="con980"> <div class="play rel"> <p class="btn_arr abs"><input value="开始" id="btn1" type="button" class="play_btn" ></p> <table class="playtab" id="tb" cellpadding="0" cellspacing="1"> <tr> <td>春</td><td>眠</td><td>不</td><td>觉</td><td>晓</td> </tr> <tr> <td>花</td><td></td><td></td><td></td><td>处</td> </tr> <tr> <td>声</td><td></td><td></td><td></td><td>处</td> </tr> <tr> <td>雨</td><td></td><td></td><td></td><td>闻</td> </tr> <tr> <td>风</td><td>来</td><td>夜</td><td>鸟</td><td>啼</td> </tr> </table> </div> </div> </div> </div> [removed] /*思路:获取坐标--数组arr 运行轨迹--获取最外圈数组 runArr 高亮显示--根据runArr的下标来更换背景色和字体颜色 速度变化--改变定时器的执行频率 setTimeIterver(function(),time) 停止点--获取随机数付给runArr,并清除定时器 加速减速 转动圈数:计数器 */ /*定义二维数组 为了易于维护修改,长宽设为参数m,n*/ function getSide(m,n){ var arr=[m];//先声明m长度的一维 for(var i=0;i<m;i++){ arr[i]=[n];//声明n长度的二维 for(var j=0;j<n;j++){ arr[i][j]=i*n+j; //给数组元素赋值 } } //检测二维数组 // for(var i=0;i<arr.length;i++){ // [removed]("第"+i+"行: "+arr[i]+"<br/>"); // } /*获取运动轨迹 -- 最外圈的数组*/ var runArr=[]; var tempX=0, //定义坐标 tempY=0, direction="straight", count=0; while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n){//循环条件 tempX tempY在 n和m的长度范围内 count++; runArr.push([tempY,tempX]); if(direction=="straight"){//亮块直行的规律 if(tempX==n-1){ tempY++; } else{ tempX++; } if(tempX==n-1&&tempY;==m-1){//亮块处于拐点 direction="turn"; //改变条件 执行下面代码 } } else{ if(tempX==0){//亮块直行的规律 tempY--; } else{ tempX--; } if(tempX==0 && tempY==0){ break; } } } return runArr; } var stopNum,//停止数 index=0,//当前亮区位置 prevIndex, //前一位置 speed=300,//初始速度 timer,//定时器对象 downIndex=0, //决定在哪一格变慢 cycle=0, //转动圈数 EndCycle=0, //设置转几圈后再减速 flag=false, //结束转动标志 为true时停止 speedUp=0; //加速 tb = document.getElementById("tb"), //获取tb对象 btn = document.getElementById("btn1"),//获取按钮对象 runArr=[]; runArr=getSide(5,5);//初始化数组 /* for(var i=0;i<runArr.length;i++){ [removed](runArr[i]+"<br/>"); }*/ //定义启动函数 function start(){ btn.disabled = true; stopNum = Math.floor(Math.random() * 16);//点击产生随机数,最后将停在次数上 downIndex=Math.floor(Math.random() * 16); EndCycle=1; clearInterval(timer); cycle=0; flag=false;//结束转动标志 timer=setInterval(run,speed);//启动定时器 } //运行函数 function run(){ change();//背景变化函数 //跑马灯加速 if(flag==false){ if(speedUp==5){ //走5格后加速 clearInterval(timer); //先清除定时器,再改变速度 speed=50; timer=setInterval(run,speed); } } //跑N圈后减速 if(cycle==EndCycle+1 && index==downIndex){ clearInterval(timer); speed=300; flag=true; //触发结束 timer=setInterval(run,speed);//减速 } //计算转了几圈 if(index>=runArr.length){ index=0; cycle++; } //停止并选中号码 if(flag==true && index==stopNum){ speedUp=0; clearInterval(timer); btn.disabled = false; } } //单元格背景变亮 function change(){ tb.rows[runArr[index][0]].cells[runArr[index][1]].className="playcurr"; //给当前单元格添加样式,换高亮的背景色; if(index>0){ prevIndex=index-1;//前一位置 } else{ prevIndex=runArr.length-1; } tb.rows[runArr[prevIndex][0]].cells[runArr[prevIndex][1]].className="playnormal";//光标走过后恢复背景色; index++; speedUp++; } [removed] </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值