实现跑马灯效果的 TextView

2023-02-16 本文已影响0人笔头还没烂

说明：要想实现跑马灯效果的 TextView，主要是实现下面这5个属性：

（1）android:singleLine: 内容单行显示

（2）android:focusable: 是否可以获取焦点

（3）android:focusableInTouchMode: 用于控制视图在触摸模式下是否可以聚焦

（4）android:ellipsize: 在哪里省略文本

（5）android:marqueeRepeatLimit: 字幕动画重复的次数
准备工作：

（1）需要先准备一行较长的文本，内容自定义。

（2）设置 textView 的宽度跟它的父视图的宽度一致。

实现代码如下：

<TextView
        android:id="@+id/tv_one"
        android:text="@string/tv_one_text"
        android:textColor="@color/black"
        android:textStyle="normal"
        android:textSize="40sp"
        android:gravity="center"
        android:shadowColor="@color/red"
        android:shadowRadius="10.0"
        android:shadowDx="50.0"
        android:shadowDy="30.0"
        android:singleLine="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:layout_width="match_parent"
        android:layout_height="200dp"></TextView>

· singleLine 决定 TextView 的内容以一行的方式显示

· ellipsize: 设置 textView 在哪里省略文本，这里有几个选项，如下所示：

//默认是 end，在文本的结尾处显示省略号。但是要想实现跑马灯的效果，这里需要选择 marquee.
<attr name="ellipsize">
        <enum name="none" value="0" />
        <enum name="start" value="1" />
        <enum name="middle" value="2" />
        <enum name="end" value="3" />
        <enum name="marquee" value="4" />
    </attr>

· marqueeRepeatLimit：选择跑马灯重复的次数，这里选择 marquee_forever

· focusable、focusableInTouchMode 设置 textView 是否可以获取焦点

但是我们发现，这样设置之后，代码跑起来还是看不到跑马灯的效果。原因是 textView 获取不到焦点。这里有几种解决方式：

方法一：我们可以再加一个 clickable 属性，代码如下所示：

<TextView
        android:id="@+id/tv_one"
        android:text="@string/tv_one_text"
        android:textColor="@color/black"
        android:textStyle="normal"
        android:textSize="40sp"
        android:gravity="center"
        android:shadowColor="@color/red"
        android:shadowRadius="10.0"
        android:shadowDx="50.0"
        android:shadowDy="30.0"
        android:singleLine="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:ellipsize="marquee"
        android:clickable="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:layout_width="match_parent"
        android:layout_height="200dp"></TextView>

方法二：自定义一个 TextView。

（1）新建一个自定义类，类名为 MyTextView，并重写它的 isFocused() 方法。代码如下所示：

package com.example.myapplication;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;
import androidx.annotation.Nullable;
public class MyTextView extends TextView {
    public MyTextView(Context context) {
        super(context);
    }

    public MyTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

（2）在 activity_main.xml 中将原有的 TextView 替换成自己自定义的 MyTextView 类，代码如下所示：

<com.example.myapplication.MyTextView
        android:id="@+id/tv_one"
        android:text="@string/tv_one_text"
        android:textColor="@color/black"
        android:textStyle="normal"
        android:textSize="40sp"
        android:gravity="center"
        android:shadowColor="@color/red"
        android:shadowRadius="10.0"
        android:shadowDx="50.0"
        android:shadowDy="30.0"
        android:singleLine="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:ellipsize="marquee"
        android:clickable="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:layout_width="match_parent"
        android:layout_height="200dp"></com.example.myapplication.MyTextView>

（3）至此，我们重新运行代码。可以看到，代码一运行，跑马灯就自动跑起来了。

方法三：还是用回原来的 TextView，在 TextView 的代码中加入 <requestFocus />，代码如下：

<TextView
        android:id="@+id/tv_one"
        android:text="@string/tv_one_text"
        android:textColor="@color/black"
        android:textStyle="normal"
        android:textSize="40sp"
        android:gravity="center"
        android:shadowColor="@color/red"
        android:shadowRadius="10.0"
        android:shadowDx="50.0"
        android:shadowDy="30.0"
        android:singleLine="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:ellipsize="marquee"
        android:clickable="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <requestFocus />
    </TextView>

这样，代码跑起来同样也会有跑马灯的效果。

以上，感谢阅读！

实现跑马灯效果的 TextView

猜你喜欢

热点阅读