Android 实现跑马灯效果

Android 实现跑马灯效果

Android中实现跑马灯效果有多种方式,本篇简单介绍下:

1: TextView属性实现

这里需要注意下:

1. 需要限制textview的宽度,不能设置为wrap_content
2. 启动跑马灯效果需要获取焦点requestFocus().

2: 代码实现

//设置TextView只显示一行文本。

tv2.setSingleLine();

//设置TextView的文本内容是否可以水平滚动。

tv2.setHorizontallyScrolling(true);

//设置当TextView的文本内容超出可显示范围时的省略方式，这里设置为跑马灯效果。

tv2.setEllipsize(TextUtils.TruncateAt.MARQUEE);

//设置跑马灯效果重复的次数，-1表示无限重复。

tv2.setMarqueeRepeatLimit(-1);

//设置TextView是否可以获取焦点。

tv2.setFocusable(true);

//设置TextView在触摸模式下是否可以获取焦点。

tv2.setFocusableInTouchMode(true);

//请求获取焦点。

tv2.requestFocus();

3: 自定义 view实现

这里可以使用动画的效果实现.

package com.test.marquee;

import android.animation.ValueAnimator;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.View;

import android.view.animation.LinearInterpolator;

import androidx.annotation.Nullable;

public class MarqueeView extends View {

private String text;

private Paint paint;

private float textWidth;

private float textX;

private float viewWidth;

private ValueAnimator animator;

public MarqueeView(Context context) {

super(context);

init();

}

public MarqueeView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

public MarqueeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

}

private void init() {

text = “This is a marquee”;

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

paint.setTextSize(50);

paint.setColor(Color.BLACK);

textWidth = paint.measureText(text);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

viewWidth = w;

textX = viewWidth;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawText(text, textX, getHeight() / 2, paint);

}

public void startMarquee() {

animator= ValueAnimator.ofFloat(viewWidth, -textWidth);

animator.setDuration(5000);

animator.setInterpolator(new LinearInterpolator());

animator.setRepeatCount(ValueAnimator.INFINITE);

animator.addUpdateListener(animation -> {

textX = (float) animation.getAnimatedValue();

invalidate();

});

animator.start();

}

public void stopMarquee() {

// 停止动画

if (animator!=null) animator.cancel();

}

}

4: 实现竖直效果的跑马灯

package com.test.marquee;

import android.content.Context;

import android.graphics.Canvas;

import android.text.TextUtils;

import android.text.method.ScrollingMovementMethod;

import android.util.AttributeSet;

import androidx.annotation.Nullable;

import androidx.appcompat.widget.AppCompatTextView;

public class VerticalMarqueeTextView extends AppCompatTextView {

private float offsetY;

public VerticalMarqueeTextView(Context context) {

super(context);

init();

}

public VerticalMarqueeTextView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

private void init() {

setSingleLine();

setEllipsize(TextUtils.TruncateAt.MARQUEE);

setMarqueeRepeatLimit(-1);

setFocusable(true);

setFocusableInTouchMode(true);

setHorizontallyScrolling(true);

setMovementMethod(ScrollingMovementMethod.getInstance());

}

@Override

protected void onDraw(Canvas canvas) {

canvas.translate(0, offsetY);

super.onDraw(canvas);

}

@Override

public boolean isFocused() {

return true;

}

@Override

protected void onAttachedToWindow() {

super.onAttachedToWindow();

post(new Runnable() {

@Override

public void run() {

offsetY -= 1;

if (offsetY