【Android自定义控件】Kotlin实现滚动效果的数字加减控件

本文主要是介绍【Android自定义控件】Kotlin实现滚动效果的数字加减控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

因业务上的需要，在APP中点餐时要有商品数目增减操作，数目增减的过程中有翻动的动画效果展现。在Android中有多种方式可以实现，本篇文章记录通过自定义View结合控件的平移动画相结合来实现此需求。

需求分析

根据上图分析控件的实现过程以及使用到的API，要实现数目上下翻动的效果至少需要两个控件，所以要通过自定义ViewGroup来实现，数字的显示使用TextView控件，实现此控件的前提条件是ViewA和ViewB控件的大小一致，文字大小和颜色都相同。

1、初始状态，如下图①，默认ViewA所在位置是显示区域，ViewB不可视。

2、数目加1，效果如图②，ViewA和ViewB同时向上平移一个控件的高度。

3、数目减1，效果如图③，ViewB从上方[ 两倍高度 ]向下平移了一个控件的高度，ViewA从上[ 一倍高度 ]的位置。

4、每一次开始动画前，将要显示的数目值设置到ViewA上，新设置的值设置到ViewB。

实现

分析完需求后，可以明确要使用到哪些API，首先是自定义ViewGroup，因为控件ViewA和ViewB是上下显示，使用ViewGroup.LayoutParams对控件进行初始位置的排布。

class NumberView(context: Context, attributeSet: AttributeSet) :FrameLayout(context, attributeSet) {private val viewA: TextViewprivate val viewB: TextViewcompanion object {//向上平移const val PAN_UP = 1001//向下平移const val PAN_DOWN = 1002//1前面的数字标识，一位数只传这个，两位数十位传此标识const val POS_PRE = "POS_PRE"//后面的数字标识，两位数个位穿此标识const val POS_NEXT= "POS_NEXT"}/*** 平移模式*/private var mode = 0/*** 数字控件宽度*/private var vWidth = 0/*** 数字控件高度*/private var vHeight = 0init {LayoutInflater.from(context).inflate(R.layout.layout_number_view, this, true)viewA = findViewById(R.id.view_a)viewB = findViewById(R.id.view_b)initAnim()}/*** 设置字体控件宽高和大小*/fun setSize(w: Int, h: Int, size: Int) {if (w == vWidth) { return }vWidth = wvHeight = htextSize = sizeviewA.apply {layoutParams =  LayoutParams(vWidth, vHeight)gravity = Gravity.CENTERtextSize = size.toFloat()}viewB.apply {layoutParams = LayoutParams(vWidth, vHeight).apply {topMargin = vHeight}gravity = Gravity.CENTERtextSize = size.toFloat()}}
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextViewandroid:id="@+id/view_a"style="@style/number_txt_font"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:text="@string/number_one"android:textColor="@color/color_31" /><TextViewandroid:id="@+id/view_b"style="@style/number_txt_font"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textColor="@color/color_31" /></FrameLayout>

在NumberView初始化块中对平移动画进行初始化。

/*** 初始化动画*/
private fun initAnim() {animator = ValueAnimator.ofFloat(0f, 1f).apply {repeatMode = ValueAnimator.RESTARTduration = 500repeatCount = 0interpolator = OvershootInterpolator()addUpdateListener {val value = it.animatedValue as FloatstartAnim(value)}}
}

ValueAnimator是 Android 中用于实现动画效果的一个类。允许你在指定的时间段内从一个数值平滑过渡到另一个数值，并且可以监听和响应这个数值变化的过程。

具体参数含义不介绍了，比较简单，创建一个ValueAnimator对象，500ms从0f-1f执行完一次动画，动画执行完成后，初始值还是0f，repeatCount表示只执行一次，使用插值器OvershootInterpolator，表示动画会先超出目标值，然后再回弹到目标值，以增加显示效果。

还需要使用addUpdateListener对动画的进程进行监听，进度值用于控制控件平移的像素值。

控件是向上还是向下平移很好判断，只要拿输入的值和当前值做比较，输入值大于当前值向上平移，小于则向下平移。ViewB设置新的值， ViewA设置旧值，

/*** 设置数字*/fun setNumber(pos: String, newNum: Int) {if (number == newNum) { return }mode = if (newNum > number) {PAN_UP} else {PAN_DOWN}//设置旧值viewA.text = "$number"//设置新值viewB.text = "$newNum"if (animator?.isRunning == true) {animator?.cancel()}setAnimDelay(pos)animator?.duration = 400L + startDelayviewA.translationY = 0FviewB.translationY = 0Fanimator?.start()number = newNum}/*** 如果是1位数字，立马执行* 两位数的数字，设置前后延时执行，产生翻动效果*/private fun setAnimDelay(pos: String) {if (pos == POS_FIRST) {startDelay = 0} else if (pos == POS_SECOND) {startDelay = delay}}

控件上下平移使用setTranslationY，用于设置视图（View）在 Y 轴上的平移量。它的作用是将视图在当前的位置基础上沿着 Y 轴进行移动。参数的单位是像素。

正值 ： 视图会向下移动。
负值： 视图会向上移动

setTranslationY只会改变视图的视觉位置，并不会影响视图的布局边界（layout bounds）。换句话说，视图的布局位置（例如 top, bottom）不会因为 setTranslationY 而改变，变化只是一个视觉上的移动效果。

开始平移动画，向上平移时viewA和ViewB同时向上平移一个控件高度的像素值，向下平移时，ViewB从自身相对位置向上两个控件高度，向下平移一个控件高度像素值，ViewA从自身位置向下移动一个控件高度像素值。

/*** 开启动画*/
private fun startAnim(value:Float){if (mode == PAN_UP) {viewA.translationY = -vHeight * valueviewB.translationY = -vHeight * value} else {viewA.translationY = vHeight * valueviewB.translationY = -2 * vHeight + vHeight * value}
}

布局文件中引用

<com.csdn.ho.NumberViewandroid:id="@+id/number"android:layout_width="wrap_content"android:layout_height="wrap_content" />

效果

调用方式这里就不详细说明了，首先设置字体大位置和大小，加减操作时候通过调用setNumber即可。

实际项目效果

总结

本篇文章所实现的自定义效果难度并不大，自定义ViewGroup、使用ValueAnimator，结合View的setTranslationY方法实现数字滚动效果。

这篇关于【Android自定义控件】Kotlin实现滚动效果的数字加减控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---