Android 自定義跑馬燈

前言

最近公司接到小需求–「可以滾動的提示」，其實就是跑馬燈。這讓我想到了大學時專業物聯網，當時學的單片機入門教程就是跑馬燈，很是親切。其實就是燈(或文字)按照某個方向循環滾動。

Android 原生的跑馬燈

其實，Android中的TextView自帶跑馬燈效果，只需要通過簡單的配置，就可以完成滾動的效果。

在XML中進行配置

<TextView
    android:id="@+id/test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="我是跑馬燈，我是跑馬燈，我是跑馬燈，我是跑馬燈，我是跑馬燈，我是跑馬"
    android:textSize="28sp" />

可以看到需要很多的屬性配置，瞭解一下每個屬性的含義：

• android:ellipsize="marquee" 設置爲跑馬燈效果
• android:focusable="true" 獲取焦點
• android:focusableInTouchMode="true" touch 時獲取焦點
• android:marqueeRepeatLimit="marquee_forever" 設置重複次數
• android:scrollHorizontally="true" 設置爲水平滾動
• android:singleLine="true" 單行顯示

按照上面的配置，正常情況下是可以運轉的，但是用到項目中的時候，會發現很多bug和不足之處。

比如，偶爾突然不滾動了，具體的原因是沒有獲取到焦點。我覺得這是原生跑馬燈最坑的一點，必須獲取到焦點才能正常運行。

當然解決方式也有，第一種，通過主動獲取焦點的方式，即調用view.setFocusable(true)。還有一種就是重寫TextView的isFocused()方法，強制讓他獲取焦點。

@Override
public boolean isFocused() {
    return true;
}

就算這樣，在遇到複雜的界面還是會遇到問題，要麼焦點會被斷斷續續的被搶奪，導致卡頓，要麼不符合UI提出的滾動速度要求。

自定義跑馬燈

鑑於這個背景，通過Scroller完成自定義的跑馬燈，代碼已上傳至GitHub上:MarqueeTextView

先看一下整體的效果：

如果想直接使用，在根build.gradle配置：

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

在app下的build.gradle添加依賴

dependencies {
    compile 'com.github.xiaweizi:MarqueeTextView:1.0'
}

最後在XML直接使用即可：

   <com.xiaweizi.marquee.MarqueeTextView
        android:id="@+id/marquee1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="@string/string1"
        android:textColor="#ff0000"
        android:textSize="18sp"
        app:scroll_first_delay="0"
        app:scroll_interval="2000"
        app:scroll_mode="mode_forever" />

具有一下功能：

• 控制滾動時間
• 控制滾動延遲
• 控制滾動模式
• 生命週期可以自己控制
  
  • 暫停
  • 繼續
  • 重新開始
  • 停止

實現原理

通過Scroller控制器來控制整個View的滾動，那什麼是Scroller，做個簡單的介紹。

Scroller內部封裝了滾動的操作，通過構造函數中傳入插值器。可以控制起始位置和整個滾動的時間，並且通過computeScrollOffset()得到滾動動作是否結束。

最核心的方法有兩個：

1. startScroll

   /**
    * @param startX 水平方向滾動的偏移值，以像素爲單位。
    * @param startY 垂直方向滾動的偏移值，以像素爲單位
    * @param dx     水平方向滾動的距離
    * @param dy     垂直方向滾動的距離
    * @param duration 滾動持續的時間，以毫秒爲單位
    */
   public void startScroll (int startX, int startY, int dx, int dy, int duration) {
       ...
   } 
   

2. computeScrollOffset

   /**
    * @return 返回動畫是否結束
    */
   public boolean computeScrollOffset (){
       ...
   }
   

註釋已經很清楚了，那麼接下來講一下滾動的大概實現。

首先，要算出從初始位置開始滾動，到結束的距離，其實就是文字的長度。

/**
 * 計算滾動的距離
 * @return 滾動的距離
 */
private int calculateScrollingLen() {
    TextPaint tp = getPaint();
    Rect rect = new Rect();
    String strTxt = getText().toString();
    tp.getTextBounds(strTxt, 0, strTxt.length(), rect);
    return rect.width();
}

其次，調用startScroll方法進行滾動，注意的是需要調用invalidate方法，纔會有效果。

最後一個問題就是，滾動結束後繼續滾動。Scroller在滾動的時候，會不斷回調View的computeScroll方法，於是就可以在這個方法裏進行判斷，如果結束了，就重新開始。

到此一個簡單的跑馬燈效果就實現了，當然如果還想添加別的需要，只要搞懂其原理，這些都不是問題。