HarmonyOS NEXT开发：自定义TabBar页签案例

介绍

本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。

效果图预览

使用说明：

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

实现思路

场景1：TabBar中间页面实现有一圈圆弧外轮廓

将Image组件外层包裹一层容器组件，通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。 这里borderRadius的值设置为容器组件宽度的一半，margin的top值根据开发者的ux效果设置合适的值即可。 

  Column() {
    Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon :
          TABINFO[this.tabBarIndex].defaultIcon)
      .size({
        width: $r('app.integer.custom_tab_community_image_size'),
        height: $r('app.integer.custom_tab_community_image_size')
      })
      .interpolation(ImageInterpolation.High) // T