Android 使用TextView实现跑马灯效果

前言

我们在开发中经常会遇到一个小问题。比如下面一个小例子:

Android 使用TextView实现跑马灯效果

这个文字太长,单行中导致无法全部显示出来,这就是今天要实现的功能。 当然,百度中也有很多这种解决方案。

其中有一种,例如:

    <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行 就能实现效果了。

Android 使用TextView实现跑马灯效果

这种方法确实可以实现。

事实上开发过程中,布局是非常复杂和多变的,并不是我们一个TextView就能解决所有的布局和要求。

例如,现在用两个TextView

 <RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true"
android:text="@string/hello_world" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textview1"
android:ellipsize="marquee"
android:layout_marginTop="20dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true"
android:text="@string/hello_world" /> </RelativeLayout>

这个简单的功能就满足不了了。

Android 使用TextView实现跑马灯效果

第一个跑马灯效果没问题,第二个就没实现了,平常开发中,两个TextView都解决不了,平常开发中更解决不了了。

这就是今天我所要讲的内容。

首先,我们先建一个类,继承TextView这个类。

 package com.example.marqueetextview;

 import android.content.Context;
import android.util.AttributeSet;
import android.view.ViewDebug.ExportedProperty;
import android.widget.TextView; public class MarqueeText extends TextView{ public MarqueeText(Context context) {
super(context);
} public MarqueeText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
} public MarqueeText(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
@ExportedProperty(category = "focus")
public boolean isFocused() {
return true;
}
}

这个时候实现TextView中的一个方法,isFocused(), 返回改成return true。

然后进Xml中 把TextView修改成我们自定义的这个控件。

 <RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <com.example.marqueetextview.MarqueeText
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true"
android:text="@string/hello_world" /> <com.example.marqueetextview.MarqueeText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textview1"
android:layout_marginTop="20dp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true"
android:text="@string/hello_world" /> </RelativeLayout>

然后我们再看一下效果。

Android 使用TextView实现跑马灯效果

已经全部实现成功了。

那这到底是为什么呢? 奥秘就在我们重载的isFocused()这个函数. return true全部强制Focused.都有焦点了,就都能实现了

如果没设置,焦点都第一个,第二个就无法实现。

这个是我写的Demo:https://pan.baidu.com/s/1M1TghCh_R3kFnReM4li1VQ

上一篇:android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习


下一篇:TextView的跑马灯效果(AS开发实战第二章学习笔记)