Material Design新秀Bottom navigati

2016-03-28 本文已影响3099人 Heykel

前几天我们了解了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

Material Design新秀Bottom navigati

猜你喜欢

热点阅读