鸿蒙ArkUI实战开发-如何通过上下滑动实现亮度和音量调节

场景说明

在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小,本例即为大家介绍如何实现上述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值。

开发步骤

开发步骤仅呈现关键代码,全量代码请参考完整代码章节;另外,开发者在运行时需要将本例中使用的图片等资源替换为本地资源。

  1. 搭建UI框架。
    Column(){// 添加需要呈现的文本Row(){Text('左侧滑动')Text('右侧滑动')}Stack(){// 亮度调节UIImage($r('app.media.ic_brightness'))Progress({value:this.bright,type:ProgressType.Ring})// 音量调节UIImage($r('app.media.ic_volume'))Progress({value:this.volume,type:ProgressType.Ring})}}
  1. 为Column组件添加触摸手势,并通过触摸点的坐标区分左侧滑动和右侧滑动。左右两侧的分界点可以根据屏幕尺寸自行设置,本例采用200为分界点。
    Column(){//...}.gesture(GestureGroup(GestureMode.Exclusive,// 添加触摸手势,并通过direction控制手势滑动方向为上下滑动PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event?:GestureEvent)=>{// 通过event.fingerList[0].localX获取触摸点的横坐标this.fingerPosition = event.fingerList[0].localX// 当触摸点的横坐标>200时,判定触摸点在屏幕右侧,控制音量if (this.fingerPosition > 200){//...}// 当触摸点的横坐标<200时,判定触摸点在屏幕左侧,控制亮度if (this.fingerPosition < 200){//...}}),))
  1. 通过触摸点在Y轴方向的偏移量来识别上滑和下滑。
    Column(){// ...}.gesture(GestureGroup(GestureMode.Exclusive,PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event?:GestureEvent)=>{this.fingerPosition = event.fingerList[0].localX// 当触摸点在Y轴方向的偏移量<0时,滑动方向为上滑if (event.offsetY < 0){// ...// 反之,滑动方向为上滑}else{// ...}}),))
  1. 手势识别之后,通过手势控制Progress的value值,从而调节亮度和音量的大小。
    Column(){// ...Stack(){// 亮度调节UIif (this.fingerPosition != 0 && this.fingerPosition < 200){// 通过变量bright控制亮度进度条的变化Progress({value:this.bright,type:ProgressType.Ring})// 音量调节UI}else if (this.fingerPosition != 0 && this.fingerPosition > 200){// 通过变量volume控制音量进度条的变化Progress({value:this.volume,type:ProgressType.Ring})}}}.gesture(GestureGroup(GestureMode.Exclusive,PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event?:GestureEvent)=>{this.fingerPosition = event.fingerList[0].localX// 向上滑动if (event.offsetY < 0){// 触摸点在屏幕右侧if (this.volume < 100 && this.fingerPosition > 200){// 音量值增加this.volume += 1}// 触摸点在屏幕左侧if (this.bright < 100 && this.fingerPosition < 200){// 亮度值增加this.bright += 1}// 向下滑动}else{// 触摸点在屏幕右侧if (this.volume > 0 && this.fingerPosition > 200){// 音量值减小this.volume -= 1}// 触摸点在屏幕左侧if (this.bright > 0 && this.fingerPosition < 200){// 亮度值减小this.bright -= 1}}}),))

完整代码

本例完整代码如下:

// xxx.ets
@Entry
@Component
struct ChangeVolume{@State volume:number = 0@State bright:number = 0@State fingerPosition:number = 0build(){Column(){// 添加需要呈现的文本Row(){if (this.fingerPosition != 0 && this.fingerPosition < 200){Text('左侧滑动').fontColor('#FD836E').fontSize(20).textAlign(TextAlign.Start).width('85%')}if (this.fingerPosition != 0 && this.fingerPosition > 200){Text('右侧滑动').fontColor('#0AAF88').fontSize(20).textAlign(TextAlign.End).align(Alignment.End).width('100%')}}.width('90%').height('50%').alignItems(VerticalAlign.Bottom)Stack(){// 亮度调节UIif (this.fingerPosition != 0 && this.fingerPosition < 200){Image($r('app.media.ic_brightness')).width(100).aspectRatio(1.0)Progress({value:this.bright,type:ProgressType.Ring}).color('#FD836E').width(105).aspectRatio(1.0)// 音量调节UI}else if (this.fingerPosition != 0 && this.fingerPosition > 200){Image($r('app.media.ic_volume')).width(100).aspectRatio(1.0)Progress({value:this.volume,type:ProgressType.Ring}).color('#0AAF88').width(105).aspectRatio(1.0)}}.width('100%').height('40%')}.width('100%').height('100%').gesture(GestureGroup(GestureMode.Exclusive,// 添加触摸手势,并通过direction控制手势滑动方向为上下滑动PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event?:GestureEvent)=>{// 通过event.fingerList[0].localX获取触摸点的横坐标this.fingerPosition = event.fingerList[0].localX// 向上滑动if (event.offsetY < 0){// 触摸点在屏幕右侧if (this.volume < 100 && this.fingerPosition > 200){// 音量值增加this.volume += 1}// 触摸点在屏幕左侧if (this.bright < 100 && this.fingerPosition < 200){// 亮度值增加this.bright += 1}// 向下滑动}else{// 触摸点在屏幕右侧if (this.volume > 0 && this.fingerPosition > 200){// 音量值减小this.volume -= 1}// 触摸点在屏幕左侧if (this.bright > 0 && this.fingerPosition < 200){// 亮度值减小this.bright -= 1}}}),))}
}

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新VIP学习资源,请移步前往小编:https://qr21.cn/FV7h05

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

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

相关文章

iOS - 多线程-GCD-队列组

文章目录 iOS - 多线程-GCD-队列组1. 队列组1.1 基本使用步骤 iOS - 多线程-GCD-队列组 开发过程中&#xff0c;有时候想实现这样的效果 多个任务并发执行所有任务执行完成后&#xff0c;进行下一步处理&#xff08;比如回到主线程刷新UI&#xff09; 1. 队列组 可以使用GC…

区间图着色问题:贪心算法设计及实现

区间图着色问题&#xff1a;贪心算法设计及实现 1. 问题定义2. 贪心算法设计2.1 活动排序2.2 分配教室2.3 算法终止 3. 伪代码4. C语言实现5. 算法分析6. 结论7. 参考文献 在本文中&#xff0c;我们将探讨如何使用贪心算法解决一个特定的资源分配问题&#xff0c;即区间图着色问…

ruby 配置代理 ip(核心逻辑)

在 Ruby 中配置代理 IP&#xff0c;可以通过设置 Net::HTTP 类的 Proxy 属性来实现。以下是一个示例&#xff1a; require net/http// 获取代理Ip&#xff1a;https://www.kuaidaili.com/?refrg3jlsko0ymg proxy_address 代理IP:端口 uri URI(http://www.example.com)Net:…

【002_音频开发_基础篇_Linux音频架构简介】

002_音频开发_基础篇_Linux音频架构简介 文章目录 002_音频开发_基础篇_Linux音频架构简介创作背景Linux 音频架构ALSA 简介ASoC 驱动硬件架构软件架构MachinePlatformCodec ASoC 驱动 PCMALSA设备文件结构 ALSA 使用常用概念alsa-libALSA Open 流程ALSA Write 流程2种写入方法…

Android Studio查看viewtree

前言&#xff1a;之前开发过程一直看的是手机上开发者选项中的显示布局边界&#xff0c;开关状态需要手动来回切换&#xff0c;今天偶然在Android Studio中弄出了布局树觉得挺方便的。

【STM32F407+CUBEMX+FreeRTOS+lwIP之TCP记录】

STM32F407CUBEMXFreeRTOSlwIP之TCP记录 注意TCP client(socket)示例 TCP_server(socket)效果 注意 如果连接失败&#xff0c;建议关一下代理软件。 配置方面可以参考一下上一篇UDP的文章 STM32F407CUBEMXFreeRTOSlwIP之UDP记录 TCP client(socket) #define LWIP_DEMO_PORT 8…

【C语言__指针02__复习篇12】

目录 前言 一、数组名的理解 二、使用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 前言 本篇主要讨论以下问题&#xff1a; 1. 数组名通常表示什么&#xff0c;有哪两种例外情况&#xff0c;在例外情况中…

【论文浅尝】Phi-3-mini:A Highly Capable Language Model Locally on Your Phone

Phi-3-mini phi-3-mini&#xff0c;一个3.8亿个参数的语言模型&#xff0c;训练了3.3万亿个token&#xff0c;其总体性能&#xff0c;通过学术基准和内部测试进行衡量&#xff0c;可以与Mixtral 8x7B和GPT-3.5等模型相媲美(在MMLU上达到69%&#xff0c;在MT-bench上达到8.38)&…

Maya vs Blender:制作3D动画首选哪一个?

就 3D 动画而言&#xff0c;有两款3D软件引发了最多的争论&#xff1a;Blender 与 Maya。这两个强大的平台都提供强大的工具集&#xff0c;使动画故事和角色栩栩如生。但作为一名3D动画师&#xff0c;您应该投入时间学习和创作哪一个呢&#xff1f;下面我将从以下六点给您一个清…

用Python将原始边列表转换为邻接矩阵

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在图论和网络分析中&#xff0c;图是一种非常重要的数据结构&#xff0c;它由节点&#xff…

C++感受6-Hello World 交互版

变量、常量输入、输出、流getline() 函数读入整行输入Hello() 函数复习新定义函数 Input() 实现友好的人机交互还有 “痘痘” 为什么挤不到的分析…… 1. DRY 原则简介 上一节课&#xff0c;我们写了两版“问候”程序。第一版的最大问题是重复的内容比较多&#xff0c;每一次问…

运行django

确保app被注册 urls.py中编写url 视图对应关系 命令行启动 python manage.py runserver

完美运营版商城/拼团/团购/秒杀/积分/砍价/实物商品/虚拟商品等全功能商城

源码下载地址&#xff1a;完美运营版商城.zip 后台可以自由拖曳修改前端UI页面 还支持虚拟商品自动发货等功能 挺不错的一套源码 前端UNIAPP 后端PHP 一键部署版本

Python浅谈清朝秋海棠叶版图

1、清朝疆域概述&#xff1a; 清朝是我国最后一个封建王朝&#xff0c;其始于1616年建州女真部努尔哈赤建立后金&#xff0c;此后统一女真各部、东北地区。后又降服漠南蒙古&#xff0c;1644年入关打败农民起义军、灭南明&#xff0c;削三藩&#xff0c;复台湾。后又收外蒙&am…

网络安全之防范钓鱼邮件

随着互联网的快速发展&#xff0c;新的网络攻击形式“网络钓鱼”呈现逐年上升的趋势&#xff0c;利用网络钓鱼进行欺骗的行为越来越猖獗&#xff0c;对互联网的安全威胁越来越大。网络钓鱼最常见的欺骗方式就是向目标群体发送钓鱼邮件&#xff0c;而邮件标题和内容&#xff0c;…

Qt配置CMake出错

一个项目需要在mingw环境下编译Opencv源码&#xff0c;当我用Qt配置opencv的CMakeLists.txt时&#xff0c;出现了以下配置错误&#xff1a; 首先我根据下述博文介绍&#xff0c;手动配置了CMake&#xff0c;但仍不能解决问题。 Qt(MinGW版本)安装 - 夕西行 - 博客园 (cnblogs.…

使用CNN实现新闻文本分类

一、实验目的&#xff1a; 理解卷积神经网络的基本概念和原理&#xff1b;了解卷积神经网络处理文本数据的基本方法&#xff1b;掌握卷积神经网络处理文本数据的实践方法&#xff0c;并实现新闻文本的分类任务。 实验要求&#xff1a; 使用Keras框架定义并训练卷积神经网络模…

【BFPTR】震惊!竟然还有比 快速排序 更快的算法...

在介绍 堆 和 加强堆 的文章中&#xff0c;我们探讨了当有新的元素加入时&#xff0c;如何实时更新前 K 个元素的方法。 &#xff08;还没学习过的小伙伴赶快关注&#xff0c;在 「堆」 合集里查看哦&#xff01;&#xff09; 今天我们介绍一种新的方法&#xff0c;使用 bfp…

【云计算】云数据中心网络(七):负载均衡

《云网络》系列&#xff0c;共包含以下文章&#xff1a; 云网络是未来的网络基础设施云网络产品体系概述云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC云数据中心网络&#xff08;二&#xff09;&#xff1a;弹性公网 IP云数据中心网络&#xff08;三&#xff09;…

QT C++ sqlite 对多个数据库的操作

//本文描述&#xff0c;QT 对多数据库的操作。 //你可能会想&#xff0c;多数据库的操作时&#xff0c;查询语句怎么知道是哪个数据库。 //QT提供了这样一种构造函数 QSqlQuery(const QSqlDatabase &db) //指定数据库 //在QT6.2.4 MSVC2019调试通过。 //效果见下图&am…