Android 实现跑马灯效果

Android 实现跑马灯效果

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

1: TextView属性实现

    <TextView
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#77000000"
        android:padding="5dp"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:scrollHorizontally="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:text="这是textview的跑马灯效果"
        android:id="@+id/tv1"
        />

这里需要注意下:

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 <= -getHeight()) {
offsetY = 0;
}
invalidate();
postDelayed(this, 20);
}
});
}
}