Android --- 跑马灯效果

1、基于开发者文档的官方说明

跑马灯效果主要使用的控件为TextView,其中涉及的几个标签如下所示:

android:ellipsize
If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle. You will often also want to set scrollHorizontally or singleLine as well so that the text as a whole is also constrained to a single line instead of still allowed to be broken onto multiple lines.
(如果设置,则会导致比视图长的单词被省略,而不是在在中间被打断。您通常还需要设置scrollHorizontal或singleLine,以便文本作为一个整体也被限制为单行,而不是仍然被允许拆分为多行。)
在这里插入图片描述

java代码中对应的方法:setEllipsize(TextUtils.TruncateAt)

    /**
     * Causes words in the text that are longer than the view's width
     * to be ellipsized instead of broken in the middle.  You may also
     * want to {@link #setSingleLine} or {@link #setHorizontallyScrolling}
     * to constrain the text to a single line.  Use <code>null</code>
     * to turn off ellipsizing.
     */
    public void setEllipsize(TextUtils.TruncateAt where) {
    
    
        // TruncateAt is an enum. != comparison is ok between these singleton objects.
        if (mEllipsize != where) {
    
    
            mEllipsize = where;

            if (mLayout != null) {
    
    
                nullLayouts();
                requestLayout();
                invalidate();
            }
        }
    }
    //TruncateAt包含的属性值
    public enum TruncateAt {
    
    
        START,
        MIDDLE,
        END,
        MARQUEE,
        /**
         * @hide
         */
        @UnsupportedAppUsage
        END_SMALL
    }

android:focusableInTouchMode:布尔值,用于控制视图在触摸模式下是否可以对焦
android:singleLine:将文本限制为单个水平滚动行(当前已弃用,推荐使用maxLines)
android:clickable:定义此视图是否对单击事件做出反应

2、xml文件的方式

	<!--纯xml文件,需要点击后才能开始跑马灯的效果-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/horse_race_lamp_value"
        android:textColor="@color/teal_700"
        android:ellipsize="marquee"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:clickable="true"
        android:textSize="30sp"/>

3、xml文件+代码控制

    <!--使用xml文件+代码控制-->
    <TextView
        android:id="@+id/tv_horse_lamp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/horse_race_lamp_value"
        android:singleLine="true"
        android:textSize="30sp"
        android:textColor="@color/purple_200"/>
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horse_race_lamp);
        //通过代码控制,获取控件,添加
        mHorseLampTv = findViewById(R.id.tv_horse_lamp);
        mHorseLampTv.setEllipsize(TextUtils.TruncateAt.MARQUEE);
        mHorseLampTv.setSelected(true);
    }
//针对setSelected的源码解释,可以看到此方法中针对Ellipsize属性判断是否为MARQUEE(走马灯的条件之一)
    @Override
    public void setSelected(boolean selected) {
    
    
        boolean wasSelected = isSelected();

        super.setSelected(selected);

        if (selected != wasSelected && mEllipsize == TextUtils.TruncateAt.MARQUEE) {
    
    
            if (selected) {
    
    
                startMarquee();
            } else {
    
    
                stopMarquee();
            }
        }
    }

4、xml文件+自定义TextView控件

package com.example.clientapplication;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

//自定义控件
public class MyHorseRaceLampView extends androidx.appcompat.widget.AppCompatTextView {
    
    
    public MyHorseRaceLampView(@NonNull Context context) {
    
    
        super(context);
    }

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

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

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

    <!--使用自定义控件-->
    <com.example.clientapplication.MyHorseRaceLampView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/horse_race_lamp_value"
        android:textColor="@color/cardview_dark_background"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:textSize="30sp"/>

5、全部代码

  • activity_horse_race_lamp.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".HorseRaceLampActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="走马灯效果"
        android:gravity="center"
        android:textSize="40sp"/>
<!--纯xml文件-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/horse_race_lamp_value"
        android:textColor="@color/teal_700"
        android:ellipsize="marquee"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:clickable="true"
        android:textSize="30sp"/>
    <TextView
        android:id="@+id/tv_horse_lamp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/horse_race_lamp_value"
        android:singleLine="true"
        android:textSize="30sp"
        android:textColor="@color/purple_200"/>

    <!--使用自定义控件-->
    <com.example.clientapplication.MyHorseRaceLampView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/horse_race_lamp_value"
        android:textColor="@color/cardview_dark_background"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:textSize="30sp"/>
</LinearLayout>
  • HorseRaceLampActivity
package com.example.clientapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.TextView;

public class HorseRaceLampActivity extends AppCompatActivity {
    
    

    private TextView mHorseLampTv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horse_race_lamp);
        //通过代码控制
        mHorseLampTv = findViewById(R.id.tv_horse_lamp);
        mHorseLampTv.setEllipsize(TextUtils.TruncateAt.MARQUEE);
        mHorseLampTv.setSelected(true);
    }
}
  • MyHorseRaceLampView
package com.example.clientapplication;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class MyHorseRaceLampView extends androidx.appcompat.widget.AppCompatTextView {
    
    
    public MyHorseRaceLampView(@NonNull Context context) {
    
    
        super(context);
    }

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

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

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

6、效果展示

请添加图片描述

猜你喜欢

转载自blog.csdn.net/qq_43623013/article/details/128259740