【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: TextView

    private val viewB: TextView

    companion object {
        //向上平移
        const val PAN_UP = 1001
        //向下平移
        const val PAN_DOWN = 1002
		//10~99之间的数字，前面的数字标识
        const val POS_FIRST = "POS_FIRST"
        //10~99之间的数字，后面的数字标识
        const val POS_SECOND = "POS_SECOND"
    }
    
    /**
     * 平移模式
     */
    private var mode = 0

    
    /**
     * 数字控件宽度
     */
    private var vWidth = 0

    /**
     * 数字控件高度
     */
    private var vHeight = 0

    init {
        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 = w
        vHeight = h
        textSize = size
        layoutParams = LinearLayout.LayoutParams(vWidth, vHeight)
        viewA.apply {
            layoutParams =  LayoutParams(vWidth, vHeight)
            gravity = Gravity.CENTER
            textSize = size.toFloat()
        }

        viewB.apply {
            layoutParams = LayoutParams(vWidth, vHeight).apply {
                topMargin = vHeight
            }
            gravity = Gravity.CENTER
            textSize = 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">

   <TextView
       android: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" />

   <TextView
       android: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.RESTART
        duration = 500
        repeatCount = 0
        interpolator = OvershootInterpolator()
        addUpdateListener {
            val value = it.animatedValue as Float
            startAnim(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 + startDelay
     viewA.translationY = 0F
     viewB.translationY = 0F
     animator?.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 * value
       viewB.translationY = -vHeight * value
 	} else {
       viewA.translationY = vHeight * value
       viewB.translationY = -2 * vHeight + vHeight * value
   }
}

布局文件中引用

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

效果

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

实际项目效果

总结

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