抄了 @ImmortalZ 哥们的标题..别怪我哈
本文同步自
布吉岛大家有木有看这一篇文章,本库下载地址:
里面介绍的新得交互是这样的:
总之总结一下就是:
- 滚动时隐藏: 我们希望在用户的屏幕上显示尽可能多的内容。因此,我们决定在向下滚动的时候隐藏导航栏,从而给内容区域提供更多的空间。而向上滚动可以使导航栏重新显现。
- 变换式导航栏: 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加入到布局中
复制代码 <--! 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" />
注意app:menu是给菜单的布局关联的,app:layout_behavior是库自留behavior的包名。。照写就对了。。
第二部,创建一个menu xml
复制代码
之后在代码里将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
本库下载地址:
欢迎加入我的android群:425983695