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" />
这里需要注意下:
- 需要限制textview的宽度,不能设置为wrap_content
- 启动跑马灯效果需要获取焦点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); } }); } }
您可能感兴趣的文章: