1# 如何通过上下滑动实现亮度和音量调节
2
3## 场景说明
4在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小,本例即为大家介绍如何实现上述UI效果。
5
6>  **说明:**
7>
8> 由于当前亮度和音量调节功能仅对系统应用开发,所以本例仅讲解UI效果的实现。
9
10
11## 效果呈现
12本例效果如下:
13- 当在屏幕左侧滑动时,可以调节亮度,上滑亮度提升,下滑亮度降低。
14- 当在屏幕右侧滑动时,可以调节音量,上滑音量增大,下滑音量减小。
15
16![set-volume-brightness](figures/set-volume-brightness.gif)
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)