基于鸿蒙API10的RTSP播放器(八：音量和亮度调节功能的整合）

一、前言：

笔者在前面第六、七节文章当中，分别指出了音量和屏幕亮度的前置知识，在本节当中，我们将一并实现这两个功能，从而接续第五节内容。本文的逻辑分三大部分，先说用到的变量，再说界面，最后说功能。

其中音量功能，是设置的系统音量，而不是视频音量；其中亮度功能，是设置的应用亮度，而非系统亮度，请注意两者的区别。

亮度功能使用brightness库获取系统亮度值，在初始化亮度值，然后根据触摸情况通过window库设置亮度值

音量功能通过audio库，初始化音量值，根据触摸情况设置音量值

文中代码均是ArkTS代码，使用TS标志，是为了有颜色，好看，嘿嘿！

以下是效果图，即我手指左边垂直向下滑动时，出现亮度调节图标和进度条。

以下是效果图，即我手指右边垂直向下滑动时，出现音量调节图标和进度条。

二、状态变量：

TS 复制代码

// 以下代码均放在struct yourPageName{}结构体内，但在build(){}函数之外


// 控制图标和进度条是否显示  
@State volumeVisible:boolean = false;  
@State brightVisible: boolean = false;  
  
// 音量和亮度值  
@State volume:number = 0;  
@State bright:number = 50;  
  
// 手指触点横坐标位置  
@State fingerPosition:number = 0;  
  
// 屏幕一半宽度，我这里是500px  
@State halfDeviceWidth:number = 500;  
  
// 根据全局变量获得窗口控制器 ,这里需要提前在EntryAbility中设置全局变量，并把windowStage放进去，代码附下
windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;  
// 获取主窗口的方式  
mainWin: window.Window = this.windowStage.getMainWindowSync();

TS 复制代码

import AbilityConstant from '@ohos.app.ability.AbilityConstant';  
import hilog from '@ohos.hilog';  
import UIAbility from '@ohos.app.ability.UIAbility';  
import Want from '@ohos.app.ability.Want';  
import window from '@ohos.window';  
import { BusinessError } from '@kit.BasicServicesKit';  
  
  
export default class EntryAbility extends UIAbility {  
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  
  }  
  
  onDestroy(): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  
  }  
  
  onWindowStageCreate(windowStage: window.WindowStage): void {  
    // Main window is created, set main page for this ability  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  
  
    console.log('onWindowStageCreate');  
    // 这里设置全局变量，把我们需要的窗体控制器放进去
    AppStorage.setOrCreate('windowStage',windowStage);  
  
    windowStage.loadContent('pages/Index', (err) => {  
      if (err.code) {  
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  
        return;  
      }  
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');  
    });  
  }  
  
  onWindowStageDestroy(): void {  
    // Main window is destroyed, release UI related resources  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  
  }  
  
  onForeground(): void {  
    // Ability has brought to foreground  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');  
  }  
  
  onBackground(): void {  
    // Ability has back to background  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');  
  }  
}

三、界面逻辑：**

这里使用了Stack组件，按照栈概念，可以将图片和进度条在同一时刻一起显示。可以看到笔者这里设置了if语句中的三个变量，分别判断触摸点是否移动，触摸点在屏幕左边还是右边，是否显示。

TS 复制代码

Stack(){  
    // 亮度调节UI  
  if (this.fingerPosition != 0 && this.fingerPosition < this.halfDeviceWidth && this.brightVisible){  
    Image($r('app.media.ic_bright_white'))  
      .width(50)  
      .aspectRatio(1.0)  
    Progress({value:this.bright,total:100,type:ProgressType.Ring})  
      .color('#ffffffff')  
      .width(100)  
      .aspectRatio(1.0)  
    // 音量调节UI  
  }else if (this.fingerPosition != 0 && this.fingerPosition > this.halfDeviceWidth && this.volumeVisible){  
    Image($r('app.media.ic_volume_white'))  
      .width(50)  
      .aspectRatio(1.0)  
    Progress({value:this.volume,total: 20,type:ProgressType.Ring})  
      .color('#ffffffff')  
      .width(100)  
      .aspectRatio(1.0)  
  }  
}  // Stack组件可以自行调节，这段代码也可以嵌入进其他代码中，里面的图片随便找一个就好了
.width('100%')  
.height('40%')  
.backgroundColor(Color.Black)

四、功能逻辑：

我们需要在页面渲染之前完成一些初始化的工作，包括主窗体的获取，音量的初始化，亮度的初始化。

当然，也可以直接在第一部分定义变量的时候直接赋值，但直接赋值的弊端就是，以音量调节为例，进度条每次从设置的音量值开始变化，而不是从系统本来的值开始变化。笔者这里的初始化代码附下

TS 复制代码

// 此函数是生命周期函数，在struct yourPageName(){}中，build(){}之外
aboutToAppear() {  

 // 初始化音量
  audioManager.getVolume(audio.AudioVolumeType.MEDIA, (err: BusinessError, value: number) => {  
    if (err) {  
      console.error(`Failed to obtain the volume. ${err}`);  
      return;  
    }  
    this.volume = value;  
    console.info('Callback invoked to indicate that the volume is obtained:'+value);  
  });  
  //
    
//  音量初始化，这里代码笔者注释了，选择在定义变量的时候直接赋值0.5
// brightness.getValue({  
//   success: (data: BrightnessResponse) => {  
//     console.log('success get brightness value:' + data.value);  
//     // brightness库中获取的亮度值介于0到255，而window库中设置的亮度值介于0到1，这里在做转换  
//     this.bright = ((data.value/255)*10)%10  
//     try {  
//       this.mainWin.setWindowBrightness(this.bright, (err) => {  
//         if (err.code) {  
//           console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err));  
//           return;  
//         }  
//         console.info('Succeeded in setting the brightness.');  
//       });  
//     } catch (exception) {  
//       console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception));  
//     }  
//   },  
//   fail: (data: string, code: number) => {  
//     console.error('get brightness fail, code: ' + code + ', data: ' + data);  
//   }  
// });


// 初始化主窗体
  this.windowStage = AppStorage.get('windowStage') as window.WindowStage;  
  // 获取主窗口的方式  
  this.mainWin = this.windowStage.getMainWindowSync();  
  // 获取最上层窗口的方式  
  // window.getLastWindow(getContext(this));  
  

}

为上面的Stack组件添加触摸事件，具体功能见代码注释，这里面的try-catch语句主要方便调试，代码如果可以正常运行的话，直接去掉try-catch语句和日志打印，那么代码可以很简介。里面最核心的函数是if语句。

TS 复制代码

Stack(){
	//代码上面有，此处省略
}
.gesture(  
  GestureGroup(GestureMode.Exclusive,  
    // 添加触摸手势，并通过direction控制手势滑动方向为上下滑动  
    PanGesture({direction:PanDirection.Vertical})  
      .onActionStart((event: GestureEvent) => {  
        // 获取屏幕宽度和高度，便于后面的手势操作  
        if (event.fingerList[0].localX < this.halfDeviceWidth) {  
          this.brightVisible = true;  
        } else {  
          this.volumeVisible = true;  
        }  
      })  
      .onActionEnd(() => {  
        // 当手指离开屏幕时，清除currentIcon状态和关闭图标/进度条  
        this.volumeVisible = false;  
        this.brightVisible = false;  
      })  
      .onActionUpdate((event?:GestureEvent| undefined)=>{  
  
        // 取得系统亮度，为this.bright赋初值  
        if (!event) return; // 如果 event 是 undefined，直接返回，不执行后续代码  
        // 通过event.fingerList[0].localX获取触摸点的横坐标  
        this.fingerPosition = event.fingerList[0].localX  
        // 向上滑动  
        if (event.offsetY < 0){  
          // 触摸点在屏幕右侧  
          if (this.volume < 20 && this.fingerPosition > this.halfDeviceWidth){  
            // 音量值增加  
            this.volume += 0.2  
            audioManager.setVolume(audio.AudioVolumeType.MEDIA, this.volume, (err: BusinessError) => {  
              if (err) {  
                console.error(`Failed to set the volume. ${err}`);  
                return;  
              }  
              console.info('Callback invoked to indicate a successful volume setting.');  
            });  
          }  
          // 触摸点在屏幕左侧  
          if (this.bright < 100 && this.fingerPosition < this.halfDeviceWidth){  
            // 亮度值增加  
            this.bright += 1  
            try {  
              this.mainWin.setWindowBrightness(this.bright / 100 , (err) => {  
                if (err.code) {  
                  console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err));  
                  return;  
                }  
                console.info('Succeeded in setting the brightness.');  
              });  
            } catch (exception) {  
              console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception));  
            }  
          }        // 向下滑动  
        }else{  
          // 触摸点在屏幕右侧  
          if (this.volume > 0 && this.fingerPosition > this.halfDeviceWidth){  
            // 音量值减小  
            this.volume -= 0.2  
            audioManager.setVolume(audio.AudioVolumeType.MEDIA, this.volume, (err: BusinessError) => {  
              if (err) {  
                console.error(`Failed to set the volume. ${err}`);  
                return;  
              }  
              console.info('Callback invoked to indicate a successful volume setting.');  
            });  
          }  
          // 触摸点在屏幕左侧  
          if (this.bright > 0 && this.fingerPosition < this.halfDeviceWidth){  
            // 亮度值减小  
            this.bright -= 1  
            try {  
              this.mainWin.setWindowBrightness(this.bright / 100 , (err) => {  
                if (err.code) {  
                  console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err));  
                  return;  
                }  
                console.info('Succeeded in setting the brightness.');  
              });  
            } catch (exception) {  
              console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception));  
            }  
          }        
        }      
    }),  
  )  
)