前幾天我們了解了Bottom navigation的設計，今天我們我看看如何快速集成Bottom navigation，本來之前還在糾結要不要按著Google的規范自己做一個開源的項目，之后在Github上搜索了一下開源的項目，發現有類似做的相當不錯的，我們就直接拿來用好了。在這個云時代我們寫程序也要有模塊化的思維，要懂得使用開源的項目、類庫。
三個條目顯示效果
五個條目顯示效果
平板顯示效果
- 首先添加gradle依賴
java
dependencies {
compile 'com.roughike:bottom-bar:1.2.4'
}
- 使用Menu資源添加
xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/bottomBarItemOne"
android:icon="@drawable/ic_recents"
android:title="Recents" />
<item
android:id="@+id/bottomBarItemTwo"
android:icon="@drawable/ic_friends"
android:title="Recents" />
<item
android:id="@+id/bottomBarItemThree"
android:icon="@drawable/ic_nearby"
android:title="Recents" />
<item
android:id="@+id/bottomBarItemFour"
android:icon="@drawable/ic_favorites"
android:title="Recents" />
<item
android:id="@+id/bottomBarItemFive"
android:icon="@drawable/ic_restaurants"
android:title="Recents" />
</menu>
- 代碼添加Bottom navigation Bar
java
mBottomBar = BottomBar.attach(this, savedInstanceState);
mBottomBar.setItemsFromMenu(R.menu.bottom_menu, new OnMenuTabClickListener() {
@Override
public void onMenuTabSelected(@IdRes int menuItemId) {
if (menuItemId == R.id.bottomBarItemOne) {
// 進行操作新建fragment或者綁定viewpager.
}
}
@Override
public void onMenuTabReSelected(@IdRes int menuItemId) {
if (menuItemId == R.id.bottomBarItemOne) {
// 進行操作新建fragment或者綁定viewpager.
}
}
});
- 設置Bottom navigationBar的顏色
java
//超過三個tab可以設置設置底部tab顏色
mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
mBottomBar.mapColorForTab(1, 0xFF5D4037);
mBottomBar.mapColorForTab(2, "#7B1FA2");
mBottomBar.mapColorForTab(3, "#FF5252");
mBottomBar.mapColorForTab(4, "#FF9800");
java
@Override
public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {
super.onSaveInstanceState(outState, outPersistentState);
//這句話不可省略以免方向改變以后丟失當前bar的狀態
mBottomBar.onSaveInstanceState(outState);
}
- 添加Badges
java
// 為第一個tab添加badge, 紅色的背景色，數值"11".
BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(0, "#FF0000", 11);
// 設置badge的可見性
unreadMessages.show();
unreadMessages.hide();
// 改變第一個tab的badge數目
unreadMessages.setCount(2);
// 改變顯示隱藏動畫時間
unreadMessages.setAnimationDuration(200);
// 設置一直顯示
unreadMessages.setAutoShowAfterUnSelection(true);
- 個性化設置
java
// 設置平板的tab與mobile版的tab一致
mBottomBar.noTabletGoodness();
// 設置黑色主題（盡在tab數目為3的情況下可用）
mBottomBar.useDarkTheme(true);
// 設置當前激活的tab的顏色（盡在tab數目為3的情況下可用）
mBottomBar.setActiveTabColor("#009688");
// 設置tab字體
mBottomBar.setTextAppearance(R.style.MyTextAppearance);
// 設置字體庫字體：存放于 "/src/main/assets"
mBottomBar.setTypeFace("MyFont.ttf");
- 設置滑動隱藏
java
mBottomBar = BottomBar.attachShy((CoordinatorLayout) findViewById(R.id.myCoordinator),
findViewById(R.id.myScrollingContent), savedInstanceState);
xml
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:id="@+id/myScrollingContent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your loooong scrolling content here -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
這次的項目引用看起來更復雜了一點，不過獲得的收益也會更多一點的，我們不妨從基礎開始做起
大神Github地址：https://github.com/roughike/BottomBar
