Android底部導航欄之BottomNavigationBar

一. BottomNavgationBar簡介

  • 鑒于官方BottomNavigationView還不是很完善，在此就先使用大佬們做的第三方庫
  • 本文講的是Ashok-Varma的BottomNavigation
  • 先看效果：
效果圖
效果圖
  • 特性：
  • 定制豐富的導航欄.
  • 遵循Google的底部導航規范
  • 每個Tab的模式可以選擇，每個Tab可以有自己的顏色.
  • 自定義圖標

二. 用法

2.1幾個重要的設置方法

  • /*設置背景顏色*/ setBarBackgroundColor()//參數為R.id.color或者RGB顏色值（String形式）
    該方法在BackgroundStyle為BottomNavigationBar.BACKGROUND_STYLE_STATIC的時候才生效

  • /*設置背景模式*/ setBackgroundStyle()
    該方法參數有三種（效果圖會配合TabMode一起展示）

  • BottomNavigationBar.BACKGROUND_STYLE_STATIC //靜態背景

  • BottomNavigationBar.BACKGROUND_STYLE_RIPPLE//點擊之后會擴散的背景

  • BottomNavigationBar.BACKGROUND_STYLE_DEFAULT//和RIPPLE好像一樣

  • /*設置Tab點擊的模式*/ setMode()
    該方法參數也有三種

  • BottomNavigationBar.MODE_FIXED //自適應長度的Tab（Tab會均勻分布在整個長度內），Tab的文字默認顯示

  • BottomNavigationBar.MODE_SHIFTING //點擊之后會自己彈出來（Tab的文字默認不顯示，點擊之后才會顯示）

  • BottomNavigationBar.MODE_DEFAULT //和SHIFTING一樣

  • /*為導航欄添加Tab*/ addItem()
    該方法參數為BottomNavigationItem對象
    BottomNavigationItem的常用方法有：

/*構造函數（參數為當前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)

/*設置點擊狀態的Icon*/
setActiveIcon(Drawable mActiveIcon)（參數為drawable資源）
setActiveIconResource(@DrawableRes int mActiveIconResource) （參數為drawableId）

/*設置點擊狀態的Color*/
setActiveColor(int color)（參數為colorId）
setActiveColor(@Nullable String colorCode)（參數為String形式的RGB顏色值）
setActiveColorResource(@ColorRes int colorResource)（參數為colorResource）

/*設置未點擊狀態的Icon*/
setInactiveIcon(Drawable mInactiveIcon)（參數為drawable資源）
setInactiveIconResource(@DrawableRes int mInactiveIconResource) （參數為drawableId）

/*設置未點擊狀態的Color*/
setInActiveColor(int color)（參數為colorId）
setInActiveColor(@Nullable String colorCode)（參數為String形式的RGB顏色值）
setInActiveColorResource(@ColorRes int colorResource)（參數為colorResource）
  • setFirstSelectedPosition(0) //設置默認選中的Tab
  • initialise() //初始化（初始化之后才代表完成設置）

2.2效果圖（點擊之后的顏色效果在addItem()方法里面設置）

  • 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.進行必要的設置*/
bottomNavigationBar.setBarBackgroundColor(R.color.colorPrimary);
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);//適應大小
/*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的時候，背景顏色設置會無效，這時背景顏色會體現在setActiveColor()的設置上面*
  • 監聽器配置
  • 實現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) {

    }
  • 重載方法里實現需要的邏輯（一般就是開啟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.進行必要的設置*/
        bottomNavigationBar.setBarBackgroundColor(R.color.colorPrimary);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);//適應大小
        /*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) {

    }
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容