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

原创

已于 2024-09-05 08:51:42 修改 · 1.8k 阅读

21 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#android #kotlin #Android滚动数字 #Android自定义控件 #ValueAnimator

于 2024-08-31 15:47:13 首次发布

前言

因业务上的需要，在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
		//1前面的数字标识，一位数只传这个，两位数十位传此标识
        const val POS_PRE = "POS_PRE"
        //后面的数字标识，两位数个位穿此标识
        const val POS_NEXT= "POS_NEXT"
    }
    
    /**
     * 平移模式
     */
    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