鸿蒙开发：自定义一个剪辑双滑块组件

前言

前段时间有小伙伴说了一个需求，实现一个音轨剪辑的功能，奈何工作繁忙，迟迟没有时间来搞，非常抱歉，如今有了一点闲暇时间，便动手实现了一下，希望可以帮助到有这方面需求的朋友。

既然是一个剪辑截取的功能，音频也好，视频也好，大同小异，无非就是轨道不一，进度不一，但拖拽的滑块都是相似的，除了常见的音视频使用之外，有双向滑动需求的场景也是可以满足的。

目前简单的实现效果如下，颜色等各种样式都可以动态设置。

本文的大致内容如下：

1、如何实现这样一个双滑块组件

2、代码实现概述

3、开源地址及功能使用

4、相关总结

一、如何实现这样一个双滑动组件

首先是UI视图，这里可以分为三层或者两层，三层的话，底部的轨道是一层，边框是一层，两个滑块是一层，两层的话，底部的轨道和边框是一层，上层的两个滑块是一层。

最重要的就是两个滑块的手势，滑块除了要跟着手势移动之外，还要记录上次手势抬起的位置，便于连续的进行滑动，这里建议采用onTouch事件，而非gesture事件，原因onTouch记录坐标更加准确，且能顺滑的移动组件。

实现上需要注意，左右两个滑块需要设置最大和最小阀门，也就是说，左不能滑动超过右的位置，同样，右也不能滑动超过左的位置，当然，也不能超过轨道左右的位置。

由于滑动显示的是坐标，需要用坐标和轨道的整体的宽度进行计算得出最后的百分比，这一点需要注意。

二、代码实现概述

这里代码上，我也是按照一中所述，分为了三层，底层轨道，中层边框，上层滑块。

大家尽量不要用我默认的轨道，因为默认的只是简单的实现了音轨，并没有根据视频或者音频的频率来进行绘制，所以并不太满足实际的开发需求，所以，针对此，我抛出了一个传递视图的方法，大家可以实现这个方法来传递自己的组件。

底层轨道

@BuilderParam trackLayout?: (leftProgress: number, rightProgress: number, viewWidth: number) => void //自定义的轨道

//自定义轨道

if (this.trackLayout != undefined) {

this.trackLayout(this.leftProgress, this.rightProgress, this.viewWidth)

} else {

TrackView({

leftProgress: this.leftProgress,

rightProgress: this.rightProgress,

viewWidth: this.viewWidth,

trackAlignmentWidth: this.trackAlignmentWidth,

trackSelectColor: this.trackSelectColor,

trackNormalColor: this.trackNormalColor

})

}

在业务层，实现trackLayout即可，可以根据左右的进度，还有组件的宽度来实现一些特殊的样式。

//轨道视图，可以自行定义

@Builder

trackLayout(leftProgress: number, rightProgress: number, viewWidth: number) {

}

中层边框

中层边框没啥好说的，就是一个简单的边框，当然了，这个我也抛出了方法，可以自行设置边框。

if (this.trackBgLayout != undefined) {

this.trackBgLayout()

} else {

Column().width("100%")

.height("100%")

.border(this.trackBgBorder)

}

上层滑块

上层滑块，最主要就是控制其滑块的手势，无论左还是右，一定要记录上次抬起的坐标，另外就是控制左右的最大移动距离，其它的到没什么了，主要代码如下：

Column() {

if (this.leftPointerLayout != undefined) {

this.leftPointerLayout()

} else {

Divider()

.strokeWidth(this.pointerLineWidth)

.height(this.pointerLineHeight)

.vertical(true)

.lineCap(this.pointerLineCap)

.color(this.pointerLineColor)

}

}

.width(this.pointerWidth)

.height(this.pointerHeight)

.justifyContent(FlexAlign.Center)

.borderRadius(this.leftPointerBorder)

.backgroundColor(this.leftPointerBgColor)

.margin({ left: this.trackMarginLeft })

.onTouch((event) => {

switch (event.type) {

case TouchType.Down: //手指按下

this.pointerLeftMargin = event.touches[0].x

break;

case TouchType.Move: //移动

let rightMargin = this.viewWidth - this.trackMarginRight - Number(this.pointerWidth)

let upData = event.touches[0].displayX

let moveX = upData - this.viewMarginLeft

let pointerValue = moveX - this.pointerLeftMargin

if (pointerValue >= 0 && (pointerValue + Number(this.pointerWidth)) <= rightMargin) {

//左边的View不能超过右边的距离

this.trackMarginLeft = pointerValue

}

let percentage = this.trackMarginLeft / (this.viewWidth - Number(this.pointerWidth) * 2) //百分比

let progress = Math.round(percentage * 100) //进度

this.leftProgress = progress

if (this.onLeftProgress != undefined) {

this.onLeftProgress(progress)

}

break

case TouchType.Up: //手指弹起

if (this.onLeftEndProgress != undefined) {

this.onLeftEndProgress(this.leftProgress)

}

break

}

})

三、开源地址及功能使用

中心仓库地址

为了更好的让大家使用，目前已经提交至了中心仓库，大家可以远程直接使用。

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Ftrack

快速使用

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

ohpm install @abner/track

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "@abner/track": "^1.0.0"}

相关功能

1、普通使用

TrackProgress({

pointerWidth: 20,

onLeftProgress: (progress: number) => {

console.log("===左侧指针进度：" + progress)

},

onRightProgress: (progress: number) => {

console.log("===右侧指针进度：" + progress)

}

})

2、获取进度

TrackProgress({

pointerWidth: 20,

onLeftProgress: (progress: number) => {

console.log("===左侧指针进度：" + progress)

},

onRightProgress: (progress: number) => {

console.log("===右侧指针进度：" + progress)

}

})

3、更改颜色

TrackProgress({

pointerWidth: 20,

leftPointerBgColor: Color.Orange,

rightPointerBgColor: Color.Orange,

trackSelectColor: Color.Orange,

trackBgBorder: { width: 1, color: Color.Orange, radius: 5 },

onLeftProgress: (progress: number) => {

console.log("===左侧指针进度：" + progress)

},

onRightProgress: (progress: number) => {

console.log("===右侧指针进度：" + progress)

}

})

4、自定义滑块

TrackProgress({

pointerWidth: 20,

leftPointerLayout: this.pointerLayout,

rightPointerLayout: this.pointerLayout,

onLeftProgress: (progress: number) => {

console.log("===左侧指针进度：" + progress)

},

onRightProgress: (progress: number) => {

console.log("===右侧指针进度：" + progress)

}

})

5、自定义轨道

TrackProgress({

pointerWidth: 20,

trackLayout: this.trackLayout,

trackBgLayout: this.trackBgLayout,

onLeftProgress: (progress: number) => {

console.log("===左侧指针进度：" + progress)

},

onRightProgress: (progress: number) => {

console.log("===右侧指针进度：" + progress)

}

})

相关属性

四、相关总结

目前左滑块还有右滑块，返回都是百分比，在实际的开发中，两边有可能是时间，那么就需要根据进度计算当前滑动的时间。

很多剪辑的场景，会有多个剪辑片段，比如分割，那么就会出现多个轨道剪辑，在实际的需求中，对于整个轨道的创建，也需要动态的配置，也就是具体问题具体分析。