Android第三方開源庫：底部導航欄

關於底部導航欄的開源庫由很多，除了前面介紹的Design/BottomNavigationView和BottomBar 底部導航欄 ,這裏在介紹幾個,都比較簡單。

分類

NavBar
AHBottomNavigation
BottomNavigationBar
BottomNavigationViewEx
BottomNavigation
BottomBar

NavBar

這裏不做太多介紹，下面是該庫的README.md
demo: http://git.oschina.net/BottomBar/NavBar01

基本使用

使用這個控件，只需要簡單的幾部

• 引入該控件到你的項目中

compile 'com.chen.wakehao.library:bottom-navigation-bar:1.0.0'

• res/meun/demo_menu.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:icon="@mipmap/ic_location_on_white_24dp"
        android:title="首頁"/>
    <item
        android:icon="@mipmap/ic_music_note_white_24dp"
        android:title="發現"/>
    <item
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="社交"/>
    <item
        android:icon="@mipmap/ic_videogame_asset_white_24dp"
        android:title="我的"/>
</menu>

• 在你的layout文件中將這個menu引入

app:menu="@menu/demo_menu"

• 如果想自動集成Fragment/ViewPager切換邏輯

item:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        fragment="com.paireach.navbar01.Frag1"
        android:icon="@mipmap/ic_location_on_white_24dp"
        android:title="首頁"/>
    <item
        fragment="com.paireach.navbar01.Frag2"
        android:icon="@mipmap/ic_music_note_white_24dp"
        android:title="發現"/>
    <item
        fragment="com.paireach.navbar01.Frag3"
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="社交"/>
    <item
        fragment="com.paireach.navbar01.Frag4"
        android:icon="@mipmap/ic_videogame_asset_white_24dp"
        android:title="我的"/>
</menu>

layout:

 <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/></FrameLayout>
<com.wakehao.bar.BottomNavigationBar
    ...
    app:fragmentContainerId="@id/fragment_container"
    ...
    />        

BottomNavigation

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

gradle

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

xml

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

Code

bottomTabs.addItem(new BottomNavigationItem(R.mipmap.shouye, "首頁"))
        .addItem(new BottomNavigationItem(R.mipmap.info, "查詢中心"))
        .addItem(new BottomNavigationItem(R.mipmap.personalcenter, "個人中心"))
        .setFirstSelectedPosition(0)
        .initialise();

setFirstSelectedPosition(0)默認選擇第一個item，但是僅僅是顯示效果，並不是真正的點擊了第一個item，所以如果默認顯示第一個fragment,人仍需要我們自己處理。

fm.beginTransaction().replace(R.id.fl_content, fragTab1, "FragTab1").commit();

或者：

bottomBar.selectTab(0);

選擇監聽：

bottomTabs.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
    @Override
    public void onTabSelected(int position) {
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position) {
            case 0:
                transaction.replace(R.id.fl_content, fragTab1, "FragTab1").commit();
                break;
            case 1:
                transaction.replace(R.id.fl_content, fragTab2, "FragTab2").commit();
                break;
        }
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
});

設置未讀消息數量

類TextBadgeItem用來設置未讀消息數量：

TextBadgeItem numberBadge = new TextBadgeItem()
        .setBorderWidth(0)
        .setBackgroundColorResource(R.color.blue)
        .setText("3")
        .setHideOnSelect(true);

如果只是用來顯示小紅點，沒有數字，那麼用ShapeBadgeItem

ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem()
        .setShape(ShapeBadgeItem.SHAPE_OVAL)
        .setShapeColorResource(R.color.red)
        .setGravity(Gravity.TOP | Gravity.END)
        .setHideOnSelect(false);

new BottomNavigationItem(R.mipmap.zhuye, "主頁").setBadgeItem(numberBadge)
new BottomNavigationItem(R.mipmap.zhuye, "主頁").setBadgeItem(shapeBadgeItem)