Android实现文字滚动播放效果的示例代码
作者:Katie。
一、项目介绍
1. 背景与意义
在许多资讯类、新闻类以及企业展示类 Android 应用中,文字滚动播放(也称为跑马灯效果、公告栏效果)是非常常见的 UI 交互方式,用于持续不断地展示公告、新闻标题、提示信息等。在影视推荐 App、地铁公交查询、股市行情等场景中,文字滚动不仅能够节省屏幕空间,还能吸引用户注意力,使信息传递更具张力。本项目通过原生 Android 技术,从零开始实现一套高性能、高度可定制、支持多种滚动方向与动画曲线的文字滚动播放控件,满足各类复杂需求。
2. 功能需求
文字内容设定:可动态设置一段或多段文字;
滚动模式:支持水平、垂直两种滚动方向;
滚动方式:支持循环播放与单次播放,支持往返式和无缝衔接;
速度与间隔:可自定义滚动速度与两次滚动之间的停留间隔;
动画曲线:内置线性、加速、减速等插值器;
触摸交互:支持用户触摸滑动暂停与手动拖动;
资源释放:Activity/Fragment 销毁时正确释放动画与 Handler,防止内存泄露;
可定制样式:文字大小、颜色、字体、背景等可通过 XML 属性或代码动态配置;
高性能:在长列表、多实例场景下,保持平滑的 60FPS。
3. 技术选型
语言:Java
最低 SDK:API 21(Android 5.0)
核心组件:
TextView或自定义View属性动画(
ObjectAnimator)ValueAnimator+Canvas.drawText()(高级方案)Handler+Runnable(基础方案)Scroller/OverScroller(平滑滚动)
布局容器:通常使用
FrameLayout、RelativeLayout、ConstraintLayout承载自定义控件开发工具:Android Studio 最新稳定版
二、相关知识详解
1. Android 自定义 View 基础
onMeasure():测量控件宽高;
onSizeChanged():尺寸变化回调,初始化绘制区域;
onDraw(Canvas):绘制文字与背景;
自定义属性:通过
res/values/attrs.xml定义,可在 XML 中使用;硬件加速:确保动画平滑,必要时关闭硬件加速进行文字阴影绘制。
2. 属性动画与插值器
ObjectAnimator.ofFloat(view, "translationX", start, end);ValueAnimator.ofFloat(start, end),在addUpdateListener中更新位置;常用插值器:
LinearInterpolator、AccelerateInterpolator、DecelerateInterpolator、AccelerateDecelerateInterpolator;自定义插值器:实现
TimeInterpolator。
3. Handler 与 Runnable
适合循环式轻量调度;
postDelayed()控制滚动间隔;Activity / Fragment 销毁时要
removeCallbacks()防止内存泄漏。
4. Scroller / OverScroller
实现流畅的物理滚动效果;
scroller.startScroll()或fling();在
computeScroll()中,调用scroller.computeScrollOffset()并scrollTo(x, y);适用于需要手势拖动与惯性滚动的场景。
5. TextView 与 Canvas.drawText()
对于简单场景,可直接移动
TextView;对于更高性能与自定义效果,可在
View.onDraw()中canvas.drawText(),并通过canvas.translate()实现滚动。
三、项目实现思路
确定实现方案
方案一(基础):在布局中使用单个
TextView,通过ObjectAnimator或TranslateAnimation移动TextView的translationX/Y。方案二(自定义View):继承
View,在onDraw()中绘制文字并控制文字绘制位置偏移,实现更灵活的动画与样式控制。
基础流程
初始化:读取 XML 属性或通过 setter 获取文字内容、字体、颜色、速度等配置;
测量与布局:在
onMeasure()计算文字宽度/高度,确定 View 大小;启动动画:在
onAttachedToWindow()或startScroll()中,启动滚动动画;滚动控制:使用
ValueAnimator或ObjectAnimator不断更新文字的偏移量;循环与间隔:监听动画结束(
AnimatorListener),在回调中postDelayed()再次启动,以实现间隔播放;资源释放:在
onDetachedFromWindow()中取消所有动画与 Handler 调用。
多方向与多模式
水平滚动:初始偏移为
viewWidth,终点为-textWidth;垂直滚动:初始偏移为
viewHeight,终点为-textHeight;往返模式:设置
repeatMode = ValueAnimator.REVERSE;无缝衔接:使用两行文本交替滚动,一行滚出,一行紧随其后。
触摸暂停与拖动
在自定义 View 中重写
onTouchEvent(),在ACTION_DOWN时pause()动画,ACTION_MOVE时调整偏移,ACTION_UP时resume()或fling()。
四、完整整合版代码
4.1 attrs.xml
<!-- res/values/attrs.xml -->
<resources>
    <declare-styleable name="MarqueeTextView">
        <attr name="mtv_text" format="string" />
        <attr name="mtv_textColor" format="color" />
        <attr name="mtv_textSize" format="dimension" />
        <attr name="mtv_speed" format="float" />
        <attr name="mtv_direction">
            <flag name="horizontal" value="0" />
            <flag name="vertical" value="1" />
        </attr>
        <attr name="mtv_repeatDelay" format="integer" />
        <attr name="mtv_repeatMode">
            <enum name="restart" value="1" />
            <enum name="reverse" value="2" />
        </attr>
        <attr name="mtvInterpolator" format="reference" />
        <attr name="mtv_loop" format="boolean" />
    </declare-styleable>
</resources>4.2 布局文件
<!-- res/layout/activity_main.xml -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
 
    <com.example.marquee.MarqueeTextView
        android:id="@+id/marqueeView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:mtv_text="欢迎使用Android文字滚动播放控件"
        app:mtv_textColor="#FF5722"
        app:mtv_textSize="18sp"
        app:mtv_speed="100"
        app:mtv_direction="horizontal"
        app:mtv_repeatDelay="500"
        app:mtv_repeatMode="restart"
        app:mtvInterpolator="@android:anim/linear_interpolator"
        app:mtv_loop="true"/>
</FrameLayout>4.3 自定义控件:MarqueeTextView.java
package com.example.marquee;
 
import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.animation.TimeInterpolator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import androidx.interpolator.view.animation.LinearOutSlowInInterpolator;
import com.example.R;
 
public class MarqueeTextView extends View {
 
    // ========== 可配置属性 ==========
    private String text;
    private int textColor;
    private float textSize;
    private float speed;               // px/s
    private int direction;             // 0: horizontal, 1: vertical
    private long repeatDelay;          // ms
    private int repeatMode;            // ObjectAnimator.RESTART or REVERSE
    private boolean loop;              // 是否循环
    private TimeInterpolator interpolator;
 
    // ========== 绘制相关 ==========
    private Paint paint;
    private float textWidth, textHeight;
    private float offset;              // 当前滚动偏移
 
    // ========== 动画 ==========
    private ObjectAnimator animator;
 
    public MarqueeTextView(Context context) {
        this(context, null);
    }
 
    public MarqueeTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    public MarqueeTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initAttributes(context, attrs);
        initPaint();
    }
 
    private void initAttributes(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MarqueeTextView);
        text = a.getString(R.styleable.MarqueeTextView_mtv_text);
        textColor = a.getColor(R.styleable.MarqueeTextView_mtv_textColor, 0xFF000000);
        textSize = a.getDimension(R.styleable.MarqueeTextView_mtv_textSize, 16 * getResources().getDisplayMetrics().scaledDensity);
        speed = a.getFloat(R.styleable.MarqueeTextView_mtv_speed, 50f);
        direction = a.getInt(R.styleable.MarqueeTextView_mtv_direction, 0);
        repeatDelay = a.getInt(R.styleable.MarqueeTextView_mtv_repeatDelay, 500);
        repeatMode = a.getInt(R.styleable.MarqueeTextView_mtv_repeatMode, ObjectAnimator.RESTART);
        loop = a.getBoolean(R.styleable.MarqueeTextView_mtv_loop, true);
        int interpRes = a.getResourceId(R.styleable.MarqueeTextView_mtvInterpolator, android.R.interpolator.linear);
        interpolator = android.view.animation.AnimationUtils.loadInterpolator(context, interpRes);
        a.recycle();
 
        if (TextUtils.isEmpty(text)) text = "";
    }
 
    private void initPaint() {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setStyle(Paint.Style.FILL);
 
        // 计算文字尺寸
        textWidth = paint.measureText(text);
        Paint.FontMetrics fm = paint.getFontMetrics();
        textHeight = fm.bottom - fm.top;
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int desiredW = (int) (direction == 0 ? getSuggestedMinimumWidth() : textWidth + getPaddingLeft() + getPaddingRight());
        int desiredH = (int) (direction == 1 ? getSuggestedMinimumHeight() : textHeight + getPaddingTop() + getPaddingBottom());
 
        int width = resolveSize(desiredW, widthMeasureSpec);
        int height = resolveSize(desiredH, heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
 
    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        startScroll();
    }
 
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (animator != null) animator.cancel();
    }
 
    private void startScroll() {
        if (animator != null && animator.isRunning()) return;
 
        float start, end, distance;
        if (direction == 0) {
            // 水平滚动:从右侧外开始,到左侧外结束
            start = getWidth();
            end = -textWidth;
            distance = start - end;
        } else {
            // 垂直滚动:从底部外开始,到顶部外结束
            start = getHeight();
            end = -textHeight;
            distance = start - end;
        }
        long duration = (long) (distance / speed * 1000);
 
        animator = ObjectAnimator.ofFloat(this, "offset", start, end);
        animator.setInterpolator(interpolator);
        animator.setDuration(duration);
        animator.setRepeatCount(loop ? ObjectAnimator.INFINITE : 0);
        animator.setRepeatMode(repeatMode);
        animator.setStartDelay(repeatDelay);
        animator.addListener(new Animator.AnimatorListener() {
            @Override public void onAnimationStart(Animator animation) { }
            @Override public void onAnimationEnd(Animator animation) { }
            @Override public void onAnimationCancel(Animator animation) { }
            @Override public void onAnimationRepeat(Animator animation) { }
        });
        animator.start();
    }
 
    public void setOffset(float value) {
        this.offset = value;
        invalidate();
    }
 
    public float getOffset() { return offset; }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (direction == 0) {
            // 水平
            float y = getPaddingTop() - paint.getFontMetrics().top;
            canvas.drawText(text, offset, y, paint);
        } else {
            // 垂直
            float x = getPaddingLeft();
            canvas.drawText(text, x, offset - paint.getFontMetrics().top, paint);
        }
    }
 
    // ==== 可添加更多 API:pause(), resume(), setText(), setSpeed() 等 ====
}五、代码解读
自定义属性
在
attrs.xml中定义了文字内容、颜色、大小、速度、方向、间隔、循环模式、插值器等属性;在控件构造函数中通过
TypedArray读取并初始化。
测量逻辑
onMeasure()根据滚动方向决定控件的期望宽高;对水平滚动,宽度由父容器决定,高度由文字高度加内边距决定;
对垂直滚动,反之亦然。
绘制逻辑
onDraw()中,根据当前offset绘制文字;使用
paint.measureText()和paint.getFontMetrics()计算文字宽高与基线。
动画逻辑
startScroll()中,计算从起始位置到结束位置的距离与时长;使用
ObjectAnimator对offset属性做动画;设置插值器、循环次数、循环模式与延时;
在
onDetachedFromWindow()中取消动画,防止泄漏。
可扩展性
暴露
setText()、setSpeed()、pause()、resume()等方法;监听用户触摸,支持滑动暂停与手动拖动;
对接 RecyclerView、ListView,实现列表内多个跑马灯。
六、项目总结与拓展
项目收获
深入掌握自定义 View 的测量、绘制与属性动画;
学会在自定义控件中优雅管理动画生命周期;
掌握跑马灯效果的核心算法:偏移量计算与时长转换;
学会如何通过 XML 属性实现高度可配置化。
性能优化
确保硬件加速开启,避免文字绘制卡顿;
对于超长文字或多列文字,可使用
StaticLayout分段缓存;结合
Choreographer精确控制帧率;
高级拓展
触摸控制:拖动暂停、手动快进快退;
多行跑马灯:支持同时滚动多行文字,或背景渐变;
动态数据源:与网络或数据库结合,实时更新滚动内容;
Jetpack Compose 实现:基于
Canvas与Modifier.offset()的 Compose 方案;
以上就是Android实现文字滚动播放效果的示例代码的详细内容,更多关于Android文字滚动播放的资料请关注脚本之家其它相关文章!
