鸿蒙（ Beta5.0版）开辟实战：自界说TabBar页签

先容

本示例主要先容了TabBar中央页面怎样实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标表现，并有一小段动画效果。
效果图预览

利用阐明：

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

实现思路

场景1：TabBar中央页面实现有一圈圆弧外轮廓
将Image组件外层包裹一层容器组件，通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。 这里borderRadius的值设置为容器组件宽度的一半，margin的top值根据开辟者的ux效果设置合适的值即可。 具体代码可参考TabView.ets

1. Column() {
2.     Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon :
3.           TABINFO[this.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: ARC_MARGIN_TOP })
15.   .backgroundColor(Color.White)
16.   .justifyContent(FlexAlign.Center)

复制代码

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

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

复制代码

高性能知识点

不涉及。
工程布局&模块类型

1. customtabbar                                    // har类型
2. |---model
3. |   |---DataType.ets                            // 模型层-Tabbar数据类型
4. |   |---TabBarData.ets                          // 数据模型层-TabBar数据
5. |---view
6. |   |---TabView.ets                             // 视图层-自定义TabBar页面

复制代码

最后

小编在之前的鸿蒙系统扫盲中，有很多朋侪给我留言，差异的角度的问了一些题目，我明显感觉到一点，那就是很多人参与鸿蒙开辟，但是又不知道从那里下手，因为资料太多，太杂，传授的人也多，无从选择。有很多小同伴不知道学习哪些鸿蒙开辟技术？不知道必要重点掌握哪些鸿蒙应用开辟知识点？而且学习时频仍踩坑，最终浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习优劣常有必要的。 
为了确保高效学习，发起规划清晰的学习门路，涵盖以下关键阶段：

---

 鸿蒙（HarmonyOS NEXT）最新学习门路

​
该门路图包含底子技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开辟，不光补充了华为官网未涉及的解决方案
门路图得当人群：
IT开辟人员：想要拓展职业界限
零底子小白：鸿蒙爱好者，希望从0到1学习，增长一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术
2.视频学习教程+学习PDF文档
HarmonyOS Next 最新全套视频教程

  纯血版鸿蒙全套学习文档（口试、文档、全套视频等）              

​​
总结
参与鸿蒙开辟，你要先认清得当你的方向，如果是想从事鸿蒙应用开辟方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，发起规划清晰的学习门路

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