Android底部導航BottomNavigationBar

項目地址：

https://github.com/Ashok-Varma/BottomNavigation

參考

1.http://www.jianshu.com/p/0550500f8f56

2.http://blog.csdn.net/qq_16131393/article/details/51419901

 

一、樣式

• 底部導航的action一般是3-5個，小於3個推薦使用tab，大於三個推薦使用navigation drawer
• 在切換的時候，使用cross-fade動畫，避免視圖間的橫向移動

二、Fixed、Shifting

Bottom navigation，有兩種Mode：分別是Fixed、Shifting

Fixed：

Shifting：

三、代碼實現

1.依賴：

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

2.佈局文件：

<com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
        <!--app:bnbAutoHideEnabled="false"/>-->

三、Activity中的實現，注意的參數

1.設置導航欄模式：setMode（）

Attribute:  mode_fixed, mode_shifting,mode_default
Method: setMode()  Values：MODE_FIXED, MODE_SHIFTING

.setMode(BottomNavigationBar.MODE_FIXED)；

2.設置導航欄背景模式：setBackgroundStyle（）

Attribute: background_style_static, background_style_ripple,background_style_default

Method:setBackgroundStyle（）Values：BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)      

3.設置BottomNavigationItem顏色

Attributes: bnbActiveColor, bnbInactiveColor, bnbBackgroundColor Value: Color value or resource 
Methods: setActiveColor, setInActiveColor, setBarBackgroundColor Value: Color value or resource

BottomNavigationItem
.setActiveColorResource(R.color.primary)

4.添加標記BadgeItem

 BadgeItem numberBadgeItem = new BadgeItem()
                .setBorderWidth(4)
                .setBackgroundColorResource(R.color.blue)
                .setText("5")
                .setHideOnSelect(autoHide.isChecked());  // TODO 控制便籤消失或不消失

     bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))
 // TODO 設置 BadgeItem 默認隱藏 注意 這句代碼在添加 BottomNavigationItem 以後
 numberBadgeItem.hide();  

5.設置事件監聽器TabChangeListener

 bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
            @Override
            public void onTabSelected(int position) {
            }
            @Override
            public void onTabUnselected(int position) {]
            }
            @Override
            public void onTabReselected(int position) {
            }
        });

 

 

展現

MODE_FIXED+BACKGROUND_STYLE_STATIC效果

DE_FIXED+BACKGROUND_STYLE_RIPPLE效果

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

 

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

 

案例的實現

JAVA

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {


    @BindView(R.id.bottom_navigation_bar)
    BottomNavigationBar mBottomNavigationBar;
    @BindView(R.id.fragment_container)
    FrameLayout mFrameLayout;
    private BookFragment mBookFragment;
    private LikeFragment mLikeFragment;
    private UserFragment mUserFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        InitNavigationBar();

    }

    private void InitNavigationBar() {
        mBottomNavigationBar.setTabSelectedListener(this);
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
        mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.literature_100, "圖書").setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.like_100, "收藏").setActiveColorResource(R.color.teal))
                .addItem(new BottomNavigationItem(R.drawable.user_100, "設置").setActiveColorResource(R.color.blue))
                .setFirstSelectedPosition(0)
                .initialise();
    }

    /**
     * 設置默認的
     */
    private void setDefaultFragment() {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        mBookFragment = BookFragment.newInstance();
        transaction.replace(R.id.fragment_container, mBookFragment);
        transaction.commit();
    }

    @Override
    public void onTabSelected(int position) {
        Log.d("onTabSelected", "onTabSelected: " + position);
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position) {
            case 0:
                if (mBookFragment == null) {
                    mBookFragment = BookFragment.newInstance();
                }
                transaction.replace(R.id.fragment_container, mBookFragment);
                break;
            case 1:
                if (mLikeFragment == null) {
                    mLikeFragment = LikeFragment.newInstance();
                }
                transaction.replace(R.id.fragment_container, mLikeFragment);
                break;
            case 2:
                if (mUserFragment == null) {
                    mUserFragment = UserFragment.newInstance();
                }
                transaction.replace(R.id.fragment_container, mUserFragment);
                break;
            default:
                break;
        }
        // 事務提交
        transaction.commit();
    }

    @Override
    public void onTabUnselected(int position) {
        Log.d("onTabUnselected", "onTabUnselected: " + position);
    }

    @Override
    public void onTabReselected(int position) {
        Log.d("onTabReselected", "onTabReselected: " + position);
    }
}

XML

<?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.ryan.simplereading.MainActivity">

    <FrameLayout
        android:id="@+id/fragment_container"
        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>