如何通过上下滑动实现亮度和音量调节(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})}
    }
  2. 为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){//...}}),)
    )
    
  3. 通过触摸点在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{// ...}}),)
    )
  4. 手势识别之后,通过手势控制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}}}),))}
}

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术,这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看:https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. 应用开发导读(Java)

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

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

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

相关文章

打破空间限制,畅享真实生活

直播已经成为了当今社会中非常流行的一种娱乐方式&#xff0c;也是人们获取信息和互动的重要渠道之一。而无绿幕直播&#xff0c;则是近年来兴起的一种特殊形式&#xff0c;它打破了以往直播的空间限制&#xff0c;让观众们能够更贴近主播&#xff0c;更真实地感受到直播背后的…

2-rabbitmq-发布订阅、发布订阅高级之Routing(按关键字匹配)、发布订阅高级之Topic(按关键字模糊匹配)、基于rabbitmq实现rpc

1 发布订阅 2 发布订阅高级之Routing(按关键字匹配) 2.1 发布订阅高级之Topic(按关键字模糊匹配) 3 基于rabbitmq实现rpc 1 发布订阅 发布者 import pika credentials pika.PlainCredentials("admin","admin") connection pika.BlockingConnection(pik…

昇腾910安装驱动出错,降低Centos7.6的内核版本

零、问题描述&#xff1a; 在安装Atlas800-9000服务器的驱动的时候&#xff0c;可能会出现错误&#xff1a;Dkms install failed, details in : /var/log/ascend_seclog/ascend_install.log 如下所示&#xff1a; [rootlocalhost ~]# ./Ascend-hdk-910-npu-driver_23.0.rc3_l…

Git远程操作

目录 1.远程操作 1.1理解分布式版本控制系统 1.2远程仓库. 1.2.1新建远程仓库 1.2.2克隆远程仓库 1.2.3向远程仓库推送 1.2.4拉取远程仓库 1.3配置Git 1.3.1忽略特殊文件 1.3.2给命令配置别名 2.标签管理 2.1理解标签 2.2创建标签 2.3操作标签 1.远程操作 1.1理…

MacOS上配置Jenkins开机自启动

之前文章有写过&#xff0c;如何在Windows环境下&#xff0c;通过vbsbat脚本的组合拳实现Jenkins的开机自启动&#xff0c;最近换了电脑&#xff0c;又要搭建Jenkins了&#xff0c;顺带整理分享下MacOS上配置Jenkins开机自启动的方法。 具体配置步骤&#xff1a; 打开终端应用…

HTTP深度解析:构建高效与安全网络的关键知识

1. HTTP基础及其组件 我首先想和大家分享的是HTTP的基础知识。HTTP&#xff0c;即超文本传输协议&#xff0c;是互联网上最常用的协议之一。它定义了浏览器和服务器之间数据交换的规则&#xff0c;使得网页内容可以从服务器传输到我们的浏览器上。想象一下&#xff0c;每当你点…

Eclipse 将已有maven工程转为微服务

以下是将已有Maven工程转为微服务的步骤&#xff1a; 将已有的Maven工程中的每个模块作为独立的服务&#xff0c;每个模块都需要有独立的pom.xml文件&#xff0c;以便进行单独的构建和部署。 引入Spring Boot和Spring Cloud的依赖&#xff0c;以便于实现微服务化的相关功能&am…

为 PHP 引入 Python 生态的经验分享

编译安装 phpy 可以作为 PHP 的扩展,也可以作为 Python 的 C 模块。既可以在 PHP 代码中调用 Python 的库,也可以在 Python 中调用 PHP 的类和函数。 作为 Python 模块时依赖 PHP 的 embed SAPI ,检查 PHP 的目录中,确保存在 libphp.so ll /opt/php-8.…

19-数据结构-查找-散列查找

目录 一、散列查找结构思路图 二、哈希函数 三、解决冲突 1.开放地址法 1.1.线性探测法&#xff08;线性探测再散列法&#xff09; 1.2.平方探测法&#xff08;二次探测再散列&#xff09; 1.3.再散列法&#xff08;双散列法&#xff09; 2.拉链法 2.1简介 四、散列查…

如何在nacos中的配置在不同的环境服务下可实现配置共享

其实在微服务启动时&#xff0c;会去nacos读取多个配置文件&#xff0c;例如&#xff1a; [spring.application.name].yaml&#xff0c;例如&#xff1a;nacos-order-service.yaml[spring.application.name]-[spring.profiles.active].yaml&#xff0c;例如&#xff1a;nacos-o…

区块链技术的未来,了解去中心化应用的新视角

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随着…

12月12日作业

设计一个闹钟 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include <QTime> #include <QTextToSpeech>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass …

Linux实用操作(超级实用)

Linux实用操作篇-上篇&#xff1a;Linux实用操作-上篇-CSDN博客 Linux实用操作篇-下篇&#xff1a;Linux实用操作篇-下篇-CSDN博客 一、各类小技巧&#xff08;快捷键&#xff09; 1.1 ctrl c 强制停止 Linux某些程序的运行&#xff0c;如果想要强制停止它&#xff0c;可以…

VCG 标记使用(BitFlags)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 对于网格的每个单形,我们都有一个称为BitFlags的组件,该组件存储固定大小的32位向量,用于各种需求。管理这些标志的相关类:vcg::tri::UpdateFlags与vcg::tri::UpdateSelection。主要的标记有:删除标记、边界标记…

配置android sudio出现的错误

导入demo工程&#xff0c;配置过程参考&#xff1a; AndroidStudio导入项目的正确方式&#xff0c;修改gradle配置 错误&#xff1a;Namespace not specified. Specify a namespace in the module’s build file. 并定位在下图位置&#xff1a; 原因&#xff1a;Android 大括号…

使用docker编排容器

使用Dockerfile构建一个自定义的nginx 首先用docker拉一个nginx镜像 docker pull nginx拉取完成后&#xff0c;编辑一个Dockerfile文件 vim Dockerfile命令如下所示,FROM 后面跟的你的基础镜像&#xff0c;而run则是表示你构建镜像时需要执行的指令&#xff0c;下面的指令意…

day16_java多线程(入门了解)

多线程入门 一、线程和进程 进程 进程&#xff1a;是指一个内存中运行的应用程序&#xff0c;每个进程都有一个独立的内存空间和系统资源&#xff0c;一个应用程序可以同时运行多个进程&#xff1b;进程也是程序的一次执行过程&#xff0c;是系统运行程序的基本单位&#xff1…

Argon-Theme 轻盈、简洁、美观的 WordPress 主题-供大家学习研究参考

特性 轻盈美观 - 使用 Argon Design System 前端框架,细节精致,轻盈美观高度可定制化 - 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等,提供了丰富的自定义选项夜间模式 - 支持日间、夜间、纯黑三种模式…

12.12

do_irq.c #include "key_it.h" int flag10; int flag20; int flag30; extern void printf(const char *fmt, ...); unsigned int i 0; void do_irq(void) {// 获取中断号&#xff0c;根据中断号的不同进行不同的中断处理int irqno;irqno GICC->IAR & 0x3ff…

【Flink on k8s】 -- flink kubernetes operator 1.7.0 发布

目录 前言 重大特性 1、自动伸缩 2、版本支持 3、savepoint 触发改进 4、jdk 支持 前言 Flink 官方博客于 2023-11-22 发布了 flink kubernetes operator 1.7.0 发布的消息。这个版本对自动缩放进行了大量的改进&#xff0c;包括与 Kubernetes 的完全分离&#xff0c;以便…