张家口市住房和城乡建设局网站,上海招聘网站建设,wordpress 敏感字,怎么做好网站营销前言 因业务上的需要#xff0c;在APP中点餐时要有商品数目增减操作#xff0c;数目增减的过程中有翻动的动画效果展现。在Android中有多种方式可以实现#xff0c;本篇文章记录通过自定义View结合控件的平移动画相结合来实现此需求。 需求分析 根据上图分析控件的实现过程以…前言 因业务上的需要在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 version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentTextViewandroid:idid/view_astylestyle/number_txt_fontandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:gravitycenterandroid:textstring/number_oneandroid:textColorcolor/color_31 /TextViewandroid:idid/view_bstylestyle/number_txt_fontandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:gravitycenterandroid:textColorcolor/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执行完一次动画动画执行完成后初始值还是0frepeatCount表示只执行一次使用插值器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 $newNumif (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:idid/numberandroid:layout_widthwrap_contentandroid:layout_heightwrap_content / 效果 调用方式这里就不详细说明了首先设置字体大位置和大小加减操作时候通过调用setNumber即可。 实际项目效果 总结
本篇文章所实现的自定义效果难度并不大自定义ViewGroup、使用ValueAnimator结合View的setTranslationY方法实现数字滚动效果。
