仅2步实现 拜拜 汉堡导航栏效果~ 全新底部导航交互(滑动隐藏)

抄了 @ImmortalZ 哥们的标题..别怪我哈

本文同步自wing的地方酒馆
布吉岛你们有木有看这一篇文章，再见，汉堡菜单，咱们有了新的 Android 交互设计方案

本库下载地址：github.com/githubwing/…

里面介绍的新得交互是这样的：

总之总结一下就是：

• 滚动时隐藏： 咱们但愿在用户的屏幕上显示尽量多的内容。所以，咱们决定在向下滚动的时候隐藏导航栏，从而给内容区域提供更多的空间。而向上滚动可使导航栏从新显现。
• 变换式导航栏： Material Design 底部栏有一个很是平滑的动画，它参考了变换式导航栏——在不一样目标间切换的时候，被选中的部分会被放大，同时未被选中的元素会被向后移动，从而在导航栏上浏览不一样的目标就有点像在浏览一个旋转木马。咱们决定要使用这种效果由于它使得切换导航目标变得更加有趣了。咱们但愿这能够推进咱们的用户更多地在应用的不一样功能组间切换。同时，该动画在咱们的下一个观点中很是重要。

恩~ 看起来效果还不错，因此我就封装了一下系统的BottomNavigationView而且添加了滑动隐藏效果~ 实现如上图效果，只须要2步！

先来看看使用个人库的效果：

在gradle添加

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}


dependencies {
   compile 'com.github.githubwing:ByeBurger:v1.0'
  compile 'com.android.support:design:25.0.0'
  }复制代码

第一步：写一个xml，以CoordinatorLayout为跟布局。把ByeBurgerNavigationView加入到布局中

<android.support.design.widget.CoordinatorLayout>
  <Viewpager />
  <com.wingsofts.byeburgernavigationview.ByeBurgerNavigationView 
      <--! important --> 
        app:menu="@menu/bottom"
        app:layout_behavior="@string/bye_burger_behavior"  
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
   />
</android.support.design.widget.CoordinatorLayout>复制代码

注意app:menu是给菜单的布局关联的，app:layout_behavior是库自留behavior的包名。。照写就对了。。

第二部，建立一个menu xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
  <item android:icon="@drawable/ic_home_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="home"/>

  <item android:icon="@drawable/ic_search_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="search"/>
  <item android:icon="@drawable/ic_account_circle_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="me" />
  <item android:icon="@drawable/ic_settings_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="setting" />
</menu>复制代码

以后在代码里将viewpager和byeburger关联便可

mByeBurger.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
          @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            if(item.getTitle().equals("home")){
              mViewPager.setCurrentItem(0);
            }else if(item.getTitle().equals("search")){
              mViewPager.setCurrentItem(1);
            }else if(item.getTitle().equals("me")){
              mViewPager.setCurrentItem(2);
            }else if(item.getTitle().equals("setting")){
              mViewPager.setCurrentItem(3);
            }
            return false;
          }
        });复制代码

以上就完成了使用~

若是你以为还不错 欢迎star

本库下载地址：github.com/githubwing/…

欢迎加入个人android群:425983695