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

前言


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


需求分析


在这里插入图片描述

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

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

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

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

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


实现


分析完需求后,可以明确要使用到哪些API,首先是自定义ViewGroup,因为控件ViewAViewB是上下显示,使用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)}}
}

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

具体参数含义不介绍了,比较简单,创建一个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 而改变,变化只是一个视觉上的移动效果。

开始平移动画,向上平移时viewAViewB同时向上平移一个控件高度的像素值,向下平移时,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,结合ViewsetTranslationY方法实现数字滚动效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/878440.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣763-划分字母区间(Java详细题解)

题目链接&#xff1a;763. 划分字母区间 - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 因为本人最近都来刷贪心类的题目所以该题就默认用贪心方法来做。 贪心方法&#xff1a;局部最优推出全局最优。 如果一个题你觉得可以用局部最优推出全局最优&#xf…

如何在 Vim 中显示行号

前言 Vim 是一款功能强大的文本编辑器&#xff0c;在 Linux、Mac 和 Windows 上都有广泛的应用。对于开发人员来说&#xff0c;能够快速查看代码行号是一个非常实用的功能&#xff0c;尤其是在进行调试或阅读长文件时。本文将介绍如何在 Vim 中开启和关闭行号显示。 开启行号…

【STM32】RS485

RS485是常见的串口接口。 大部分图片来源&#xff1a;正点原子HAL库课程 专栏目录&#xff1a;记录自己的嵌入式学习之路-CSDN博客 目录 1 串口、UART、TTL、RS232、RS422、RS485的关系 1.1 串口 1.2 UART、TTL、RS232、RS422、RS485 1.3 常见串口标准的比较 …

JS 如何判断是否是IE浏览器

例子 if(!!window.ActiveXObject || "ActiveXObject" in window){alert("抱歉&#xff0c;不支持IE浏览器&#xff01;");return; }

亚马逊云技术深度解析与实战案例

亚马逊云技术深度解析与实战案例 引言 亚马逊云(Amazon Web Services, AWS)作为全球云计算技术的领导者,以其丰富的服务种类、强大的基础设施和持续的技术创新,为企业和个人开发者提供了前所未有的灵活性和扩展性。本文将深入探讨亚马逊云的核心技术,并通过一个具体的代…

vue el-tree主键id重复 添加自增id 以及原相同节点同步勾选 同步操作

树数据只提供了nodeId&#xff0c;且存在不同节点重复nodeId的问题&#xff0c;由于树组件的node-key需要唯一性&#xff0c;所有这个时候我们需要给数据添加自增id &#xff08;延申问题&#xff1a;操作某个节点的时候&#xff0c;同步操作与他nodeId相同的节点&#xff09;&…

【微机原理】v和∧区别

&#x1f31f; 嗨&#xff0c;我是命运之光&#xff01; &#x1f30d; 2024&#xff0c;每日百字&#xff0c;记录时光&#xff0c;感谢有你一路同行。 &#x1f680; 携手启航&#xff0c;探索未知&#xff0c;激发潜能&#xff0c;每一步都意义非凡。 在汇编语言和逻辑表达…

UE 【材质编辑】自定义材质节点

使用UE的材质编辑器&#xff0c;蓝图提供了大量的节点函数&#xff1a; 实际上&#xff0c;这是一段封装好的包含一串HLSL代码的容器。打开“Source/Runtime/Engine/Classes/Material”&#xff0c;可以看到很多不同节点的头文件&#xff1a; 照葫芦画瓢 以UMaterialExpressi…

★ 算法OJ题 ★ 力扣 LCR179 - 和为 s 的两个数字

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;小诗歌剧将和大家一起做一道双指针算法题--和为 s 的两个数字~ 目录 一 题目 二 算法解析 三 编写算法 一 题目 LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 二 算法解析 …

MacOS使用FileZilla通过ssh密钥文件连接远程服务器(已解决)

需求描述 mac电脑,使用filezilla通过FTP连接远程服务器,使用ssh密钥文件代替密码。 版本信息 MacOS:Sonoma 14.5 M3芯片 FileZilla:3.66.5 在这里插入图片描述 连接 1. 创建站点 打开filezilla工具,右上角选择“文件 -> 站点管理器”,打开站点管理器弹窗。 2.…

2024“钉耙编程”中国大学生算法设计超级联赛(9)

传送门 1005 怪物猎人 如果全用 x 和 全用 y 攻击的轮次不同那么奇偶轮次都可以击败怪物&#xff1b;否则只有奇数轮次或者偶数轮次能够击败怪物。 #include <bits/stdc.h> using namespace std;#define int long longinline int read() {int x 0, f 1; char c get…

AI搜索:重塑信息获取的新纪元

在信息爆炸的时代&#xff0c;如何快速、准确地获取所需信息成为了每个人面临的挑战。传统的搜索引擎虽然在一定程度上解决了这一问题&#xff0c;但广告干扰、结果冗余、内容质量参差不齐等问题仍让用户体验大打折扣。随着AI技术的不断发展&#xff0c;AI搜索产品以其独特的优…

将工程内的组件 集成并发布到私有仓库以及后续联动运行(热启动)

将工程内的组件 发布到私有仓库 背景与简介 1、项目的数据 私有仓库地址&#xff1a; 【】 私有仓库账号/密码&#xff1a; 【】 组件包名称&#xff1a; 【ciec/ciec-component-pc】 组件包项目git地址&#xff1a;【 】 node版本&#xff1a;【】 2、文献链接 a)t b) 3、注意…

docker安装配置、docker命令

一、CentOS7安装docker 1、安装 Docker CE 支持 64 位版本 CentOS 7&#xff0c;并且要求内核版本不低于 3.10&#xff0c; CentOS 7 满足最低内核的要求&#xff0c;所以我们在CentOS 7安装Docker。 卸载旧docker 如果之前安装过旧版本的Docker&#xff0c;可以使用下面命令…

DFS、BFS、Union-Find:找出图中省份数量的最佳方法

题目理解 问题描述&#xff1a; 有 n 个城市&#xff0c;其中一些城市之间直接相连&#xff0c;另一些则不相连。如果城市 a 和城市 b 直接相连&#xff0c;且城市 b 和城市 c 直接相连&#xff0c;那么城市 a 和城市 c 间接相连。省份被定义为一组直接或间接相连的城市&…

美团2024秋招编程题:小美的red子序列数量之和

题目为&#xff1a; 小美有一个字符串&#xff0c;小美想知道这个字符串的所有连续子串中&#xff0c;red 子序列的数量之和。 子串是指从原字符串中&#xff0c;连续的选择一段字符组成的新字符串。 定义 red 子序列为从原字符串中从左到右依次取出r、e和d组成的新字符串。 …

1999-2023年上市公司年报文本数据(PDF+TXT)

1999-2023年上市公司年报文本数据&#xff08;PDFTXT&#xff09; 1、时间&#xff1a;1999-2023年 2、来源&#xff1a;上市公司年度报告 3、范围&#xff1a;A股上市公司&#xff0c;5600企业&#xff0c;6.3W份 4、格式&#xff1a;PDFTXT 5、下载链接&#xff1a; 199…

C#实现快速傅里叶变换(FFT)

1、FFT类 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServices.ComTypes; using System.Text; using System.Threading.Tasks;namespace DFT_FFTApp.Utils {public class FFT{/// <summary>/// FFT/// </summ…

Java12 Excel和Json文件解析

Excel文件解析&#xff1a; Excel文件解析(EasyExcel框架解析) Excel文件解析(Apache POl框架解析) &#xff08;1&#xff09;Excel文件对象创建&#xff1a;POI 《1》创建工作簿对象: XSSFWorkbook workbooknew XSSFWorkbook&#xff08;&#xff09;&#xff1b; 《2》创…

SQL语句复习

一、CTE和WITH CTE是一种命名的临时结果集,CTE是通过WITH子句来定义的. WITH cte_name (column1, column2, ...) AS (-- CTE查询定义SELECT ... ) -- 主查询 SELECT ... FROM cte_name WHERE ... column1, column2, ... 是可选的列名列表&#xff0c;通常用于给CTE的列命名。…