BottomNavigationBar酷炫導航欄

今年三月份Google在自己推出的Material design庫中增加了BottomNavigationBar導航欄控制器。以前想要實現這個效果可謂是方法衆多，五花八門像TabHost，RadioButton，textView等等，現在推出了這個就可以完美取代其它各式各樣的導航欄。

先放上效果圖

MODE_FIXED+BACKGROUND_STYLE_STATIC效果

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

先看下build.gradle

compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'

佈局內容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.wangchang.testbottomnavigationbar.MainActivity">

    <FrameLayout
        android:id="@+id/layFrame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />
</LinearLayout>

接下來都是在mainactivity的操作了

1.首先需要設置導航欄的模式和背景樣式

bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);

2.初始化導航欄標籤頁

  /**
         *添加標籤的消息數量
         */
        BadgeItem numberBadgeItem = new BadgeItem()
                .setBorderWidth(4)
                .setBackgroundColor(Color.RED)
                .setText("5")
                .setHideOnSelect(true);
        /**
         *添加tab標籤頁
         */
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_book_white_24dp, "Books").setActiveColorResource(R.color.teal).setBadgeItem(numberBadgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.ic_music_note_white_24dp, "Music").setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.mipmap.ic_tv_white_24dp, "Movies & TV").setActiveColorResource(R.color.brown))
                .addItem(new BottomNavigationItem(R.mipmap.ic_videogame_asset_white_24dp, "Games").setActiveColorResource(R.color.grey).setBadgeItem(numberBadgeItem))
                .initialise();
        /**
         *首次進入不會主動回調選中頁面的監聽
         *所以這裏自己調用一遍，初始化第一個頁面
         */
        onTabSelected(0);
        bottomNavigationBar.setTabSelectedListener(this);

接下來就是重要的部分了，對Fragment狀態進行保存。

 @Override
    public void onTabSelected(int position) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
      /**
        *每次添加之前隱藏所有正在顯示的Fragment
        *然後如果是第一次添加的話使用transaction.add();
        *但第二次顯示的時候,使用transaction.show();
        *這樣子我們就可以保存Fragment的狀態了
        */
        hideFragment(transaction);
        switch (position) {
            case 0:
                if (bookFragment == null) {
                    bookFragment = new BookFragment();
                    transaction.add(R.id.layFrame, bookFragment);
                    list.add(bookFragment);
                } else {
                    transaction.show(bookFragment);
                }
                break;
            case 1:
                if (musicFragment == null) {
                    musicFragment = new MusicFragment();
                    transaction.add(R.id.layFrame, musicFragment);
                    list.add(musicFragment);
                } else {
                    transaction.show(musicFragment);
                }
                break;
            case 2:
                if (tvFragment == null) {
                    tvFragment = new TvFragment();
                    transaction.add(R.id.layFrame, tvFragment);
                    list.add(tvFragment);
                } else {
                    transaction.show(tvFragment);
                }
                break;
            case 3:
                if (gameFragment == null) {
                    gameFragment = new GameFragment();
                    transaction.add(R.id.layFrame, gameFragment);
                    list.add(gameFragment);
                } else {
                    transaction.show(gameFragment);
                }
                break;
        }
        transaction.commit();
    }

隱藏Fragment

  /**
     * @param transaction
     */
    public void hideFragment(FragmentTransaction transaction) {
        for (Fragment fragment : list) {
            transaction.hide(fragment);
        }
    }

碎片的佈局就很簡單了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="book" />
</LinearLayout>

這裏還有個小問題，添加了5個標籤頁的時候，這樣保存Fragment狀態第二次切換回第一個標籤頁的時候就有問題無法正常切換，有興趣的小夥伴可以試一下！

這就是帶狀態保存的BottomNavigationBar