1# 如何通过上下滑动实现亮度和音量调节 2 3## 场景说明 4在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小,本例即为大家介绍如何实现上述UI效果。 5 6> **说明:** 7> 8> 由于当前亮度和音量调节功能仅对系统应用开发,所以本例仅讲解UI效果的实现。 9 10 11## 效果呈现 12本例效果如下: 13- 当在屏幕左侧滑动时,可以调节亮度,上滑亮度提升,下滑亮度降低。 14- 当在屏幕右侧滑动时,可以调节音量,上滑音量增大,下滑音量减小。 15 16 17 18## 环境要求 19 20本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发: 21 22- IDE: DevEco Studio 4.0 Release 23- SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release) 24 25 26## 实现思路 27本例中几个关键的功能点及其实现思路如下: 28- 区分屏幕左右两侧的滑动,从而使其触发不同效果:通过识别触摸点的坐标(event.fingerList[0].localX)来判断滑动是在左侧还是右侧。 29- 区分滑动是上滑还是下滑:通过触摸点在Y轴方向的偏移量(event.offsetY)来识别上滑还是下滑。 30- 上滑和下滑控制亮度和音量的大小:亮度和音量的大小使用环形进度条(Progress组件)来呈现,通过滑动改变Progress的value值。 31 32## 开发步骤 33开发步骤仅呈现关键代码,全量代码请参考完整代码章节;另外,开发者在运行时需要将本例中使用的图片等资源替换为本地资源。 341. 搭建UI框架。 35 ```ts 36 Column(){ 37 // 添加需要呈现的文本 38 Row(){ 39 Text('左侧滑动') 40 Text('右侧滑动') 41 } 42 Stack(){ 43 // 亮度调节UI 44 Image($r('app.media.ic_brightness')) 45 Progress({value:this.bright,type:ProgressType.Ring}) 46 // 音量调节UI 47 Image($r('app.media.ic_volume')) 48 Progress({value:this.volume,type:ProgressType.Ring}) 49 } 50 } 51 ``` 522. 为Column组件添加触摸手势,并通过触摸点的坐标区分左侧滑动和右侧滑动。左右两侧的分界点可以根据屏幕尺寸自行设置,本例采用200为分界点。 53 ```ts 54 Column(){ 55 //... 56 } 57 .gesture( 58 GestureGroup(GestureMode.Exclusive, 59 // 添加触摸手势,并通过direction控制手势滑动方向为上下滑动 60 PanGesture({direction:PanDirection.Vertical}) 61 .onActionUpdate((event?:GestureEvent)=>{ 62 // 通过event.fingerList[0].localX获取触摸点的横坐标 63 this.fingerPosition = event.fingerList[0].localX 64 65 // 当触摸点的横坐标>200时,判定触摸点在屏幕右侧,控制音量 66 if (this.fingerPosition > 200){ 67 //... 68 } 69 // 当触摸点的横坐标<200时,判定触摸点在屏幕左侧,控制亮度 70 if (this.fingerPosition < 200){ 71 //... 72 } 73 }), 74 ) 75 ) 76 ``` 773. 通过触摸点在Y轴方向的偏移量来识别上滑和下滑。 78 ```ts 79 Column(){ 80 // ... 81 } 82 .gesture( 83 GestureGroup(GestureMode.Exclusive, 84 PanGesture({direction:PanDirection.Vertical}) 85 .onActionUpdate((event?:GestureEvent)=>{ 86 this.fingerPosition = event.fingerList[0].localX 87 // 当触摸点在Y轴方向的偏移量<0时,滑动方向为上滑 88 if (event.offsetY < 0){ 89 // ... 90 // 反之,滑动方向为上滑 91 }else{ 92 // ... 93 } 94 }), 95 ) 96 ) 97 ``` 984. 手势识别之后,通过手势控制Progress的value值,从而调节亮度和音量的大小。 99 ```ts 100 Column(){ 101 // ... 102 Stack(){ 103 // 亮度调节UI 104 if (this.fingerPosition != 0 && this.fingerPosition < 200){ 105 // 通过变量bright控制亮度进度条的变化 106 Progress({value:this.bright,type:ProgressType.Ring}) 107 // 音量调节UI 108 }else if (this.fingerPosition != 0 && this.fingerPosition > 200){ 109 // 通过变量volume控制音量进度条的变化 110 Progress({value:this.volume,type:ProgressType.Ring}) 111 } 112 } 113 } 114 .gesture( 115 GestureGroup(GestureMode.Exclusive, 116 PanGesture({direction:PanDirection.Vertical}) 117 .onActionUpdate((event?:GestureEvent)=>{ 118 this.fingerPosition = event.fingerList[0].localX 119 // 向上滑动 120 if (event.offsetY < 0){ 121 // 触摸点在屏幕右侧 122 if (this.volume < 100 && this.fingerPosition > 200){ 123 // 音量值增加 124 this.volume += 1 125 } 126 // 触摸点在屏幕左侧 127 if (this.bright < 100 && this.fingerPosition < 200){ 128 // 亮度值增加 129 this.bright += 1 130 } 131 // 向下滑动 132 }else{ 133 // 触摸点在屏幕右侧 134 if (this.volume > 0 && this.fingerPosition > 200){ 135 // 音量值减小 136 this.volume -= 1 137 } 138 // 触摸点在屏幕左侧 139 if (this.bright > 0 && this.fingerPosition < 200){ 140 // 亮度值减小 141 this.bright -= 1 142 } 143 } 144 }), 145 ) 146 ) 147 ``` 148 149## 完整代码 150 151本例完整代码如下: 152 153```ts 154// xxx.ets 155@Entry 156@Component 157struct ChangeVolume{ 158 @State volume:number = 0 159 @State bright:number = 0 160 @State fingerPosition:number = 0 161 build(){ 162 Column(){ 163 // 添加需要呈现的文本 164 Row(){ 165 if (this.fingerPosition != 0 && this.fingerPosition < 200){ 166 Text('左侧滑动') 167 .fontColor('#FD836E') 168 .fontSize(20) 169 .textAlign(TextAlign.Start) 170 .width('85%') 171 } 172 if (this.fingerPosition != 0 && this.fingerPosition > 200){ 173 Text('右侧滑动') 174 .fontColor('#0AAF88') 175 .fontSize(20) 176 .textAlign(TextAlign.End) 177 .align(Alignment.End) 178 .width('100%') 179 } 180 } 181 .width('90%') 182 .height('50%') 183 .alignItems(VerticalAlign.Bottom) 184 Stack(){ 185 // 亮度调节UI 186 if (this.fingerPosition != 0 && this.fingerPosition < 200){ 187 Image($r('app.media.ic_brightness')) 188 .width(100) 189 .aspectRatio(1.0) 190 Progress({value:this.bright,type:ProgressType.Ring}) 191 .color('#FD836E') 192 .width(105) 193 .aspectRatio(1.0) 194 // 音量调节UI 195 }else if (this.fingerPosition != 0 && this.fingerPosition > 200){ 196 Image($r('app.media.ic_volume')) 197 .width(100) 198 .aspectRatio(1.0) 199 Progress({value:this.volume,type:ProgressType.Ring}) 200 .color('#0AAF88') 201 .width(105) 202 .aspectRatio(1.0) 203 } 204 } 205 .width('100%') 206 .height('40%') 207 } 208 .width('100%') 209 .height('100%') 210 .gesture( 211 GestureGroup(GestureMode.Exclusive, 212 // 添加触摸手势,并通过direction控制手势滑动方向为上下滑动 213 PanGesture({direction:PanDirection.Vertical}) 214 .onActionUpdate((event?:GestureEvent)=>{ 215 // 通过event.fingerList[0].localX获取触摸点的横坐标 216 this.fingerPosition = event.fingerList[0].localX 217 // 向上滑动 218 if (event.offsetY < 0){ 219 // 触摸点在屏幕右侧 220 if (this.volume < 100 && this.fingerPosition > 200){ 221 // 音量值增加 222 this.volume += 1 223 } 224 // 触摸点在屏幕左侧 225 if (this.bright < 100 && this.fingerPosition < 200){ 226 // 亮度值增加 227 this.bright += 1 228 } 229 // 向下滑动 230 }else{ 231 // 触摸点在屏幕右侧 232 if (this.volume > 0 && this.fingerPosition > 200){ 233 // 音量值减小 234 this.volume -= 1 235 } 236 // 触摸点在屏幕左侧 237 if (this.bright > 0 && this.fingerPosition < 200){ 238 // 亮度值减小 239 this.bright -= 1 240 } 241 } 242 }), 243 ) 244 ) 245 } 246} 247``` 248 249## 参考 250- [Progress组件指南](../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-progress.md) 251- [PanGesture手势指南](../application-dev/reference/apis-arkui/arkui-ts/ts-basic-gestures-pangesture.md) 252- [GestureEvent手势对象说明](../application-dev/reference/apis-arkui/arkui-ts/ts-gesture-settings.md)