鸿蒙5.0开发进阶：自定义视图实现Tab效果案例

往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

介绍

本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果

效果预览图

使用说明

1.左右滑动tab，背景条跟随手势一起滑动，并且长度逐渐变长然后减小。当tab滑动距离不足一半时，会自动回弹，而当tab滑动距离大于一半时，背景条则会移动到下一个页签。当背景条达到一定距离以后 通过移动列表进行滑动，目的是使页签始终能够保持在可视范围内。

2.选中页签字体放大加粗，起到强调作用。

3.点击页签进行页签切换。

4.滑动列表，背景条也会随之一起滑动，然后滑动tab，列表会滑动回背景条所处的位置一起滑动。

实现思路

本案例的功能实现主要可以分为两个部分：第一个是点击页签的切换，第二个是滑动tab的切换。在后续两小节将对以上两个部分进行详细介绍。然后，我们展示了一些重要的变量名及其含义。

• maxListOffset：页签条最大偏移距离
• maxIndicatorBarLeft： 背景条最大偏移距离
• AnimationAttribute.left：背景条位置

1.核心函数getScrollInfo

由于我们将页签动画效果分为两种不同类型的滑动，因此需要实现一个函数以分别获取每个页签对应的背景条位置以及页签条滑动偏移。

1.1 背景条最大滑动距离以及页签条最大滑动距离

首先，我们需要了解两个概念：背景条最大滑动距离以及页签条最大滑动距离，如下图所示。

<