鸿蒙HarmonyOS 5.0开发实战：自定义TabBar实现案例
往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）[*] 鸿蒙开发核心知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
[*] 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
自定义TabBar页签案例
先容
TabBar在大部分的APP当中都能够使用到，差别的APP可能存在不一样的TabBar样式，Tab组件自带的TabBar属性对于部分效果无法满意，如页签中间显示一圈圆弧外轮廓等， 因此我们需要去自己定义一个TabBar页签来满意开发的需要。
效果图预览
https://i-blog.csdnimg.cn/img_convert/3e3bd641f42e29af16a171ec6292957d.gif
使用说明：
[*]依次点击tabBar页面，除了社区图标之外，其它图标往上移动一小段距离。
下载安装
1.模块oh-package.json5文件中引入依赖
"dependencies": {
"customtabbar": "har包地址"
}
2.ets文件import自定义视图实现Tab效果组件
import { CustomTabBar } from 'customtabbar';
快速使用
本章节主要先容了如何快速使用自定义视图来实现Tab效果组件，包括数据源的初始化以及Tab自定义组件的构建。
[*]初始化tab数据源。数据源的范例为TabBarInfo。
const TAB_INFO: TabBarInfo[] = [
new TabBarInfo(0, $r('app.string.custom_tab_home'), $r("app.media.custom_tab_home_selected"),
$r("app.media.custom_tab_home"), $r('app.color.custom_tab_selected_text_color'),
$r('app.color.custom_tab_text_color')),
new TabBarInfo(1, $r('app.string.custom_tab_news'), $r("app.media.custom_tab_new_selected"),
$r("app.media.custom_tab_new"), $r('app.color.custom_tab_selected_text_color'),
$r('app.color.custom_tab_text_color')),
new TabBarInfo(2, $r("app.string.custom_tab_video"), $r("app.media.custom_tab_video_selected"),
$r("app.media.custom_tab_video"), $r('app.color.custom_tab_selected_text_color'),
$r('app.color.custom_tab_text_color')),
new TabBarInfo(3, $r("app.string.custom_tab_friend"), $r("app.media.custom_tab_friend_selected"),
$r("app.media.custom_tab_friend"), $r('app.color.custom_tab_selected_text_color'),
$r('app.color.custom_tab_text_color')),
new TabBarInfo(4, $r('app.string.custom_tab_mine'), $r("app.media.custom_tab_user_selected"),
$r("app.media.custom_tab_user"), $r('app.color.custom_tab_selected_text_color'),
$r('app.color.custom_tab_text_color'))];
private tabsInfoArr: TabBarInfo[] = TAB_INFO;
[*]构建Tab组件。 开发者可以根据自己的设计将CustomTabBar自定义视图布置在页面符合的位置，并传递对应的参数。
/**
* 自定义TabBar组件
* selectedIndex: 配置起始的页签索引（必传）
* tabsInfo: tab数据源，类型为TabBarInfo
*/
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效果设置符合的值即可。
Column() {
Image(this.selectedIndex === tabBarIndex ? this.tabsInfo.selectedIcon :
this.tabsInfo.defaultIcon)
.size({
width: $r('app.integer.custom_tab_community_image_size'),
height: $r('app.integer.custom_tab_community_image_size')
})
.interpolation(ImageInterpolation.High) // TODO：知识点：使用interpolation属性对图片进行插值，使图片显示得更清晰
}
.width($r('app.integer.custom_tab_community_image_container_size'))
.height($r('app.integer.custom_tab_community_image_container_size'))
// TODO：知识点：通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。
.borderRadius($r('app.integer.custom_tab_community_image_container_border_radius_size'))
.margin({ top: CommonConstants.ARC_MARGIN_TOP })
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)
场景2：TabBar页签点击之后会改变图标显示，并有一小段动画效果
改变图标显示功能可以先声明一个变量selectedIndex，此变量代表被选定的tabBar下标，点击的时候将当前tabBar的下标值进行赋值。 通过当前被选中的tabBar下标值和tabBar自己的下标值进行判断来到达点击之后改变图标显示的效果。 动画效果可以将Image添加一个offset属性和animation属性， offset属性可以控制组件的横向和纵向偏移量； animation在组件的某些通用 属性厘革时，可以通过属性动画animation实现过 渡效果。 点击TabBar页签，改变offset的属性值，自动触发animation属性动画。
Column() {
// 通过被选中的tabBar下标值和tabBar的默认下标值来改变图片显示
Image(this.selectedIndex === tabBarIndex ? this.tabsInfo.selectedIcon :
this.tabsInfo.defaultIcon)// TODO：知识点：使用interpolation属性对图片进行插值，使图片显示得更清晰
.interpolation(ImageInterpolation.High)
.size({
width: $r('app.integer.custom_tab_image_size'),
height: $r('app.integer.custom_tab_image_size')
})// TODO：知识点：通过offset控制图片的纵向偏移。
.offset({
y: (this.selectedIndex === tabBarIndex &&
this.selectedIndex !== CommonConstants.COMMUNITY_TAB_BAR_INDEX) ?
this.iconOffset : $r('app.integer.custom_tab_common_size_0')
})// TODO：知识点：组件的某些通用属性变化时，可以通过属性动画animation实现过渡效果。本示例的动画效果是tabBar的图片向上偏移一小段距离
.animation({
duration: CommonConstants.CUSTOM_ANIMATION_DURATION,
curve: Curve.Ease,
iterations: CommonConstants.CUSTOM_ANIMATION_ITERATIONS,
playMode: PlayMode.Normal
})
}
.width($r('app.integer.custom_tab_image_container_size'))
.height($r('app.integer.custom_tab_image_container_size'))
.justifyContent(FlexAlign.Center)
高性能知识点
不涉及。
工程布局&模块范例
customtabbar // har类型
|---common
| |---CommonConstants.ets // 常量
|---model
| |---DataType.ets // 模型层-Tabbar数据类型
| |---TabBarData.ets // 数据模型层-TabBar数据
|---util
| |---CustomTabBar.ets // 核心组件
| |---Logger.ets // 日志
|---view
| |---TabView.ets // 视图层-自定义TabBar页面 https://i-blog.csdnimg.cn/direct/92c637375237486096533d14e63eb83b.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]