Android:实现一个简单带动画的展开收起功能

大家好,我是似曾相识2022。不喜欢唱跳篮球,但对杰伦的Rap却情有独钟。

今天给大家带来一个展开和收起的简单效果。如果只是代码中简单设置显示或隐藏,熟悉安卓系统的朋友都知道,那一定是闪现。所以笔者结合了动画,使得体验效果瞬间提升一个档次。话不多说,直接上效果:

首先观察图中效果,视图有展开和折叠两种状态,右侧图标和文字会跟随这个状态改变。那么其中就有折叠的高度和展开的高度需要我们记录。折叠高度是固定的,展开高度需要动态获取。需要注意的是不能直接通过视图直接获取高度,因为视图的绘制和Activity的生命周期是不同步的,在Activity中直接lin.height获取高度无法保证此时的视图已经完成计算。这里直接用简单的post方式获取到绘制完成的总高度。原理是将这个消息放到队列最后一条,这样就可以保证回调方法中能够获取到真实的高度。

ini 复制代码
lin?.post {
    val h = lin!!.height
    hight = if (h > 0) h else baseHight

    if (h > 0 && ivTop?.visibility == View.GONE) {
        ivTop?.visibility = View.VISIBLE
    }
}

接下来就是动画的使用和动态控制视图的高度了。这里需要用到属性动画,我们知道的属性动画有ValueAnimatorObjectAnimatorObjectAnimator 是继承于ValueAnimator ,说明ValueAnimator 能做的事情ObjectAnimator 也可以实现。由于我们要控制的视图不止一个,所以还是使用ValueAnimator 方便点。通过addUpdateListener添加监听后,animation.animatedValue就是我们需要的当前值。在此处不停将当前高度赋值给视图,并且图标也根据这个值进行等比例的旋转以到达到视图不停更新。

kotlin 复制代码
//根据展开、关闭状态传入对应高度
val animator = ValueAnimator.ofInt(
    if (isExpand) hight - baseHight else 0,
    if (isExpand) 0 else hight - baseHight
)
animator.addUpdateListener { animation ->
    val params = lin?.layoutParams
    params?.height = if ((animation.animatedValue as Int) < baseHight) baseHight else (animation.animatedValue as Int) //当高度小于基础高度时 给与基础高度
    lin?.layoutParams = params//拿到当前高度
    //图标旋转
    ivTop?.rotation = (animation.animatedValue as Int) * 180f / (hight - baseHight)

}
animator.duration = 500//动画时长
animator.start()

isExpand = !isExpand
tvExpand?.text = if (isExpand) "关闭" else "展开"

编写过程需要注意展开和收起状态下值的正确输入,在回调方法中获取对应的当前值并赋值。

好了,一个简单的展开收起功能就实现了,希望对大家有所帮助。

相关推荐
星间都市山脉18 小时前
Android16 SystemService.onBootPhase 调用时机
android·java·linux·windows·ubuntu
swithun18 小时前
不用 WebView,我用 Kotlin + Compose Multiplatform 重写 Mermaid,并做了 2048 组对拍
android·开源·kotlin
AI吃大瓜18 小时前
人脸检测和行人检测4:Android实现YOLOv8 YOLO11 YOLO26人脸检测和人体检测(含源码,可实时检测)
android·yolo·人脸检测·人体检测·行人检测·yolo26
与海boy18 小时前
Prompt模版
android·prompt
FlightYe18 小时前
音视频修炼之编码器(一):AVC、HEVC编码器内部
android·linux·c++·音视频
智购科技无人售货机工厂18 小时前
2026自动售货机AI智能体架构:从47个小模型到33.7亿Token的工程实践~YH
android·人工智能·驱动开发·单片机·pandas
嵩风抚19 小时前
一款HK银行APP的业务+技术
android·flutter·react native·html5
00后程序员张1 天前
怎么用 Egret(白鹭引擎)打包 iOS 应用并上架 App Store?
android·ios·小程序·https·uni-app·iphone·webview
JMchen1 天前
第 8 篇|本地存储技术选型 —— SP 与文件读写
kotlin·android studio
mmsx1 天前
MapLibre 实战 09|Bug 单写着"地图被风刮走了":一个瓦片源工厂,是三个线上事故换来的
android·前端·开源