仅2步实现 滚粗 汉堡导航栏效果~ 全新底部导航交互

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

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

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

总之总结一下就是:

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

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

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

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

第二部,创建一个menu xml

之后在代码里将viewpager和byeburger关联即可

以上就完成了使用~

如果你觉得还不错 欢迎star

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

欢迎加入我的android群:425983695

发表评论

电子邮件地址不会被公开。