符合Material Design的抽屉导航效果

符合Material Design的抽屉导航效果

前言:

现在看来,抽屉式导航已经成为主流导航模式之一。尽管广受批评,但我还是很喜欢该样式,因此我决定在我写的几个app上添加这个控件。这篇文章想通过介绍我觉得抽屉式导航有趣的地方,帮助阅读本文的 Android 开发者们学习到一些知识,同时从其他人的评论中学习到更多的东西。

这是三篇文章中的第二篇。欢迎查看第一篇和第三篇:

* [Material Design下的抽屉导航的大小](https://medium.com/@sotti/navigation-drawer-styling-under-material-design-f0767882e692)* Material Design下的抽屉效果的行为(敬请期待)

你可以从下面查看Material Design指南上关于抽屉导航的部分:

* [Navigation Drawer pattern]()* [Material Design metrics and keylines](#)* [Toolbar metrics](#structure-toolbars)开始:

抽屉式导航一直以来都是被争论的热点话题。当 Material Design 规范刚发布的时候,抽屉式导航就在规范中处在一个尴尬的位置,使得开发者们很困惑到底要不要使用抽屉式导航,甚至在 Material Design 规范下的开发指南出来以后,有关如何在 Android 开发中对待抽屉式导航都没有一个清晰的答案。

现在,,虽然这儿已有一些漂亮的库,甚至有一些Google的源码能拿来看看… 但是,你之所以还来到这里,可能是因为你热衷于编程。

在这篇文章里,我将会谈论如何使用抽屉的样式,但是并不会完全涉及 Material Design 指南上的所有样式,只是捡一些我认为需要强调的东西。

准备好了吗?

位置

在过去,抽屉式导航栏 和 ActionBar 处于同一个 View 层级

随着这种设计模式的发展,其中相互矛盾的地方也开始浮出水面……在 Material Design 中很清晰地指出:处于不同 View 层级的两个页面,是不能共存于同一个父布局中的同一个 View 层级的。有关这个问题引发了许多讨论,但更重要的是, Google 并没有给出好的解释,不过最后抽屉式导航还是得到了一个被认可的定义:

左抽屉式导航打开后,导航栏的高度应该和屏幕一致,但要低于状态栏。此外,其他任何在抽屉层以下的内容都应该被阴影覆盖,但这些内容又是可见的。

左侧的导航抽屉横跨屏幕的高度并覆盖下方的状态栏。抽屉下的东西将会变暗。但仍是可见的。

注意图中右边的抽屉略有不同。

注:我假设你使用的是AppCompat toolbar

既然toolbar是View 层级的另一个view,不妨就就将toolbar置于抽屉的layout之下,跟其他的view一样。

如果你在Google应用上看到如下的东西也不用担心:

Google+ Photos可能是最后一个使用抽屉,却没有覆盖ActionBar/Toolbar的Google应用,但是我想他应该很快就会被改过来。

旋转标题图标

你还记得当抽屉打开时那个ActionBar/Toolbar中的漂亮的图标动画吗?这个动画在Holo主题下并不是很好看,在 Matarial Design 下却很漂亮。

我觉得当它第一次出现在Google Play Store时,很多的开发者和设计师都会很喜欢它。

仅在那数周之后,抽屉式导航上就开始出现该动画。那时它显得很特别,因为在Google Material Design videos 和 promo features上都出现了它的身影。

我记得很多人在第一次遵循 Matarial Design 规范开发时,就是使用这个汉堡/箭头图标动画。Google第一次实现这个抽屉式导航栏的时候,并不是把它放在 ToolBar 的上面,因此你可以看到这个精美的动画。但是 Material Design 指南发布后,出现了一个很奇怪的现象,很多的Google应用都在做与 Material Design 指南背道而驰的事情。即使是现在我写这篇博文的时候,大部分的应用还是在遵循着 Material Desgin 指南,但我还是希望抽屉式导航栏都能在 Toolbar 上面。

在我看来,Material Design发布的已经有点晚了。因为图标动画已出现在发布了的SDK中并且在默认情况下被使用了。

由于某些原因,即使要求把抽屉导航栏布局到其他的view之上,但大多数的google应用还是会有这样的动画(注:在写下这篇文章的时候,Gmail和Inbox已经停用了),即使你很难发现它(但如果你仔细看的话,在缓慢的移动抽屉式导航时,还是可以看到动画的)。让我很不爽的是:一旦你看到了,又会每次都忍不住去看,得不偿失。因此,我也决定关掉这种动画效果。

第一眼看来,DrawerArrowStyle的参数很容易懂:

在移动抽屉导航栏的过程中,无论图标是否应该旋转,都要设定一个布尔值:要么是 true,要么是false.

但问题是,这并不能起到作用。如果你设置为false,bars就会以一种奇怪的方式旋转。

我发现的解决的方式是:覆写onDrawerSlide方法。见下面链接的Gist。

既然这个图标动画的可视性较差,那就没有必要再保留它了。如果你不注意看,你就看不到它,但当你注意看并看到的时候,又不知道是怎么回事。

资料图片

这张个人头像是圆形的,我们有很多方法能让图片变成圆形,但我每次需要实现这个需求想起的都是 Romain Guy 的方法。所以这次我还是使用了 Romain Guy 的 CircleImageView,毕竟“信RM,无BUG”。有人可能会提到 Google IO 大会上被使用的那个 App,我还没去了解过它的具体实现,可能值得我们看一看吧。

在Google Paly Movies与Google Paly Books上,这个图片有一个白色的边框。而其他的Google app上却没有。Google+和Hangouts的资料图片在toolbar上,不过却有白边框。

注意:查看资料图片大小

资料图片是圆形的,通常没有边框。建议你通过Romain Guy推出的库来获得圆形。

封面图片

封面图片(不同于资料图片),是账号/头像部分的背景(就是抽屉式导航的上部,通常你可以在此切换账号,查看昵称,email和你的资料图片)。

这块的文字是白色的,并且要确保能看的见,你可以应用一个前景或者半透明的黑色来覆盖封面图片。我试了一下,发现40-50% 的黑色是最好的。要注意的是,不要既弄得图片不可见,又弄得文字没法读。

喜欢就该珍惜,珍惜就别放弃。

符合Material Design的抽屉导航效果

相关文章:

你感兴趣的文章:

标签云: