数字滚动控件Ticker，动态更新你的钱包金额！

引言

经常我们会在股市、金融、钱包等app软件中见到数字滚动控件，导致我一直很好奇，到底这是怎么做到的呢？因为一般只有主线程能更新UI，而一般的数据获取和通知更新都在子线程中进行，需要通知主线程，动态显示数字滚动切换效果。
今天就来使用Ticker控件来实现数字滚动效果，国际惯例，先看效果再看代码如何实现。赶快@你的小伙伴一起学习起来吧！

效果预览

用法

第一步：添加依赖(app下build.gradle中)

//数字滚动控件
implementation 'com.robinhood.ticker:ticker:2.0.2'

第二步：布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".blog.Case37"
    tools:ignore="MissingConstraints">
    <com.robinhood.ticker.TickerView
        android:id="@+id/tickerView"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#3bc99c"/>
</androidx.constraintlayout.widget.ConstraintLayout>

第三步：在Activity中书写业务逻辑

public class Case37 extends AppCompatActivity {
    protected static final Random RANDOM = new Random(System.currentTimeMillis());//当前毫秒数范围类的随机数
    private TickerView tickerView;
    private Handler handler = new Handler();//定义一个handle用来启动线程来动态更新UI
    private boolean resumed;//定义一个开关:是否可以开始动态改变Ticker上的text

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case37);

        tickerView= (TickerView) findViewById(R.id.tickerView);
        tickerView.setCharacterLists(TickerUtils.provideNumberList());
        tickerView.setTextSize(56);//设置文字大小,自己经验:jar包导入推荐使用代码设置文字大小
        tickerView.setAnimationDuration(500);//设置动画持续时间
        tickerView.setAnimationInterpolator(new OvershootInterpolator());//设置动画插值器
        tickerView.setGravity(Gravity.CENTER);//设置对齐方式
    }
    @Override
    protected void onResume() {
        super.onResume();
        resumed = true;//打开开关
        handler.post(createRunnable());//启动更新UI的线程
    }

    /**
     * 递归
     * 创建Runnable对象(动态延迟)
     * @return
     */
    private Runnable createRunnable() {
        return new Runnable() {
            @Override
            public void run() {
                onUpdate();//更新UI
                if (resumed) {
                    handler.postDelayed(createRunnable(), RANDOM.nextInt(1750) + 250);
                }
            }
        };
    }
    /**
     * 更新界面显示
     */
    protected void onUpdate() {
        final int digits = RANDOM.nextInt(2) + 6;//将digits(字符长度)限定在[6,8]内
        tickerView.setText("$"+getRandomNumber(digits));
    }

    /**
     * 将数值通过固定算法并转化成字符串
     * @param digits
     * @return
     */
    protected String getRandomNumber(int digits) {
        final String currencyFloat = Float.toString(RANDOM.nextFloat() * 1000);//价格显示范围在1000$内
        final String showText = currencyFloat.substring(0,  digits-1);//在[0,digits)之间取一个子字符串
        return showText;
    }

    @Override
    protected void onPause() {
        resumed = false;//关闭开关
        super.onPause();
    }
}

大功告成！

Ticker1.jpeg

Tikcer2.jpeg

最后编辑于：2020.10.25 22:39:42