Android Navigation Drawer样式抽屉的使用

简介:

 NavigationDrawer(导航抽屉)是一个从屏幕的左边缘过渡并且显示app的主要导航操作的面板。


显示Navigation Drawer

   用户能够从屏幕左边缘滑动滑块或者点击appActionBar上的图标调使Navigation Drawer显示到屏幕。

   作为NavigationDrawer的扩展,它覆盖主内容除了ActionBar。当导航抽屉被完全的展开时,ActionBar通过替换当前带有app名字的ActionBar和移除全部的由导航抽屉支配的视图有前后关系的行为。带有SettingHelp操作的标准操作项的溢出菜单是仍然显示。

因为它们是短暂的,所以导航抽屉使视图减少混乱。你也可以使用它们在导航等级中较低的等级,允许使用者能够从app的任何地方都能够转换到其他重要的页面。

在App的任何位置,从屏幕左边滑动,就可打开NavigationDrawer


隐藏NavigationDrawer

   当导航抽屉是被展开时,用户可以隐藏它通过四种方法:

  • 触摸NavigationDrawer以外的内容

  • 在屏幕上的任何地方向左滑动(包括点击屏幕右边缘)

  • 点击appActionBar的图标或者标题

  • 点击后退键


什么时候使用导航抽屉

   导航抽屉并不是一般意义上顶层导航菜单(spinners)或者导航标签(tabs)的替换,你的app应用结构应当指引你对顶层转换使用哪种模式。更多关于顶层转换机制信息,请查看应用结构设计模式

这里有一些导航抽屉在一些地方应用较好的例子:

顶层菜单视图超过三个

导航抽屉能很好的处理同时放置很多导航视图(targets)的情况,如果你有超过3个顶层视图的话,使用导航抽屉是很合适的,如果你不想使用导航抽屉,也可以使用固定的导航标签来简化顶层菜单的展示以及交互。


低层视图交叉导航

如果你的app应用需要在非顶层视图界面间交叉导航,考虑使用导航抽屉。因为它的内容可以来源于应用程序的任何地方,导航抽屉能够有效地让你的页面从非顶层界面跳转到应用程序中其它重要的地方。

导航抽屉使得非顶层页面间的交叉导航变得可能


深层导航分支

如果你有更深层的导航分支,使用返回键重新导航到应用程序的顶层页面就变得重复而且麻烦。正因为导航抽屉的内容可以来源于应用程序的任何地方,导航到顶层页面变得更快,效率更高。


navigation drawer允许快速跳转到应用程序的顶级页面,而无需按重复返回。


导航中心

   在你的程序结构当中,导航抽屉是一个映像,主要用于展示你的导航中心。考虑导航中心这些方面,使用者会经常通过它跳到这个程序的另外一个部分。最起码而言,导航中心是最高级的视图,它适合你的程序的最主要的功能。

   如果你的程序结构比较深,你添加的视图须从较低的水平深度,这样你的使用者将会经常性的使用你的导航中心。

你的所有导航抽屉都包含在你程序的导航中心。高分辨率的屏幕和低分辨率的都一样重要。


   适合在导航中心使用导航抽屉的位置是,所有的屏幕在你的导航抽屉应该一个一致入口,显示导航抽屉指示程序图标应该在动作条当中。触发图标可以让导航抽屉从左边滑出。所有其他的低分辨屏幕显示了传统的程序图标,抽屉仍是侧滑,但不是特色在动作条当中。

抽屉式导航的内容

   注意抽屉式导航的内容主要在于应用程序的导航。你的导航中心内容是应用程序成列表一样呈现在抽屉式导航里---每行是一项。

标题,图标和序号

你可以通过添加标题来组织你的导航结构。你的标题不是相互联系的,仅仅只是用来将目标转入所属的功能模块。如果你有很多需要导航的目标,在抽屉里使用标题来为用户定位。

   导航目标可以使用有明显特征的图标及序号。使用序号去提醒用户在相应视图内数据的状态改变。







使用标题和图标去组织你的抽屉


折叠式的导航项

   如果你有许多从属于其他项的视图,考虑将它们分到一个可扩展的项中,以便于节省空间。然后在抽屉式导航里的父项可以分成一个分项。左边允许父项视图的导航,右边呈现出子项的列表。

   在运行的时候,呈现给你的是一个分项的最初状态。而我们规定,所有顶端视图在抽屉式导航里都是可见的。如果你有很多可折叠项,考虑将所有项折叠到用户可以看到的顶级视图中。

   当用户打开抽屉里的一个顶级视图时,给相应的顶级视图分配一个足够的空间,并在顶端显示用户在应用程序中的当前位置。


可折叠项是分开的。左侧是导航,右侧是分离出来的项

Navigation Drawers 和 Action Bars

   当用户展开的导航抽屉,任务焦点切换到从抽屉中选择一个项目。因为抽屉不会覆盖操作栏中,用户可能没有意识到,在操作栏项目不涉及到导航抽屉。

为了减少混乱,调整以下操作栏的内容,一旦完全展开的抽屉:

·应用程序图标

·应用程序名称

·删除操作栏中的行动基础的视图(如创建新的刷新)是上下文。您可能会保留与全球范围内的行动,如搜索

·溢出与预期的导航目标,如设置和帮助菜单。

清理抽屉时,操作栏完全展开。删除不需要的行动,并在标题区中显示您的应用程序的名称

操作

   请勿将行动在导航抽屉。操作属于在操作栏中,用户希望看到他们。请记住,不是所有的应用程序使用的导航抽屉模式。它可能是很有诱惑力的,露出你的应用程序的所有功能,在同一个地方,但在心中保持大局观。将你的行动,所有的应用程序,显示它们。

这也适用于通用的导航目标,如获得帮助,或应用程序的设置。每款指南惯例帮助和设置始终位于行动溢出。


上下文操作栏

   有时用户会在上下文操作栏(CAB)的状态下出现,而不是应用程序的行动吧。这通常发生在用户选择的文本或选择多个项目后,按下并保持姿态。虽然CAB是可见的,你仍然应该允许用户打开该导航抽屉采用边缘轻扫。然而,取代CAB标准动作栏,而导航打开抽屉。当用户关闭抽屉,重新显示CAB

隐藏上下文操作栏,而抽屉可见。

   如果用户浏览远离之前选定的内容,取消选择的内容之前,导航到新的视图。

风格

   导航抽屉的宽度取决于你想展示的内容。但是应该在240dp320dp之间。每一个列表的高度不应该超过48dp.布局应该根据建议的指导方针以确定边缘和空间。

导航抽屉的布局指导

   挑选抽屉的背景最好和你的程序主题相匹配。完整的高亮主题和完整的暗色的主题抽屉。

本文转自HDDevTeam 51CTO博客,原文链接:http://blog.51cto.com/hddev/1254472,如需转载请自行联系原作者
相关文章
|
8月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
247 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
12月前
|
搜索推荐 Android开发 开发者
Android星级评分条RatingBar样式的改变及出现问题的解决方法
本文介绍了自定义 RatingBar 的实现方法,通过布局文件、layer-list 样式文件和 style 文件的配置完成个性化星星评分效果。关键步骤包括:1) 在布局文件中添加 RatingBar 并引用样式;2) 创建 layer-list 文件定义背景、次级进度和进度图片;3) 在 style 文件中定义 RatingBar 样式并应用到布局中。可能出现的问题及解决办法:直接报错通常是图片素材过大,调整尺寸即可;星星流眼泪是图片形状问题,需将图片置于透明圆形或正方形内重新组合。附有具体代码示例,方便开发者快速上手实现自定义评分组件。
470 12
|
12月前
|
Android开发 开发者
Android中Dialog位置+样式的设置
本文介绍了在Android开发中如何设置Dialog的位置和样式。通过自定义`MyDialog`类,可以灵活调整Dialog的显示位置,例如将其固定在屏幕底部,并设置宽度匹配父布局。同时,文章还展示了如何模仿Android原生Dialog样式,通过定义`MyDialogStyle`去除标题栏、设置背景透明度、添加阴影效果以及配置点击外部关闭等功能,从而实现更加美观和符合需求的Dialog效果。代码示例详细,便于开发者快速上手实现。
665 2
|
12月前
|
XML 搜索推荐 Android开发
Android改变进度条控件progressbar的样式(根据源码修改)
本文介绍了如何基于Android源码自定义ProgressBar样式。首先分析了系统源码中ProgressBar样式的定义,发现其依赖一张旋转图片实现动画效果。接着分两步指导开发者实现自定义:1) 模仿源码创建一个旋转动画XML文件(放置在drawable文件夹),修改图片为自定义样式;2) 在UI控件中通过`indeterminateDrawable`属性应用该动画。最终实现简单且个性化的ProgressBar效果,附带效果图展示。
679 2
|
12月前
|
Android开发
Android控件样式的抽取(小提及快捷方式)
在Android开发中,若多个控件样式重复,可抽取公共部分以简化代码。例如对EditText提取样式,通过编辑`styles.xml`实现复用。为提高效率,Android Studio提供自动提取Style功能:右键点击控件样式选项,选择“Style...”,勾选需要提取的属性后确认,即可快速生成样式代码,显著提升开发便利性。
351 2
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
451 6
|
Android开发 开发者
Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题
【6月更文挑战第25天】Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题,首先在`styles.xml`中定义新主题,如`MyAppTheme`,然后在`AndroidManifest.xml`中设置`android:theme`。可应用于全局或特定Activity。运行时切换主题需重置Activity,如通过`setTheme()`和`recreate()`方法。这允许开发者定制界面以匹配品牌或用户偏好。
571 2
|
7月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1322 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
976 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1074 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡