BottomNavigationBar 導航選單

摘要： BottomNavigationBar 是自定義的一個實現App應用底部導航欄功能的View,可以實現底部 2-5 個導航選單（一般不會有更多），可以實現某一個選單凸起的效果，如，有5個選單，可以選擇讓第三個選單凸起（floating），這是很多App都有的功能; 可以根據編寫的顏色變化的資原...

BottomNavigationBar 是自定義的一個實現App應用底部導航欄功能的View,可以實現底部 2-5 個導航選單（一般不會有更多），可以實現某一個選單凸起的效果，如，有5個選單，可以選擇讓第三個選單凸起（floating），這是很多App都有的功能; 可以根據編寫的顏色變化的資原始檔來更改圖示和文字選中時和未選中時的顏色，可以自由控制是否需要選中（checkable）,選擇開啟時，可變換為選中顏色，選擇關閉時，不能更改為選擇顏色;可以控制預設選中哪一項；可以設定某一個導航選單的未讀訊息數（數字或者小紅點）。

先看一組效果圖

五個選單，沒有凸起的，都是可選中的

圖1

中間有凸起，並且中間的不能選中，但點選事件可以響應

圖2

引入方法

gradle

• 在專案中的根目錄下的 build.gradle (與model同級的) 中增加如下配置

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

• 在model 中的build.gradle 中增加依賴

dependencies {
implementation 'com.github.onestravel:BottomNavigationBar:1.0.2'
}

maven

• 在pom.xml檔案中加入下面配置

<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>

• 新增maven依賴

<dependency>
<groupId>com.github.onestravel</groupId>
<artifactId>BottomNavigationBar</artifactId>
<version>1.0.2</version>
</dependency>

屬性說明

BottomNavigationBar 屬性說明

屬性	參考值	說明
app:itemIconTint	@drawable/tab_selecter	整體的tab選單的圖片選中和未選中的顏色變化，傳入一個資源drawable檔案
app:itemTextColor	@drawable/tab_selecter	@drawable/tab_selecter@drawable/tab_selecter整體的tab選單的圖片選中和未選中的顏色變化，傳入一個資源drawable檔案
app:floatingEnable	true/false	是否開啟浮動，預設為false，設定為true是，可以實現中間凸起
app:floatingUp	20dp	設定Tab的上浮尺寸，比如：上浮20dp，上浮尺寸不可超過整個選單高度的1/2
app:menu	@menu/botom_menu	BottomNavigationBar導航欄的關鍵，設定導航欄的tab選單

示例1:不需要浮動（凸起）的選單，圖1效果

<cn.onestravel.navigation.view.BottomNavigationBar
android:id="@+id/BottomLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
android:paddingTop="5dp"
android:paddingBottom="5dp"
app:menu="@menu/navigation_menu">

</cn.onestravel.navigation.view.BottomNavigationBar>

示例2:需要浮動（凸起）的選單，圖2效果

<cn.onestravel.navigation.view.BottomNavigationBar
android:id="@+id/BottomLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
android:paddingTop="5dp"
android:paddingBottom="5dp"
app:floatingEnable="true"
app:floatingUp="25dp"
app:menu="@menu/navigation_menu">

</cn.onestravel.navigation.view.BottomNavigationBar>

menu 選單屬性值說明

屬性	參考值	說明
android:id	@+id/tab1	導航選單 Item 的ID；
android:icon	@drawable/bar_news	導航選單 Item 的圖示，可以是圖示選擇器（selector），也可以是預設圖示，根據BottomNavigationBar的屬性 app:itemIconTint 更改選中與不選中的顏色變化，預設為藍色和灰色；
android:title	首頁	導航選單 Item 的文字，可以預設為空字串，表示不設定；
android:checkable	true/false	設定導航選單 Item 是否可以選擇，值影響選擇與不選中效果，不影響點選事件；
android:checked	true/false	設定導航選單 Item 是否預設選中,預設為第一個選中，請不要在多個Item上設定改；
app:floating	true/false	設定該導航選單 Item 是否浮動，與BottomNavigationBar 的app:floatingEnable和 app:floatingUp屬性配合使用，預設為false，即不浮動（不凸起）；

示例1:不需要浮動（凸起）的選單，圖1效果

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/tab1"
android:icon="@drawable/bar_news"
android:title="首頁"></item>
<item
android:id="@+id/tab2"
android:icon="@drawable/bar_constact"
android:title="聯絡人"></item>
<item
android:id="@+id/tab5"
android:icon="@drawable/tab_manage_selected"
android:title="拍照"></item>
<item
android:id="@+id/tab3"
android:icon="@drawable/bar_invite"
android:title="發現"></item>
<item
android:id="@+id/tab4"
android:icon="@drawable/bar_my"
android:title="我的"></item>
</menu>

示例2:需要浮動（凸起）的選單，圖2效果

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/tab1"
android:icon="@drawable/bar_news"
android:title="首頁"></item>
<item
android:id="@+id/tab2"
android:icon="@drawable/bar_constact"
android:title="聯絡人"></item>
<item
android:id="@+id/tab5"
android:icon="@drawable/tab_manage_selected"
android:title="拍照"
app:floating="true"
android:checkable="false"></item>
<item
android:id="@+id/tab3"
android:icon="@drawable/bar_invite"
android:title="發現"></item>
<item
android:id="@+id/tab4"
android:icon="@drawable/bar_my"
android:title="我的"></item>
</menu>