Android自定义View实现文本轮播效果

Posted 2022-12-13 yayun0516

文本轮播可以有效吸引用户眼球，并且适用于一行文本显示不下的场景，一些广告都会采用这种方式。TextView自带轮播属性，除了使用这个属性之外，本文采用了比较有意思的小算法，通过自定义View的方式实现文本轮播效果。

自定义View代码如下：

package ad.scrolltextview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

/**
 * Created by yayun on 2017/6/3.
 * at 20:08
 */

public class ScrollTextView extends View 
    private Paint paint;
    private int x = 0;
    private MyThread myThread;

    public ScrollTextView(Context context) 
        super(context);
        init();
    

    private void init() 
        paint = new Paint();
        paint.setTextSize(45);
        paint.setColor(Color.RED);
        if (myThread == null) 
            myThread = new MyThread();
            myThread.start();
        
    

    @Override
    protected void onDraw(Canvas canvas) 
        super.onDraw(canvas);
        canvas.drawText("YAYUN", x, 50, paint);
    
    
    class MyThread extends Thread 
        @Override
        public void run() 
            while (true) 
                x ++;
                if (x > getWidth()) 
                    x = (int) -paint.measureText("YAYUN");
                
                postInvalidate();
                try 
                    Thread.sleep(10);
                 catch (InterruptedException e) 
                    e.printStackTrace();
                
            
        
    

代码很短，不到五十行，这里仅仅是实现效果，为开发者提供思路，并没有很好的考虑拓展性，读者可自行重构代码。

实现轮播的原理主要是创建了一个线程，在线程中不断动态改变x这一横坐标的值并调用postInvalidate方法来实现不断刷新绘制文本，注意，这里为了保证文本滚动到末尾之后还可以从屏幕左边滚动出来，对X值进行了判断。

在MainActivity中引用这个自定义View，代码如下：

package ad.scrolltextview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity 

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(new ScrollTextView(this));
    

运行实例如下：

 

 

 

 

 

可以通过调节X每次增长的值和线程睡眠的时间来控制轮播速度，调整代码如下：

如果您喜欢，请转发至朋友圈，在此感谢。