1. 程式人生 > >Android 使用TextView實現跑馬燈效果

Android 使用TextView實現跑馬燈效果

too pan 例如 use teset ble isf deb png

前言

我們在開發中經常會遇到一個小問題。比如下面一個小例子:

技術分享圖片

這個文字太長,單行中導致無法全部顯示出來,這就是今天要實現的功能。 當然,百度中也有很多這種解決方案。

其中有一種,例如:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:focusable="true"
android:focusableInTouchMode="true" android:text="@string/hello_world" />

android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"

xml中添加這3行 就能實現效果了。

技術分享圖片

這種方法確實可以實現。

事實上開發過程中,布局是非常復雜和多變的,並不是我們一個TextView就能解決所有的布局和要求。

例如,現在用兩個TextView

 1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:paddingBottom="@dimen/activity_vertical_margin" 6 android:paddingLeft
="@dimen/activity_horizontal_margin" 7 android:paddingRight="@dimen/activity_horizontal_margin" 8 android:paddingTop="@dimen/activity_vertical_margin" 9 tools:context=".MainActivity" > 10 11 <TextView 12 android:id="@+id/textview1" 13 android:layout_width="wrap_content" 14 android:layout_height="wrap_content" 15 android:ellipsize="marquee" 16 android:focusable="true" 17 android:focusableInTouchMode="true" 18 android:singleLine="true" 19 android:text="@string/hello_world" /> 20 21 <TextView 22 android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:layout_below="@id/textview1" 25 android:ellipsize="marquee" 26 android:layout_marginTop="20dp" 27 android:focusable="true" 28 android:focusableInTouchMode="true" 29 android:singleLine="true" 30 android:text="@string/hello_world" /> 31 32 </RelativeLayout>

這個簡單的功能就滿足不了了。

技術分享圖片

第一個跑馬燈效果沒問題,第二個就沒實現了,平常開發中,兩個TextView都解決不了,平常開發中更解決不了了。

這就是今天我所要講的內容。

首先,我們先建一個類,繼承TextView這個類。

 1 package com.example.marqueetextview;
 2 
 3 import android.content.Context;
 4 import android.util.AttributeSet;
 5 import android.view.ViewDebug.ExportedProperty;
 6 import android.widget.TextView;
 7 
 8 public class MarqueeText extends TextView{
 9 
10     public MarqueeText(Context context) {
11         super(context);
12     }
13 
14     public MarqueeText(Context context, AttributeSet attrs, int defStyle) {
15         super(context, attrs, defStyle);
16     }
17 
18     public MarqueeText(Context context, AttributeSet attrs) {
19         super(context, attrs);
20     }
21     @Override
22     @ExportedProperty(category = "focus")
23     public boolean isFocused() {
24         return true;
25     }
26 }

這個時候實現TextView中的一個方法,isFocused(), 返回改成return true。

然後進Xml中 把TextView修改成我們自定義的這個控件。

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context=".MainActivity" >
10 
11     <com.example.marqueetextview.MarqueeText
12         android:id="@+id/textview1"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:ellipsize="marquee"
16         android:focusable="true"
17         android:focusableInTouchMode="true"
18         android:singleLine="true"
19         android:text="@string/hello_world" />
20 
21     <com.example.marqueetextview.MarqueeText
22         android:layout_width="wrap_content"
23         android:layout_height="wrap_content"
24         android:layout_below="@id/textview1"
25         android:layout_marginTop="20dp"
26         android:ellipsize="marquee"
27         android:focusable="true"
28         android:focusableInTouchMode="true"
29         android:singleLine="true"
30         android:text="@string/hello_world" />
31 
32 </RelativeLayout>

然後我們再看一下效果。

技術分享圖片

已經全部實現成功了。

那這到底是為什麽呢? 奧秘就在我們重載的isFocused()這個函數. return true全部強制Focused.都有焦點了,就都能實現了

如果沒設置,焦點都第一個,第二個就無法實現。

這個是我寫的Demo:https://pan.baidu.com/s/1M1TghCh_R3kFnReM4li1VQ

Android 使用TextView實現跑馬燈效果