导航抽屉(Google+与YouTube的比较)

409

有人知道如何实现像今天一些顶级应用程序那样的滑动菜单吗?

其他 Stack Overflow 问题 没有任何关于如何实现这一点的答案,所以我正在尝试收集尽可能多的信息来帮助其他人。下面提到的所有应用程序都很好地实现了滑动菜单。

1. Google Plus(截至 7/7/12)

Google+ slide out menu screenshot

你只能通过点击左上角的G+标志才能从第一个屏幕进入第二个屏幕。请注意,整个屏幕会移动并被推到屏幕的右侧(包括工具栏)。要返回第一个屏幕,您可以将右侧滑回焦点位置,或再次单击G+图标。 2. YouTube(截至2012年7月7日)

YouTube slide out menu screenshot

您可以通过两种方法从第一个屏幕转到第二个屏幕。要么点击左上角的YouTube标志,要么使用滑动手势将其向右移动。这已经与G+应用程序不同了。其次,您可以看到操作栏保持不变(与G+不同)。最后,要恢复原始屏幕,只需像G+一样即可。


1
看起来,没有多少人有像这样的工作经验。我建议尝试自己实现一些东西,并在遇到具体问题时寻求 Stack Overflow 的帮助。 - David Titarenco
7
是的,这就是为什么我在其他地方发布了一个SO问题,我相信它值得更多的关注。我只是想知道是否有人已经成功完成了这个,并且愿意分享他们的智慧。 - EGHDK
1
@EGHDK 请查看这一系列的文章:http://android.cyrilmottier.com/?p=658 - Alex Lockwood
2
我之前回答过这个问题,但我现在想再次强调:Prixing 的 fly-out 菜单是目前最好的... 毫不夸张。它绝对美丽,完美流畅,让 Facebook、Google+ 和 YouTube 都相形见绌。EverNote 也不错... 但仍然没有 Prixing 完美。请查看这一系列帖子,了解 flyout 菜单是如何实现的(来自 Prixing 的首席开发人员!)。 - Alex Lockwood
2
随着Android支持包修订版13(2013年5月),现在有了DrawerLayout,可以创建一个可以从窗口边缘拉入的导航抽屉。而且,导航抽屉现在是一种设计模式。http://developer.android.com/tools/extras/support-library.html - Wubao Li
显示剩余12条评论
5个回答

154

编辑 #3:

导航抽屉模式已在Android文档中正式描述!

enter image description here 请查看以下链接:

  • 设计文档可以在这里找到。
  • 开发者文档可以在这里找到。

编辑 #2:

Google的Android设计工程师Roman Nurik确认,推荐的行为是不要在打开抽屉时移动操作栏(如YouTube应用程序)。请参见此Google+帖子


编辑 #1:

我之前回答过这个问题,但我想再次强调Prixing拥有迄今为止最好的弹出菜单...绝对漂亮,完美流畅,让Facebook、Google+和YouTube都相形见绌。EverNote也不错...但仍然没有Prixing完美。请查看这个系列的文章,了解如何实现弹出菜单(来自Prixing的首席开发人员!)。


原始答案:

Adam Powell和Richard Fulcher在Google I/O演讲“Android中的导航”中的49:47 - 52:50谈到了这个问题。

总结他们的回答,在发布本文时,滑出式导航菜单尚未正式成为Android应用程序设计标准的一部分。正如您可能已经发现的那样,目前没有本地支持此功能,但有关将其作为即将推出的支持包修订版的附加功能进行讨论。

至于YouTube和G+应用程序,它们的行为似乎有些奇怪。我最好的猜测是YouTube应用程序固定操作栏位置的原因是,

  1. 对于使用YouTube应用程序的用户来说,最重要的导航选项之一是搜索,这在操作栏的SearchView中完成。在这方面,使操作栏静态化是有意义的,因为它可以让用户始终拥有搜索新视频的选项。

  2. G+应用程序使用ViewPager来显示其内容,因此将拉出菜单针对布局内容(即动作栏下的所有内容)进行特定化并不太合适。滑动应该提供导航页面的手段,而不是全局导航的手段。这可能是他们决定在G+应用程序中以不同方式执行的原因。

    另外,请查看Google Play应用程序以获取“拉出菜单”的另一个版本(当您在最左边的页面时,向左滑动会出现一个拉出的“半页”菜单)。

你对于这并不一致的行为是正确的,但似乎Android团队内部尚未就应如何实现此行为达成100%共识。我不会感到惊讶,如果在将来更新应用程序时,两个应用程序的导航都变得相同(他们似乎非常热衷于使所有由Google制作的应用程序的导航保持一致)。


75
Prixing,Evernote和Spotify都有很大的团队编写他们的应用程序 我是Prixing的CEO,我想要明确我们只有一名真正的Android开发人员(但非常有才华,Cyril Mottier) - EricLarch
随着Android支持包修订版13(2013年5月),现在有了DrawerLayout,可以创建一个可以从窗口边缘拉入的导航抽屉。而且,导航抽屉现在是一种设计模式。http://developer.android.com/tools/extras/support-library.html - Wubao Li
尽管NavigationDrawer存在于V4中,但它需要ActionBar,而V4中尚未提供ActionBar,因此无法在API级别低于11的应用程序中使用它。 - Nayanesh Gupte
1
@NayAneshGupte,你可以始终使用ActionBarSherlock在API级别低于11的情况下使用ActionBar。 - tasomaniac
如果你想要关闭动画流畅,似乎没有绕过引入人工延迟的方法? - theblang
为什么其他人的回答都是社区维基,而你的不是呢 :P - SMR

15

最近我分叉了一个名为“RibbonMenu”的Github项目,并编辑它以适应我的需求:

https://github.com/jaredsburrows/RibbonMenu

目的是什么?

  • 易于访问:允许轻松访问滑入和滑出的菜单
  • 易于实现:使用最少的代码更新同一屏幕
  • 独立性:不需要支持类库,如ActionBarSherlock
  • 定制化:更改颜色和菜单很容易

有什么新变化?

  • 修改滑动动画以匹配Facebook和Google+应用程序
  • 添加标准ActionBar(您可以选择使用ActionBarSherlock)
  • 使用menuitem打开菜单
  • 添加在主Activity上更新ListView的功能
  • 添加了2个ListViews到菜单中,类似于Facebook和Google+应用程序
  • 还添加了一个AutoCompleteTextView和一个Button,以展示实现的例子
  • 添加了一个方法,允许用户在菜单打开时点击“返回按钮”来隐藏菜单
  • 与Facebook和Google+应用程序不同,允许用户同时与背景(主ListView)和菜单进行交互!

带菜单的ActionBar

带菜单的ActionBar

带菜单的ActionBar和搜索选择

带菜单的ActionBar和搜索选择


5

有一个非常出色的实现了NavigationDrawer,遵循Google Material Design Guidelines(并向下兼容到API 10) - MaterialDrawer库(GitHub链接)。截至撰写本文的时间,即2017年5月,该库仍在积极支持中。

它可以在Maven Central repo中找到。 Gradle依赖设置:

compile 'com.mikepenz:materialdrawer:5.9.1'

Maven依赖设置:

<dependency>
    <groupId>com.mikepenz</groupId>
    <artifactId>materialdrawer</artifactId>
    <version>5.9.1</version>
</dependency>

enter image description here enter image description here


@lmiguelvargasf,你如何想象将一个GitHub项目融入答案中?请分享你的想法。 - naXa stands with Ukraine

2
我知道这是一个老问题,但最新的答案是使用Android支持设计库,它会让你的生活更加轻松。请注意保留HTML标签。

2
个人而言,我喜欢 Google Drive 官方应用程序中的导航抽屉。它非常好用且功能强大。我同意导航抽屉不应该移动操作栏,因为打开和关闭导航抽屉是关键点。
如果您仍在尝试获取该行为,我最近创建了一个名为“SherlockNavigationDrawer”的项目,并且正如您所期望的那样,它是使用 ActionBarSherlock 实现的导航抽屉,并适用于早期的 Honeycomb 设备。请查看链接: SherlockNavigationDrawer github

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接