首頁>編程相關>JAVA源碼
下載

動畫底欄





可自訂且易於使用的 BottomBar 導航視圖，具有流暢的動畫，支援 ViewPager、ViewPager2、NavController 和徽章。

通過喬裡·滴珀斯

截圖

遊樂場應用程式

從 Google Play 下載 Playground 應用程序，透過此應用程序，您可以嘗試所有功能，甚至可以使用您選擇的配置來產生 XML。

內容

  • 入門
  • 管理選項卡
  • 與 ViewPager 一起使用
  • 配置

入門

該庫可在 Maven Central 上找到，透過將下列依賴項新增至build.gradle來安裝它： 

implementation ' nl.joery.animatedbottombar:library:1.1.0 '

版本 1.0.x 只能與 jCenter 一起使用，版本 1.1.x 及更高版本可以與 Maven Central 一起使用。

使用自訂屬性在 XML 佈局中定義AnimatedBottomBar 。 

< nl .joery.animatedbottombar.AnimatedBottomBar
    android : id = " @+id/bottom_bar "
    android : background = " #FFF "
    android : layout_width = " match_parent "
    android : layout_height = " wrap_content "
    app : abb_selectedTabType = " text "
    app : abb_indicatorAppearance = " round "
    app : abb_indicatorMargin = " 16dp "
    app : abb_indicatorHeight = " 4dp "
    app : abb_tabs = " @menu/tabs "
    app : abb_selectedIndex = " 1 " />

在res/menu/ resources 資料夾中建立一個名為tabs.xml的檔案： 

< menu xmlns : android = " http://schemas.android.com/apk/res/android " >
    < item
        android : id = " @+id/tab_home "
        android : icon = " @drawable/home "
        android : title = " @string/home " />
    < item
        android : id = " @+id/tab_alarm "
        android : icon = " @drawable/alarm "
        android : title = " @string/alarm " />
    < item
        android : id = " @+id/tab_bread "
        android : icon = " @drawable/bread "
        android : title = " @string/bread " />
    < item
        android : id = " @+id/tab_cart "
        android : icon = " @drawable/cart "
        android : title = " @string/cart " />
</ menu >

透過設定回調在選定選項卡發生變更時收到通知： 

bottom_bar.onTabSelected = {
    Log .d( " bottom_bar " , " Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
    Log .d( " bottom_bar " , " Reselected tab: " + it.title)
}

或者如果您需要更詳細的信息，請設定偵聽器： 

bottom_bar.setOnTabSelectListener( object : AnimatedBottomBar . OnTabSelectListener {
    override fun onTabSelected (
        lastIndex : Int ,
        lastTab : AnimatedBottomBar . Tab ? ,
        newIndex : Int ,
        newTab : AnimatedBottomBar . Tab
    ) {
        Log .d( " bottom_bar " , " Selected index: $newIndex , title: ${newTab.title} " )
    }

    // An optional method that will be fired whenever an already selected tab has been selected again.
    override fun onTabReselected ( index : Int , tab : AnimatedBottomBar . Tab ) {
        Log .d( " bottom_bar " , " Reselected index: $index , title: ${tab.title} " )
    }
})

管理選項卡

關於如何使用程式碼管理標籤的簡短概述。

建立新選項卡

 // Creating a tab by passing values
val bottomBarTab1 = AnimatedBottomBar .createTab(drawable, " Tab 1 " )

// Creating a tab by passing resources
val bottomBarTab2 = AnimatedBottomBar .createTab( R .drawable.ic_home, R .string.tab_2, R .id.tab_home)

新增選項卡

 // Adding a tab at the end
AnimatedBottomBar .addTab(bottomBarTab1)

// Add a tab at a specific position
AnimatedBottomBar .addTabAt( 1 , bottomBarTab2)

刪除標籤

 // Removing a tab by object reference
val tabToRemove = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .removeTab(tabToRemove)

// Removing a tab at a specific position
AnimatedBottomBar .removeTabAt(tabPosition)

// Removing a tab by the given ID resource
AnimatedBottomBar .removeTabById( R .id.tab_home)

選擇選項卡

 // Selecting a tab by object reference
val tabToSelect = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .selectTab(tabToSelect)

// Selecting a tab at a specific position
AnimatedBottomBar .selectTabAt( 1 )

// Selecting a tab by the given ID resource
AnimatedBottomBar .selectTabById( R .id.tab_home)

啟用/停用選項卡

 // Disabling a tab by object reference
val tabToDisable = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setTabEnabled(tabToDisable, false ) // Use true for re-enabling the tab

// Disabling a tab at a specific position
AnimatedBottomBar .setTabEnabledAt( 1 , false )

// Disabling a tab by the given ID resource
AnimatedBottomBar .setTabEnabledById( R .id.tab_home, false )

攔截標籤

這對於限制對高級區域的存取可能很有用。您可以使用回調或更詳細的偵聽器： 

bottom_bar.onTabIntercepted = {
    if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
        // e.g. show a dialog
        false
    }
    true
}

詳細監聽器： 

bottom_bar.setOnTabInterceptListener( object : AnimatedBottomBar . OnTabInterceptListener {
    override fun onTabIntercepted (
        lastIndex : Int ,
        lastTab : AnimatedBottomBar . Tab ? ,
        newIndex : Int ,
        newTab : AnimatedBottomBar . Tab
    ): Boolean {
        if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
            // e.g. show a dialog
            return false
        }
        return true
    }
})

標籤徽章

有關如何為選項卡設定徽章的說明，應向 BottomBar 提供AnimatedBottomBar.Badge對象，請注意，也可以添加不含文字的徽章。

添加徽章

 // Adding a badge by tab reference
val tabToAddBadgeAt = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar . Badge ( " 99 " ))

// Adding a badge at a specific position
AnimatedBottomBar .setBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))

// Adding a badge at the given ID resource
AnimatedBottomBar .setBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " ))

移除徽章

 // Removing a badge by tab reference
val tabToRemoveBadgeFrom = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .clearBadgeAtTab(tabToRemoveBadgeFrom)

// Removing a badge at a specific position
AnimatedBottomBar .clearBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))

// removing a badge at the given ID resource
AnimatedBottomBar .clearBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " ))

設計個人徽章

此外，還可以對徽章進行單獨設計。 

 AnimatedBottomBar . Badge (
    text = " 99 " ,
    backgroundColor = Color . RED ,
    textColor = Color . GREEN ,
    textSize =  12 .spPx // in pixels
)

與 ViewPager 一起使用

將 BottomBar 與 ViewPager 或 ViewPager2 一起使用很容易，您只需使用setupWithViewPager()方法即可。請注意，選項卡和 ViewPager 頁面的數量必須相同才能正常運作。

用法

 // For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager)

// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2)

配置

所有配置選項的概述。所有選項也可以透過其等效名稱以程式設計方式存取和設定。

選項卡

屬性描述預設
abb_選項卡選項卡可以在res/menu/ resource 資料夾中的選單檔案（選單資源）中定義。

圖標和標題屬性是必需的。預設情況下，所有選項卡均已啟用，將android:enabled設為false以停用選項卡。 
< menu xmlns : android = " http://schemas.android.com/apk/res/android " >
    < item
        android : id = " @+id/tab_example "
        android : icon = " @drawable/ic_example "
        android : title = " @string/tab_example "
        android : enabled = " true|false " />
    ...etc
</ menu >
abb_selectedIndex 索引定義預設選定的選項卡索引。
abb_selectedTabId透過 ID 定義預設選定的選項卡，例如@id/tab_id

選項卡外觀

屬性描述預設
abb_selectedTab類型確定選擇選項卡時是否應顯示圖示或文字。

圖示

文字

圖示
abb_tab顏色未選擇選項卡時圖示或文字的顏色。 @color/textColorPrimary
abb_tabColor選擇選擇選項卡時圖示或文字的顏色。 @顏色/colorPrimary
abb_tabColorDisabled停用選項卡時圖示或文字的顏色。 @color/textColorSecondary
abb_text外觀自訂標籤中文字的外觀和風格，以下是自訂文字外觀的範例。

在res/values/styles.xml中定義新樣式： 
< style name = " CustomText " >
    < item name = " android:textAllCaps " >true</ item >
    < item name = " android:fontFamily " >serif</ item >
    < item name = " android:textSize " >16sp</ item >
    < item name = " android:textStyle " >italic|bold</ item >
</ style >
abb_textStyle文字的樣式（正常、粗體、斜體、粗體|斜體）。

使用bottom_bar.typeface以程式設定文字樣式。		普通的
abb_textSize文字的大小。建議的文字尺寸類型為“sp”（縮放像素），例如：14sp。 14sp
abb_iconSize增大或減小圖示的大小。 24dp
abb_rippleEnabled選擇選項卡時啟用“波紋”效果。

錯誤的
abb_rippleColor變更上述波紋效果的顏色。預設主題顏色

徽章

屬性描述預設
abb_badge背景顏色徽章的背景顏色。 #ff0c10（紅色）
abb_badgeTextColor徽章內文字的文字顏色。 #FFFFFF
abb_badgeTextSize徽章內文字的文字大小。建議的文字尺寸類型為“sp”（縮放像素），例如：14sp。 10sp
abb_badge動畫徽章的進入和退出動畫類型。

沒有任何
規模
褪色
規模
abb_badgeAnimationDuration徽章進入和退出動畫的持續時間。 150

動畫

屬性描述預設
abb_animationDuration所有動畫的持續時間，包括指示器動畫。 400
abb_tab動畫未選取的選項卡的進入和退出動畫樣式。

沒有任何

滑動

褪色

褪色
abb_tab動畫選擇所選選項卡的進入和退出動畫樣式。

沒有任何

滑動

褪色

滑動
abb_animationInterpolator用於所有動畫的插值器。

有關可用插值器的更多信息，請參閱“Android 插值器：視覺指南”。

範例值： @android:anim/overshoot_interpolator
FastOutSlowIn插值器

指標

屬性描述預設
abb_indicator顏色指示器的顏色。 @android/colorPrimary
abb_indicator高度指示器的高度。 3dp
abb_indicatorMargin指標的水平邊距。這決定了指示器的寬度。 0dp
abb_indicator外觀將指示器的形狀配置為方形或圓形。

無形的

方塊

圓形的

方塊
abb_indicator位置配置所選選項卡指示器的位置：頂部、底部或不可見。

頂部

底部

頂部
abb_indicator動畫變更所選標籤時指示器的動畫類型。

沒有任何


滑動

褪色
滑動

精選於

  • Android 周刊：第 404 期
  • Medium：2020 年 25 個最佳 Android 函式庫和項目
  • 媒體：2020 年第一季最熱門的 5 個 Android 庫

製作人員

  • 運球：可讀標籤欄

執照

 MIT License

Copyright (c) 2021 Joery Droppers (https://github.com/Droppers)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
展開
附加信息
相關應用
爲您推薦
相關資訊 全部