前言
在上篇文章中，我们对数字滚动效果的实现做了简单逻辑分析，大家有兴趣的话，可参考以下文章：
自定义温度显示控件(一)
自定义温度显示控件(二)
鉴于自定义温度显示控件(二)文章的讲解，但是我们需要实现的是点击控按钮后，温度数值从左到右或者是从右到左的滚动效果，因此自定义温度显示控件(二)只能作为实现的借鉴，我们需要在它的基础之上，做进一步改造。
今天涉及内容有：
- 需求差异及改造点
-
MultiRollNumber几个常用方法 -
MultiRollNumber在MainActivity中使用 - 效果图和项目结构图
-
MultiRollNumber相关源码
效果图如下：
效果图.gif
一. 需求差异及改造点
这里数字滚动控件依然是由两个自定义控件MultiRollNumber和RollNumber来共同实现。对照我们要实现的效果，RollNumber需要处理显示数字的范围问题。而MultiRollNumber需要改造的是数字滚动方向的问题，由于滚动方向变化了，效果也变了，MultiRollNumber还需要优化下添加数字内容控件到LinearLayout的处理逻辑。
二. MultiRollNumber 几个常用方法
这里对MultiRollNumber控件做了些处理与优化，其可提供外部使用的方法有:
/**设置阈值**/
public void setRange(float minValue,float maxValue)
/**获取最大范围值**/
public float getMaxValue()
/**获取最小范围值**/
public float getMinValue()
/**设置初始值**/
public void initNumber(float number)
/**设置从lastNumber滚动到number**/
public void setTargetNumber(float lastNumber,float number)
/**获取滚动结束的值**/
public float getTargetNumber()
/**设置插值器**/
public void setInterpolator(Interpolator interpolator)
像设置字体大小，颜色，粗细，字体样式之类的基本属性，这里就不实现了，大家可以基于此类设置属性扩展出来。
三. MultiRollNumber 在 MainActivity 中使用
先给出MainActivity对应布局activity_main.xml代码：
<?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=".MainActivity">
<TextView
android:id="@+id/tv_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="@dimen/dp_70"/>
<Button
android:id="@+id/btn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_text"
android:layout_marginTop="@dimen/dp_20"/>
<Button
android:id="@+id/btn_test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试n"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_test"
android:layout_marginTop="@dimen/dp_20"/>
<com.pain.testdemo.function.MultiRollNumber
android:id="@+id/multi_scroll_number"
android:layout_width="@dimen/dp_120"
android:layout_height="@dimen/dp_40"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_test2"
android:layout_marginTop="@dimen/dp_20"/>
</androidx.constraintlayout.widget.ConstraintLayout>
下面给出MultiRollNumber在MainActivity中使用代码：
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private TextView mTv;
private Button mBtn;
private Button mBtn2;
private MultiRollNumber multiRollNumber;
private float mLastNumber;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MyUtil.i("=======onCreate======");
initView();
initData();
setListener();
}
private void initView() {
mTv = findViewById(R.id.tv_text);
mBtn = findViewById(R.id.btn_test);
mBtn2 = findViewById(R.id.btn_test2);
multiRollNumber = findViewById(R.id.multi_scroll_number);
}
private void initData() {
multiRollNumber.setRange(15.5f,28.5f);
multiRollNumber.initNumber(17f);
}
private void setListener() {
mBtn.setOnClickListener(this);
mBtn2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_test:
MyUtil.i("=======test======");
//获取滚动结束的值
mLastNumber=multiRollNumber.getTargetNumber();
//设置从lastNumber滚动到number
multiRollNumber.setTargetNumber(mLastNumber,16f);
mLastNumber=multiRollNumber.getTargetNumber();
MyUtil.toast("最后值为:"+mLastNumber,MainActivity.this);
break;
case R.id.btn_test2:
MyUtil.i("=======test2=====");
//获取滚动结束的值
mLastNumber=multiRollNumber.getTargetNumber();
multiRollNumber.setTargetNumber(mLastNumber,20.5f);
mLastNumber=multiRollNumber.getTargetNumber();
MyUtil.toast("滚动后值为:"+mLastNumber,MainActivity.this);
break;
default:
break;
}
}
}
四. 效果图和项目结构图
项目结构图.png
效果图.gif
五. MultiRollNumber 相关源码
RollNumber源码如下：
