ArkUI自定义TabBar组件

在ArkUI中的Tabs，通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。其中内容是图TabContent作为Tabs的自组件，通过给TabContent设置tabBar属性来自定义导航栏样式。现在我们就根据UI设计的效果图来实现下图效果：

根据上图分析可知，要实现以上效果需要下面这几步：

1、设置tabBar背景颜色，以及点击选中背景样式；

2、自定义导航栏指示器；

3、设置指示器跟随内容视图一起滑动切换效果。

设置tabBar背景颜色以及点击选中背景样式

1、首先我们需要使用@Builder修饰方法来表示这是一个自定义组件；

2、根据用户点击的tab索引和当前索引来设置背景图片和背景颜色，这里需要注意的是设置背景颜色的时候，注意左上角和右上角是有圆角的，需要根据索引判断是否展示圆角。

3、由于选中样式是带圆角的梯形，所以这里是用来3个不同的梯形切图。

@Builder
tabBuilder(title: string, targetIndex: number, selectImage: ResourceStr) {// 创建一个Column布局Column() {// 创建一个Text组件，显示标题Text(title)// 根据当前索引和目标索引判断字体颜色.fontColor(this.currentIndex === targetIndex ? $r("app.color.text_one") : $r("app.color.text_two"))// 设置字体大小为14.fontSize(14)// 根据当前索引和目标索引判断字体粗细.fontWeight(this.currentIndex === targetIndex ? 600 : 400)}// 设置Column的宽度为100%.width('100%')// 设置Column的高度为100%.height("100%")// 设置Column的子组件垂直居中对齐.justifyContent(FlexAlign.Center)// 根据当前索引和目标索引判断是否设置背景图片.backgroundImage(this.currentIndex == targetIndex ? selectImage : null)// 设置Column的背景颜色.backgroundColor($r("app.color.bg_data_color"))// 根据目标索引判断是否需要设置顶部左右圆角.borderRadius({ topLeft: targetIndex == 0 ? 8 : 0, topRight: targetIndex == 2 ? 8 : 0 })// 设置背景图片填充方式为填充整个容器.backgroundImageSize(ImageSize.FILL)
}

自定义导航栏指示器

由于指示器需要跟随内容视图一起滑动切换，所以指示器不能在单个tabBuilder中设置。

1、使用Column组件定义底部指示器，设置一个宽度为文字宽度，高度为3的蓝色指示器；

2、这里的指示器宽度可以动态设置成文字的宽度，也可以直接设置成文字某个固定宽度；

3、指示器距离左边的距离需要动态设置，配上动画，可以实现指示器跟随手指滑动。

Stack() {Tabs({ barPosition: BarPosition.Start }) {TabContent() {this.tripPage()}.tabBar(this.tabBuilder("房源", 0, $r("app.media.trip_data_start_bg"))).align(Alignment.TopStart).margin({ top: 54 })............}.backgroundColor($r("app.color.white")).borderRadius(8).barHeight(44).width("93.6%").height(380).onChange((index) => {this.currentIndex = index})//自定义指示器，设置一个宽度为文字宽度，高度为3的蓝色指示器Column().width(this.indicatorWidth).height(3).backgroundColor($r("app.color.main_color")).margin({ left: this.indicatorLeftMargin, top: 42 }).borderRadius(1)
}

添加指示器动画

要实现指示器跟随手指滑动，切换不同的tab，需要为指示器添加动画，监听Tabs动画开始和动画结束，以及手势监听。

/*** 启动动画至指定位置** @param duration 动画时长* @param leftMargin 动画结束后的左边距* @param width 动画结束后的宽度*/private startAnimateTo(duration: number, leftMargin: number, width: number) {// 设置动画开始标志为truethis.isStartAnimateTo = trueanimateTo({// 动画时长duration: duration, // 动画时长// 动画曲线curve: Curve.Linear, // 动画曲线// 播放次数iterations: 1, // 播放次数// 动画模式playMode: PlayMode.Normal, // 动画模式// 动画结束时的回调函数onFinish: () => {// 将动画开始标志设置为falsethis.isStartAnimateTo = false// 输出动画结束信息console.info('play end')}}, () => {// 设置指示器的左边距this.indicatorLeftMargin = leftMargin// 设置指示器的宽度this.indicatorWidth = width})}

1、动画开始的监听

Tab切换动画开始时，动画返回的目标索引设置为当前索引，调用startAnimateTo方法，给指示器设置动画，动态设置指示器的左边距。

  Tabs({ barPosition: BarPosition.Start }) {}.onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {// 切换动画开始时触发该回调。指示器跟着页面一起滑动。this.currentIndex = targetIndexthis.startAnimateTo(this.animationDuration, this.textInfos[targetIndex][0], this.textInfos[targetIndex][1])})

2、动画结束的监听

tab切换动画结束时，回触发onAnimationEnd监听。

  Tabs({ barPosition: BarPosition.Start }) {}.onAnimationEnd((index: number, event: TabsAnimationEvent) => {// 切换动画结束时触发该回调。指示器动画停止。let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)})

3、手势滑动监听

在页面跟手滑动过程中，逐帧触发该回调。

 Tabs({ barPosition: BarPosition.Start }) {}
.onGestureSwipe((index: number, event: TabsAnimationEvent) => {// 在页面跟手滑动过程中，逐帧触发该回调。let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)//设置当前索引this.currentIndex = currentIndicatorInfo.index//设置指示器距离左边间距this.indicatorLeftMargin = currentIndicatorInfo.left//指示器宽度设置this.indicatorWidth = currentIndicatorInfo.width})

封装获取指示器信息方法，返回指示器的索引，左边距和指示器宽度，在手势滑动监听中调用该方法，可以动态获取指示器的左边距，配合动画，可以实现指示器跟随手势滑动。从而实现UI设计效果。

/*** 获取当前指示器信息** @param index 当前索引* @param event Tabs动画事件* @returns 包含指示器索引、左边距和宽度的对象*/private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {// 当前Tab的索引let nextIndex = index// 如果当前索引大于0且滑动偏移量大于0，表示向左滑动，将nextIndex减1if (index > 0 && event.currentOffset > 0) {nextIndex--}// 如果当前索引小于3且滑动偏移量小于0，表示向右滑动，将nextIndex加1else if (index < 3 && event.currentOffset < 0) {nextIndex++}// 获取当前索引对应的Tab信息let indexInfo = this.textInfos[index]// 获取nextIndex对应的Tab信息let nextIndexInfo = this.textInfos[nextIndex]// 计算滑动比例let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)// 如果滑动比例大于0.5，则将currentIndex设为nextIndex，表示切换到下一页的tabBar// 页面滑动超过一半，tabBar切换到下一页。let currentIndex = swipeRatio > 0.5 ? nextIndex : index// 根据滑动比例计算当前Tab的左边距let currentLeft = indexInfo[0] + (nextIndexInfo[0] - indexInfo[0]) * swipeRatio// 根据滑动比例计算当前Tab的宽度let currentWidth = indexInfo[1] + (nextIndexInfo[1] - indexInfo[1]) * swipeRatio// 返回包含当前Tab索引、左边距和宽度的对象return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }}