如何通过上下滑动实现亮度和音量调节(ArkUI) 原创
野生菌君
发布于 2023-12-6 15:32
浏览
1收藏
场景说明
在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小,本例即为大家介绍如何实现上述UI效果。
说明:
由于当前亮度和音量调节功能仅对系统应用开放,所以本例仅讲解UI效果的实现。
效果呈现
本例效果如下:
- 当在屏幕左侧滑动时,可以调节亮度,上滑亮度提升,下滑亮度降低。
- 当在屏幕右侧滑动时,可以调节音量,上滑音量增大,下滑音量减小。
环境要求
本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:
- IDE: DevEco Studio 4.0 Release
- SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)
实现思路
本例中几个关键的功能点及其实现思路如下:
- 区分屏幕左右两侧的滑动,从而使其触发不同效果:通过识别触摸点的坐标(event.fingerList[0].localX)来判断滑动是在左侧还是右侧。
- 区分滑动是上滑还是下滑:通过触摸点在Y轴方向的偏移量(event.offsetY)来识别上滑还是下滑。
- 上滑和下滑控制亮度和音量的大小:亮度和音量的大小使用环形进度条(Progress组件)来呈现,通过滑动改变Progress的value值。
开发步骤
开发步骤仅呈现关键代码,全量代码请参考完整代码章节;另外,开发者在运行时需要将本例中使用的图片等资源替换为本地资源。
- 搭建UI框架。
- 为Column组件添加触摸手势,并通过触摸点的坐标区分左侧滑动和右侧滑动。左右两侧的分界点可以根据屏幕尺寸自行设置,本例采用200为分界点。
- 通过触摸点在Y轴方向的偏移量来识别上滑和下滑。
- 手势识别之后,通过手势控制Progress的value值,从而调节亮度和音量的大小。
完整代码
本例完整代码如下:
参考
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2024-1-16 09:13:11修改
赞
3
收藏 1
回复
3
2
1
相关推荐
动画是真的丝滑
代码好像有点问题,文档上说fingerList属性只用于TapGesture和LongPressGesture,没有说用于panGesture,所以代码中好像没有办法获得滑动点的坐标值