一. BottomNavgationBar簡介
- 鑒于官方BottomNavigationView還不是很完善绍撞，在此就先使用大佬們做的第三方庫
- 本文講的是Ashok-Varma的BottomNavigation
- 先看效果：
效果圖
- 特性：
- 定制豐富的導(dǎo)航欄.
- 遵循Google的底部導(dǎo)航規(guī)范
- 每個Tab的模式可以選擇范舀，每個Tab可以有自己的顏色.
- 自定義圖標
二. 用法
2.1幾個重要的設(shè)置方法
/*設(shè)置背景顏色*/ setBarBackgroundColor()//參數(shù)為R.id.color或者RGB顏色值（String形式）
該方法在BackgroundStyle為BottomNavigationBar.BACKGROUND_STYLE_STATIC的時候才生效/*設(shè)置背景模式*/ setBackgroundStyle()
該方法參數(shù)有三種（效果圖會配合TabMode一起展示）BottomNavigationBar.BACKGROUND_STYLE_STATIC //靜態(tài)背景BottomNavigationBar.BACKGROUND_STYLE_RIPPLE//點擊之后會擴散的背景BottomNavigationBar.BACKGROUND_STYLE_DEFAULT//和RIPPLE好像一樣/*設(shè)置Tab點擊的模式*/ setMode()
該方法參數(shù)也有三種BottomNavigationBar.MODE_FIXED //自適應(yīng)長度的Tab（Tab會均勻分布在整個長度內(nèi)）西采，Tab的文字默認顯示BottomNavigationBar.MODE_SHIFTING //點擊之后會自己彈出來（Tab的文字默認不顯示丧慈，點擊之后才會顯示）BottomNavigationBar.MODE_DEFAULT //和SHIFTING一樣/*為導(dǎo)航欄添加Tab*/ addItem()
該方法參數(shù)為BottomNavigationItem對象
BottomNavigationItem的常用方法有：
/*構(gòu)造函數(shù)（參數(shù)為當前Tab的圖標和標題）*/
BottomNavigationItem(@DrawableRes int mIconResource, @NonNull String mTitle)
BottomNavigationItem(Drawable mIcon, @NonNull String mTitle)
BottomNavigationItem(Drawable mIcon, @StringRes int mTitleResource)
BottomNavigationItem(@DrawableRes int mIconResource, @StringRes int mTitleResource)
/*設(shè)置點擊狀態(tài)的Icon*/
setActiveIcon(Drawable mActiveIcon)（參數(shù)為drawable資源）
setActiveIconResource(@DrawableRes int mActiveIconResource) （參數(shù)為drawableId）
/*設(shè)置點擊狀態(tài)的Color*/
setActiveColor(int color)（參數(shù)為colorId）
setActiveColor(@Nullable String colorCode)（參數(shù)為String形式的RGB顏色值）
setActiveColorResource(@ColorRes int colorResource)（參數(shù)為colorResource）
/*設(shè)置未點擊狀態(tài)的Icon*/
setInactiveIcon(Drawable mInactiveIcon)（參數(shù)為drawable資源）
setInactiveIconResource(@DrawableRes int mInactiveIconResource) （參數(shù)為drawableId）
/*設(shè)置未點擊狀態(tài)的Color*/
setInActiveColor(int color)（參數(shù)為colorId）
setInActiveColor(@Nullable String colorCode)（參數(shù)為String形式的RGB顏色值）
setInActiveColorResource(@ColorRes int colorResource)（參數(shù)為colorResource）
setFirstSelectedPosition(0) //設(shè)置默認選中的Tabinitialise() //初始化（初始化之后才代表完成設(shè)置）
2.2效果圖（點擊之后的顏色效果在addItem()方法里面設(shè)置）
-
Default默認效果
Default默認效果 -
FIXED+STATIC
FIXED+STATIC -
FIXED+RIPPLE
FIXED+RIPPLE -
SHIFTING+RIPPLE
SHIFTING+RIPPLE
2.3使用步驟
- 在build.gradle里面添加
compile 'com.ashokvarma.android:bottom-navigation-bar:1.4.1'//版本號可能會更新丈牢，以具體更新為準
- xml中使用控件
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
</com.ashokvarma.bottomnavigation.BottomNavigationBar>
- 樣式配置
/*1.首先進行fvb*/
bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_nav_bar);
/*2.進行必要的設(shè)置*/
bottomNavigationBar.setBarBackgroundColor(R.color.colorPrimary);
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);//適應(yīng)大小
/*3.添加Tab*/
bottomNavigationBar.addItem(new BottomNavigationItem(
R.drawable.listen_fill,R.string.bottom_nav_home)
.setInactiveIconResource(R.drawable.listen)
.setActiveColorResource(R.color.colorPrimary))
.addItem(new BottomNavigationItem(
R.drawable.speech_fill,R.string.bottom_nav_like)
.setInactiveIconResource(R.drawable.speech)
.setActiveColorResource(R.color.colorPrimaryDark))
.addItem(new BottomNavigationItem(
R.drawable.social_fill,R.string.bottom_nav_location)
.setInactiveIconResource(R.drawable.social)
.setActiveColorResource(R.color.yellow))
.addItem(new BottomNavigationItem(
R.drawable.profile_fill,R.string.bottom_nav_person)
.setInactiveIconResource(R.drawable.profile)
.setActiveColorResource(R.color.colorAccent))
.setFirstSelectedPosition(0)//默認顯示面板
.initialise();//初始化
- PS:當Background為
BACKGROUND_STYLE_RIPPLE的時候删豺，背景顏色設(shè)置會無效立砸，這時背景顏色會體現(xiàn)在setActiveColor()的設(shè)置上面* - 監(jiān)聽器配置
- 實現(xiàn)
BottomNavigationBar.OnTabSelectedListener接口 - 重載方法
/*Tab被選中（position為當前被選中的Tab）*/
@Override
public void onTabSelected(int position) {
}
/*Tab被取消選中（position為當前被選中的Tab）*/
@Override
public void onTabUnselected(int position) {
}
/*Tab被重新選中（position為當前被選中的Tab）*/
@Override
public void onTabReselected(int position) {
}
- 重載方法里實現(xiàn)需要的邏輯（一般就是開啟transaction進行fragment的切換）
三. 源碼
- xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.foxnickel.bottomnavdemo.MainActivity">
<include layout="@layout/content_main"/>
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/colorPrimary">
</com.ashokvarma.bottomnavigation.BottomNavigationBar>
</RelativeLayout>
- MainActivity
package cn.foxnickel.bottomnavdemo;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import cn.foxnickel.bottomnavdemo.fragment.ListenFragmet;
import cn.foxnickel.bottomnavdemo.fragment.ProfileFragmet;
import cn.foxnickel.bottomnavdemo.fragment.SocialFragmet;
import cn.foxnickel.bottomnavdemo.fragment.SpeechFragmet;
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{
private BottomNavigationBar bottomNavigationBar;
private ListenFragmet listenFragmet;
private SpeechFragmet speechFragmet;
private SocialFragmet socialFragmet;
private ProfileFragmet profileFragmet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initBottomNavBar();
initTab();
bottomNavigationBar.setTabSelectedListener(this);
}
private void initBottomNavBar(){
/*1.首先進行fvb*/
bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_nav_bar);
/*2.進行必要的設(shè)置*/
bottomNavigationBar.setBarBackgroundColor(R.color.colorPrimary);
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);//適應(yīng)大小
/*3.添加Tab*/
bottomNavigationBar.addItem(new BottomNavigationItem(
R.drawable.listen_fill,R.string.bottom_nav_home)
.setInactiveIconResource(R.drawable.listen)
.setActiveColorResource(R.color.colorPrimary))
.addItem(new BottomNavigationItem(
R.drawable.speech_fill,R.string.bottom_nav_like)
.setInactiveIconResource(R.drawable.speech)
.setActiveColorResource(R.color.colorPrimaryDark))
.addItem(new BottomNavigationItem(
R.drawable.social_fill,R.string.bottom_nav_location)
.setInactiveIconResource(R.drawable.social)
.setActiveColorResource(R.color.yellow))
.addItem(new BottomNavigationItem(
R.drawable.profile_fill,R.string.bottom_nav_person)
.setInactiveIconResource(R.drawable.profile)
.setActiveColorResource(R.color.colorAccent))
.setFirstSelectedPosition(0)//默認顯示面板
.initialise();//初始化
}
private void initTab(){
listenFragmet = new ListenFragmet();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.content_main,listenFragmet);
transaction.commit();
}
@Override
public void onTabSelected(int position) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
switch (position){
case 0:
if(listenFragmet == null){
listenFragmet = new ListenFragmet();
}
transaction.replace(R.id.content_main,listenFragmet);
break;
case 1:
if(speechFragmet == null){
speechFragmet = new SpeechFragmet();
} transaction.replace(R.id.content_main,speechFragmet);
break;
case 2:
if(socialFragmet == null){
socialFragmet = new SocialFragmet();
}
transaction.replace(R.id.content_main,socialFragmet);
break;
case 3:
if(profileFragmet == null){
profileFragmet = new ProfileFragmet();
}
transaction.replace(R.id.content_main,profileFragmet);
break;
}
transaction.commit();
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
}
