鸿蒙HarmonyOS 5.0开发实战：自定义TabBar实现案例

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

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

自定义TabBar页签案例

先容

TabBar在大部分的APP当中都能够使用到，差别的APP可能存在不一样的TabBar样式，Tab组件自带的TabBar属性对于部分效果无法满意，如页签中间显示一圈圆弧外轮廓等， 因此我们需要去自己定义一个TabBar页签来满意开发的需要。
效果图预览

使用说明：

• 依次点击tabBar页面，除了社区图标之外，其它图标往上移动一小段距离。
  

下载安装

1.模块oh-package.json5文件中引入依赖

1. "dependencies": {
2.   "customtabbar": "har包地址"
3. }

复制代码

2.ets文件import自定义视图实现Tab效果组件

1. import { CustomTabBar } from 'customtabbar';

复制代码

快速使用

本章节主要先容了如何快速使用自定义视图来实现Tab效果组件，包括数据源的初始化以及Tab自定义组件的构建。

• 初始化tab数据源。数据源的范例为TabBarInfo。
  

1. const TAB_INFO: TabBarInfo[] = [
2.   new TabBarInfo(0, $r('app.string.custom_tab_home'), $r("app.media.custom_tab_home_selected"),
3.     $r("app.media.custom_tab_home"), $r('app.color.custom_tab_selected_text_color'),
4.     $r('app.color.custom_tab_text_color')),
5.   new TabBarInfo(1, $r('app.string.custom_tab_news'), $r("app.media.custom_tab_new_selected"),
6.     $r("app.media.custom_tab_new"), $r('app.color.custom_tab_selected_text_color'),
7.     $r('app.color.custom_tab_text_color')),
8.   new TabBarInfo(2, $r("app.string.custom_tab_video"), $r("app.media.custom_tab_video_selected"),
9.     $r("app.media.custom_tab_video"), $r('app.color.custom_tab_selected_text_color'),
10.     $r('app.color.custom_tab_text_color')),
11.   new TabBarInfo(3, $r("app.string.custom_tab_friend"), $r("app.media.custom_tab_friend_selected"),
12.     $r("app.media.custom_tab_friend"), $r('app.color.custom_tab_selected_text_color'),
13.     $r('app.color.custom_tab_text_color')),
14.   new TabBarInfo(4, $r('app.string.custom_tab_mine'), $r("app.media.custom_tab_user_selected"),
15.     $r("app.media.custom_tab_user"), $r('app.color.custom_tab_selected_text_color'),
16.     $r('app.color.custom_tab_text_color'))];
18. private tabsInfoArr: TabBarInfo[] = TAB_INFO;

复制代码

• 构建Tab组件。 开发者可以根据自己的设计将CustomTabBar自定义视图布置在页面符合的位置，并传递对应的参数。
  

1. /**
2. * 自定义TabBar组件
3. * selectedIndex: 配置起始的页签索引（必传）
4. * tabsInfo: tab数据源，类型为TabBarInfo
5. */
6. CustomTabBar({ selectedIndex: this.selectedIndex, tabsInfo: this.tabsInfoArr })

复制代码

属性(接口)说明

CustomTabBar组件属性
属性范例释义默认值selectedIndexnumber设置起始的页签索引0tabsInfoTabBarInfo[]tab数据源- TabInfo类属性
属性范例释义默认值idnumber页签id-titlestring页签标题-selectedIconResoureStr被选中图片$r('app.media.custom_tab_default_icon')defaultIconResoureStr默认图片$r('app.media.custom_tab_default_icon')selectedFontColorResoureColor被选中页签文本颜色-defaultFontColorResoureColor默认页签文本颜色- 实现思路

场景1：TabBar中间页面实现有一圈圆弧外轮廓
将Image组件外层包裹一层容器组件，通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。 这里borderRadius的值设置为容器组件宽度的一半，margin的top值根据开发者的ux效果设置符合的值即可。 

1.   Column() {
2.     Image(this.selectedIndex === tabBarIndex ? this.tabsInfo[tabBarIndex].selectedIcon :
3.     this.tabsInfo[tabBarIndex].defaultIcon)
4.       .size({
5.         width: $r('app.integer.custom_tab_community_image_size'),
6.         height: $r('app.integer.custom_tab_community_image_size')
7.       })
8.       .interpolation(ImageInterpolation.High) // TODO：知识点：使用interpolation属性对图片进行插值，使图片显示得更清晰
9.   }
10.   .width($r('app.integer.custom_tab_community_image_container_size'))
11.   .height($r('app.integer.custom_tab_community_image_container_size'))
12.   // TODO：知识点：通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。
13.   .borderRadius($r('app.integer.custom_tab_community_image_container_border_radius_size'))
14.   .margin({ top: CommonConstants.ARC_MARGIN_TOP })
15.   .backgroundColor(Color.White)
16.   .justifyContent(FlexAlign.Center)
17.   

复制代码

场景2：TabBar页签点击之后会改变图标显示，并有一小段动画效果
改变图标显示功能可以先声明一个变量selectedIndex，此变量代表被选定的tabBar下标，点击的时候将当前tabBar的下标值进行赋值。 通过当前被选中的tabBar下标值和tabBar自己的下标值进行判断来到达点击之后改变图标显示的效果。 动画效果可以将Image添加一个offset属性和animation属性， offset属性可以控制组件的横向和纵向偏移量； animation在组件的某些通用 属性厘革时，可以通过属性动画animation实现过 渡效果。 点击TabBar页签，改变offset的属性值，自动触发animation属性动画。 

1. Column() {
2.   // 通过被选中的tabBar下标值和tabBar的默认下标值来改变图片显示
3.   Image(this.selectedIndex === tabBarIndex ? this.tabsInfo[tabBarIndex].selectedIcon :
4.   this.tabsInfo[tabBarIndex].defaultIcon)// TODO：知识点：使用interpolation属性对图片进行插值，使图片显示得更清晰
5.     .interpolation(ImageInterpolation.High)
6.     .size({
7.       width: $r('app.integer.custom_tab_image_size'),
8.       height: $r('app.integer.custom_tab_image_size')
9.     })// TODO：知识点：通过offset控制图片的纵向偏移。
10.     .offset({
11.       y: (this.selectedIndex === tabBarIndex &&
12.         this.selectedIndex !== CommonConstants.COMMUNITY_TAB_BAR_INDEX) ?
13.       this.iconOffset : $r('app.integer.custom_tab_common_size_0')
14.     })// TODO：知识点：组件的某些通用属性变化时，可以通过属性动画animation实现过渡效果。本示例的动画效果是tabBar的图片向上偏移一小段距离
15.     .animation({
16.       duration: CommonConstants.CUSTOM_ANIMATION_DURATION,
17.       curve: Curve.Ease,
18.       iterations: CommonConstants.CUSTOM_ANIMATION_ITERATIONS,
19.       playMode: PlayMode.Normal
20.     })
21. }
22. .width($r('app.integer.custom_tab_image_container_size'))
23. .height($r('app.integer.custom_tab_image_container_size'))
24. .justifyContent(FlexAlign.Center)

复制代码

高性能知识点

不涉及。
工程布局&模块范例

1. customtabbar                                    // har类型
2. |---common
3. |   |---CommonConstants.ets                     // 常量
4. |---model
5. |   |---DataType.ets                            // 模型层-Tabbar数据类型
6. |   |---TabBarData.ets                          // 数据模型层-TabBar数据
7. |---util
8. |   |---CustomTabBar.ets                        // 核心组件
9. |   |---Logger.ets                              // 日志
10. |---view
11. |   |---TabView.ets                             // 视图层-自定义TabBar页面

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。