介紹

本示例主要介紹了TabBar中間頁(yè)面如何實(shí)現(xiàn)有一圈圓弧外輪廓以及TabBar頁(yè)簽被點(diǎn)擊之后會(huì)改變圖標(biāo)顯示，并有一小段動(dòng)畫(huà)效果。

效果圖預(yù)覽

使用說(shuō)明：

1. 依次點(diǎn)擊tabBar頁(yè)面，除了社區(qū)圖標(biāo)之外，其它圖標(biāo)往上移動(dòng)一小段距離。

實(shí)現(xiàn)思路

場(chǎng)景1：TabBar中間頁(yè)面實(shí)現(xiàn)有一圈圓弧外輪廓

將Image組件外層包裹一層容器組件，通過(guò)設(shè)置borderRadius以及margin的top值實(shí)現(xiàn)圓弧外輪廓效果。 這里borderRadius的值設(shè)置為容器組件寬度的一半，margin的top值根據(jù)開(kāi)發(fā)者的ux效果設(shè)置合適的值即可。 具體代碼可參考TabView.ets

Column() {
   Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon)
     .size({ width: $r('app.integer.community_image_size'), height: $r('app.integer.community_image_size') })
}
.width($r('app.integer.community_image_container_size'))
.height($r('app.integer.community_image_container_size'))
// TODO：知識(shí)點(diǎn)：通過(guò)設(shè)置borderRadius以及margin的top值實(shí)現(xiàn)圓弧外輪廓效果。
.borderRadius(this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX ? $r('app.integer.community_image_container_border_radius_size') : $r('app.integer.common_size_0'))
.margin({ top: this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX ? -15 : $r('app.integer.common_size_0') })
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)

場(chǎng)景2：TabBar頁(yè)簽點(diǎn)擊之后會(huì)改變圖標(biāo)顯示，并有一小段動(dòng)畫(huà)效果

改變圖標(biāo)顯示功能可以先聲明一個(gè)變量selectedIndex，此變量代表被選定的tabBar下標(biāo)，點(diǎn)擊的時(shí)候?qū)?dāng)前tabBar的下標(biāo)值進(jìn)行賦值。 通過(guò)當(dāng)前被選中的tabBar下標(biāo)值和tabBar自己的下標(biāo)值進(jìn)行判斷來(lái)達(dá)到點(diǎn)擊之后改變圖標(biāo)顯示的效果。 動(dòng)畫(huà)效果可以將Image添加一個(gè)offset屬性和animation屬性， offset屬性可以控制組件的橫向和縱向偏移量； animation在組件的某些通用 屬性變化時(shí)，可以通過(guò)屬性動(dòng)畫(huà)animation實(shí)現(xiàn)過(guò) 渡效果。 點(diǎn)擊TabBar頁(yè)簽，改變offset的屬性值，自動(dòng)觸發(fā)animation屬性動(dòng)畫(huà)。 具體代碼可參考TabView.ets

Column() {
   // 通過(guò)被選中的tabBar下標(biāo)值和tabBar的默認(rèn)下標(biāo)值來(lái)改變圖片顯示
   Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon)
     .size(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ?
        { width: $r('app.integer.community_image_size'), height: $r('app.integer.community_image_size') } :
        { width: $r('app.integer.tab_bar_image_size'), height: $r('app.integer.tab_bar_image_size') })
     // TODO：知識(shí)點(diǎn)：通過(guò)offset控制圖片的縱向偏移。
     .offset({ y: (this.selectedIndex === this.tabBarIndex && this.selectedIndex !== COMMUNITY_TAB_BAR_INDEX) ?
                   this.iconOffset : $r('app.integer.common_size_0') })
      // TODO：知識(shí)點(diǎn)：組件的某些通用屬性變化時(shí)，可以通過(guò)屬性動(dòng)畫(huà)animation實(shí)現(xiàn)過(guò)渡效果。本示例的動(dòng)畫(huà)效果是tabBar的圖片向上偏移一小段距離
      .animation({
         duration: 400,
         curve: Curve.Linear,
         iterations: 1,
         playMode: PlayMode.Normal
      })
}
.width(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ?
$r('app.integer.community_image_size') : $r('app.integer.tab_bar_image_container_size'))
.height(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ?
$r('app.integer.community_image_size') : $r('app.integer.tab_bar_image_container_size'))
.justifyContent(FlexAlign.Center)

高性能知識(shí)點(diǎn)

不涉及。

工程結(jié)構(gòu)&模塊類(lèi)型

customtabbar                                    // har類(lèi)型
|---model
|   |---DataType.ets                            // 模型層-Tabbar數(shù)據(jù)類(lèi)型
|   |---TabBarData.ets                          // 數(shù)據(jù)模型層-TabBar數(shù)據(jù)
|---view
|   |---TabView.ets                             // 視圖層-自定義TabBar頁(yè)面

模塊依賴(lài)

不涉及。

參考資料

屬性動(dòng)畫(huà)(animation)

Tabs組件

學(xué)習(xí)鴻蒙開(kāi)發(fā)勢(shì)在必行。鴻蒙開(kāi)發(fā)可參考學(xué)習(xí)文檔：https://qr21.cn/FV7h05