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

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

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

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

总之总结一下就是：

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

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

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

image

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

posted on 2016-11-04 15:13  木鱼哥  阅读(381)  评论(0)  编辑  收藏  举报

导航