溫馨提示
寫博客是爲了記錄在開發過程中所涉及到的技術以及遇到的問題的解決，如果該博客對您有所幫助，希望可以點個關注；如果您對文章中的內容有什麼不同的見解，歡迎留言進行討論。謝謝！
OneBottomNavigationBar 使用說明
簡介：
OneBottomNavigationBar是自定義的一個實現App應用底部導航欄功能的View,可以實現底部 2-5 個導航菜單（一般不會有更多），可以實現某一個菜單凸起的效果，如，有5個菜單，可以選擇讓第三個菜單凸起（floating），這是很多App都有的功能; 可以根據編寫的顏色變化的資源文件來更改圖標和文字選中時和未選中時的顏色，可以自由控制是否需要選中（checkable）,選擇開啓時，可變換爲選中顏色，選擇關閉時，不能更改爲選擇顏色;可以控制默認選中哪一項；可以設置某一個導航菜單的未讀消息數（數字或者小紅點）。
先看一組效果圖
五個菜單，沒有凸起的，都是可選中的
中間有凸起，並且中間的不能選中，但點擊事件可以響應
引入方法
jcenter
- 在model 中的build.gradle 中增加依賴
dependencies {
implementation 'cn.onestravel.one:one_bottom_navigationbar:VERSION'
}
例如：
dependencies {
implementation 'cn.onestravel.one:one_bottom_navigationbar:1.1.1'
}
jitPack
VERSION:
- 在項目中的根目錄下的 build.gradle (與model同級的) 中增加如下配置
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
- 在model 中的build.gradle 中增加依賴
dependencies {
implementation 'com.github.onestravel:OneBottomNavigationBar:VERSION'
}
例如：
dependencies {
implementation 'com.github.onestravel:OneBottomNavigationBar:1.1.1'
}
屬性說明
OneBottomNavigationBar 屬性說明
| 屬性 | 參考值 | 說明 |
|---|---|---|
| app:oneItemIconTint | @drawable/tab_selecter | 整體的tab菜單的圖片選中和未選中的顏色變化，傳入一個資源drawable文件 |
| app:oneItemTextColor | @drawable/tab_selecter | @drawable/tab_selecter@drawable/tab_selecter整體的tab菜單的圖片選中和未選中的顏色變化，傳入一個資源drawable文件 |
| app:oneFloatingEnable | true/false | 是否開啓浮動，默認爲false，設置爲true是，可以實現中間凸起 |
| app:oneFloatingUp | 20dp | 設置Tab的上浮尺寸，比如：上浮20dp，上浮尺寸不可超過整個菜單高度的1/2 |
| app:oneMenu | @menu/botom_menu | BottomNavigationBar導航欄的關鍵，設置導航欄的tab菜單 |
| app:oneItemTextSize | 15sp | 設置導航欄文字的大小 |
| app:oneItemIconWidth | 30dp | 設置導航欄Icon的寬度 |
| app:oneIemIconHeight | 30dp | 設置導航欄Icon的高度 |
| app:oneItemTextTopMargin | 5dp | 置導航欄文字和Icon的間隔高度 |
| app:oneItemTopLineColor | #CCCCCC | 置導航欄頂部分割線顏色，想去掉該分割線可設置透明色 |
示例1:不需要浮動（凸起）的菜單，圖1效果
<cn.onestravel.navigation.view.OneBottomNavigationBar
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.OneBottomNavigationBar>
示例2:需要浮動（凸起）的菜單，圖2效果
<cn.onestravel.navigation.view.OneBottomNavigationBar
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.OneBottomNavigationBar>
menu 菜單屬性值說明
| 屬性 | 參考值 | 說明 |
|---|---|---|
| android:id | @+id/tab1 | 導航菜單 Item 的ID； |
| android:icon | @drawable/bar_news | 導航菜單 Item 的圖標，可以是圖標選擇器（selector），也可以是默認圖標，根據與OneBottomNavigationBar 的屬性 app:oneItemIconTint 更改選中與不選中的顏色變化，默認爲藍色和灰色； |
| android:title | 首頁 | 導航菜單 Item 的文字，可以默認爲空字符串，表示不設置； |
| android:checkable | true/false | 設置導航菜單 Item 是否可以選擇，值影響選擇與不選中效果，不影響點擊事件； |
| android:checked | true/false | 設置導航菜單 Item 是否默認選中,默認爲第一個選中，請不要在多個Item上設置改； |
| app:floating | true/false | 設置該導航菜單 Item 是否浮動，與OneBottomNavigationBar 的app:floatingEnable和 app:oneFloatingUp屬性配合使用，默認爲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>
設置點擊切換監聽
在NavigationBar的Tab進行切換時，會回調改方法，可進行相應處理，如：未讀消息數設置
bottomView.setOnItemSelectedListener(new OneBottomNavigationBar.OnItemSelectedListener() {
@Override
public void onItemSelected(OneBottomNavigationBar.Item item, int position) {
if(position==2){
bottomView.setFloatingEnable(true);
}else {
bottomView.setFloatingEnable(false);
}
}
});
添加Fragment進行管理，點擊自動切換
需要先設置FragmentManager管理器和加載Fragment的ViewGroup,一般爲FrameLayout ,需要設置id;之後調用addFragment，爲對應的Tab添加Fragment,
bottomView.setFragmentManager(getFragmentManager(),mainFragment);
bottomView.addFragment(R.id.tab1,new FirstFragment());
bottomView.addFragment(R.id.tab2,new SecondFragment());
bottomView.addFragment(R.id.tab3,new ThirdFragment());
bottomView.addFragment(R.id.tab4,new FourFragment());
bottomView.addFragment(R.id.tab5,new FiveFragment());
版本更新說明
1.0.2
- 初版實現自定義底部導航欄
1.0.3
- 在原基礎上對封裝進行優化，支持代碼實現導航欄
1.0.4
- 優化選中突出效果，支持選中放大，支持導航欄背景圓角
1.0.5
- 可以自定義導航欄文字大小
- 可以自定義圖標的寬度和高度
- 自定義圖標和文字間隔高度
1.0.6
- 可以Java Api 設置導航欄文字大小
- 可以Java Api 設置圖標的寬度和高度
- Java Api 設置圖標和文字間隔高度
- 支持管理Fragment ,實現Fragment點擊自動切換
1.1.0
- 更換屬性，部分屬性前增加one前綴，解決屬性衝突問題
- BottomNavigationBar 更換爲 OneBottomNavigationBar
- 增加頂部分割線顏色屬性，可設置分割線顏色(或透明色)
1.1.1
- 開發語言更換爲 kotlin
- 新增使用androidx.fragment.app.Fragment和androidx.fragment.app.FragmentManager管理fragment的支持，
包路徑爲：cn.onestravel.one.navigation.androidx.OneBottomNavigationBar - 在jcenter上發佈新包
溫馨提示：
在使用過程中，如遇到任何問題，可進行留言或發送郵件至[email protected]說明相關問題，我在看到問題的第一時間，會針對相應問題進行溝通解決，謝謝支持！
個人博客：https://blog.onestravel.cn
Github: https://github.com/onestravel