前幾天我們了解了Bottom navigation的設(shè)計(jì)郁妈，今天我們我看看如何快速集成Bottom navigation矾削，本來之前還在糾結(jié)要不要按著Google的規(guī)范自己做一個(gè)開源的項(xiàng)目匪蟀，之后在Github上搜索了一下開源的項(xiàng)目，發(fā)現(xiàn)有類似做的相當(dāng)不錯(cuò)的卖局，我們就直接拿來用好了。在這個(gè)云時(shí)代我們寫程序也要有模塊化的思維号显，要懂得使用開源的項(xiàng)目臭猜、類庫(kù)。
三個(gè)條目顯示效果
五個(gè)條目顯示效果
平板顯示效果
- 首先添加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) {
// 進(jìn)行操作新建fragment或者綁定viewpager.
}
}
@Override
public void onMenuTabReSelected(@IdRes int menuItemId) {
if (menuItemId == R.id.bottomBarItemOne) {
// 進(jìn)行操作新建fragment或者綁定viewpager.
}
}
});
- 設(shè)置Bottom navigationBar的顏色
java
//超過三個(gè)tab可以設(shè)置設(shè)置底部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);
//這句話不可省略以免方向改變以后丟失當(dāng)前bar的狀態(tài)
mBottomBar.onSaveInstanceState(outState);
}
- 添加Badges
java
// 為第一個(gè)tab添加badge, 紅色的背景色押蚤，數(shù)值"11".
BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(0, "#FF0000", 11);
// 設(shè)置badge的可見性
unreadMessages.show();
unreadMessages.hide();
// 改變第一個(gè)tab的badge數(shù)目
unreadMessages.setCount(2);
// 改變顯示隱藏動(dòng)畫時(shí)間
unreadMessages.setAnimationDuration(200);
// 設(shè)置一直顯示
unreadMessages.setAutoShowAfterUnSelection(true);
- 個(gè)性化設(shè)置
java
// 設(shè)置平板的tab與mobile版的tab一致
mBottomBar.noTabletGoodness();
// 設(shè)置黑色主題（盡在tab數(shù)目為3的情況下可用）
mBottomBar.useDarkTheme(true);
// 設(shè)置當(dāng)前激活的tab的顏色（盡在tab數(shù)目為3的情況下可用）
mBottomBar.setActiveTabColor("#009688");
// 設(shè)置tab字體
mBottomBar.setTextAppearance(R.style.MyTextAppearance);
// 設(shè)置字體庫(kù)字體：存放于 "/src/main/assets"
mBottomBar.setTypeFace("MyFont.ttf");
- 設(shè)置滑動(dòng)隱藏
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>
這次的項(xiàng)目引用看起來更復(fù)雜了一點(diǎn)蔑歌，不過獲得的收益也會(huì)更多一點(diǎn)的，我們不妨從基礎(chǔ)開始做起
大神Github地址：https://github.com/roughike/BottomBar
