导航抽屉(Google+与YouTube)


403

有谁知道如何像今天的一些顶级应用一样实现滑动菜单?

其他Stack Overflow 问题对此没有任何答案,因此,我正在尝试收集尽可能多的信息以帮助其他人。我在下面提到的所有应用程序在实现幻灯片菜单方面都做得很好。

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

Google+滑出菜单屏幕截图

您只能通过单击左上角的G +徽标从第一个屏幕转到第二个屏幕。请注意,整个屏幕从其位置移动,并被微移到屏幕的右侧(包括操作栏)。要返回第一个屏幕,您可以将右侧滑回焦点,也可以再次单击G +图标。

2. YouTube(截至2012年7月7日)

YouTube滑出菜单屏幕截图

您可以使用两种方法从第一屏幕转到第二屏幕。单击左上角的YouTube徽标,也可以使用滑动手势将其向右移动。这已经与G +应用不同。其次,您可以看到操作栏保持放置状态(与G +不同)。最后,要恢复原始屏幕,它的工作方式就像G +。


1
从外观上看,没有多少人有从事过这样的工作的经验。我建议您尝试自己实现一些功能,然后针对您可能遇到的特定问题进行讨论。
David Titarenco

7
是的,这就是为什么我在其他方面发布了一个SO问题,我认为值得更多关注。我只是想知道是否有人成功完成了这项工作,并愿意分享他们的智慧。
EGHDK

1
@EGHDK查看以下系列文章:android.cyrilmottier.com/?
亚历克斯·洛克伍德

2
我在不久前回答了这个问题,但我要再次强调的是,Prix​​ing拥有迄今为止最好的弹出菜单。它绝对美丽,完美流畅,并且让Facebook,Google +和YouTube感到羞耻。EverNote也相当不错……但仍不如Prixing完善。查看有关如何实现弹出菜单的系列文章(来自Prixing的首席开发人员!)。
亚历克斯·洛克伍德

2
在android支持包修订版13(2013年5月)中,有DrawerLayout用于创建可以从窗口边缘拉入的导航抽屉。并且,导航抽屉现在是一种设计模式。developer.android.com/tools/extras/support-library.html

Answers:


152

编辑#3:

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

在此处输入图片说明 查看以下链接:

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

编辑#2:

Roman Nurik(Google的一名Android设计工程师)已确认,建议的行为是在打开抽屉(例如YouTube应用)时不要移动操作栏。查看此Google+帖子


编辑#1:

我不久前回答了这个问题,但我要再次强调的是,Prix​​ing那里有最好的弹出菜单……到目前为止。它绝对美丽,完美流畅,并且让Facebook,Google +和YouTube感到羞耻。EverNote也相当不错……但仍不如Prixing完善。查看有关如何实现弹出菜单的系列文章(来自Prixing的首席开发人员!)。


原始答案:

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

总结一下他们的答案,自发布之日起,滑出式导航菜单尚未正式纳入Android应用程序设计标准。正如您可能已经发现的那样,目前尚无对此功能的本机支持,但有人在谈论将其添加到即将发布的支持包修订版中。

对于YouTube和G +应用,它们的行为似乎有些奇怪。我最好的猜测是,YouTube应用修复了操作栏位置的原因是,

  1. 对于使用YouTube应用程序的用户而言,最重要的导航选项之一是搜索,该操作在SearchView操作栏中执行。在这方面,将操作栏设为静态是有意义的,因为它将允许用户始终具有搜索新视频的选项。

  2. G +应用程序使用a ViewPager来显示其内容,因此使特定于布局内容的拉出菜单(即动作栏下的所有内容)没有太大意义。滑动应该提供一种在页面之间导航的方法,而不是全局导航的方法。这可能就是为什么他们决定在Google+应用程序中与在YouTube应用程序中做不同的原因。

    另外请注意,请在Google Play应用中查看“拉出菜单”的另一个版本(当您位于最左侧页面时,向左滑动并显示拉出的“半页”菜单)。

您说对了,因为这不是非常一致的行为,但是Android团队内部似乎尚未就如何实现这种行为达成100%的共识。如果将来对这些应用程序进行更新以使两个应用程序中的导航都相同,我也不会感到惊讶(它们似乎非常热衷于使整个对话中的所有Google制造的应用程序之间的导航保持一致)。


73
Prix​​ing,Evernote和Spotify都有相当大的团队来编写应用程序,我是Prixing的首席执行官,我想精确地说,我们只有一名真正的Android开发人员(但非常有才华的开发人员Cyril Mottier)
EricLarch

在android支持包修订版13(2013年5月)中,有DrawerLayout用于创建可以从窗口边缘拉入的导航抽屉。并且,导航抽屉现在是一种设计模式。developer.android.com/tools/extras/support-library.html
Wuwu Li

虽然NavigationDrawer存在于V4它需要的ActionBar还未被所述V4所以不能够在应用中具有API级别使用它下面11内提供
Nayanesh Gupte

1
@NayAneshGupte,您始终可以使用ActionBarSherlock在API级别11以下使用ActionBar。–
tasomaniac

如果您想使近距离动画流畅,似乎没有办法引入人为延迟吗?
theblang 2014年

15

最近,我分叉了一个名为“ RibbonMenu”的当前Github项目,并对其进行了编辑以满足我的需要:

https://github.com/jaredsburrows/RibbonMenu

目的是什么

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

什么是新的

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

带菜单的ActionBar

带菜单的ActionBar

带有菜单并选择搜索的ActionBar

带有菜单并选择搜索的ActionBar


5

NavigationDrawer遵循Google材料设计指南(并向下兼容API 10)-MaterialDrawer库(链接到GitHub)进行了很好的实现。截至撰写本文时(2017年5月),它得到了积极的支持。

它在Maven Central仓库中可用。Gradle依赖项设置:

compile 'com.mikepenz:materialdrawer:5.9.1'

Maven依赖项设置:

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

在此处输入图片说明 在此处输入图片说明


@lmiguelvargasf您如何想象将GitHub项目拟合到答案中?请分享您的想法。
naXa


2

我个人喜欢navigationDrawerGoogle Drive官方应用中的。它只是工作而且效果很好。我同意导航抽屉不应移动操作栏,因为这是打开和关闭导航抽屉的关键点。

如果您仍在尝试这种行为,那么我最近创建了一个名为Call的项目SherlockNavigationDrawer,并且您可能会期望使用ActionBarSherlockHoneycomb之前的设备实现Navigation Drawer 并适用于该设备。核实:

SherlockNavigationDrawer github的

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.