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

本文同步自wing的地方酒馆

布吉岛大家有木有看这一篇文章，再见，汉堡菜单，我们有了新的 Android 交互设计方案

本库下载地址：https://github.com/githubwing/ByeBurgerNavigationView

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



总之总结一下就是：

滚动时隐藏： 我们希望在用户的屏幕上显示尽可能多的内容。因此，我们决定在向下滚动的时候隐藏导航栏，从而给内容区域提供更多的空间。而向上滚动可以使导航栏重新显现。

变换式导航栏： Material Design 底部栏有一个非常平滑的动画，它参考了变换式导航栏——在不同目标间切换的时候，被选中的部分会被放大，同时未被选中的元素会被向后移动，从而在导航栏上浏览不同的目标就有点像在浏览一个旋转木马。我们决定要使用这种效果因为它使得切换导航目标变得更加有趣了。我们希望这可以推动我们的用户更多地在应用的不同功能组间切换。同时，该动画在我们的下一个观点中非常重要。

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

先来看看使用我的库的效果：

第一步：写一个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

本库下载地址：https://github.com/githubwing/ByeBurgerNavigationView

欢迎加入我的android群:425983695