Implementing Adaptative UI Flows [实现可适应的UI流程]
Depending on the layout that your application is currently showing, the UI flow may be different. For example,
if your application is in the dual-pane mode, clicking on an item on the left pane will simply display the content on the right pane; if it is in single-pane mode, the content should be displayed on its own (in a different activity).
【根据显示不同的layout,我们需要设计不同的UI flow。比如如果你的AP是dual-pane的模式,点击左边list的item的时候,会在右边直接显示对应的内容,如果是single-pane的模式,那么需要跳转到另外一个Activity来显示对于的内容】
注:个人认为目前很多AP都会针对比较大的屏幕设计一个对于的版本,比如QQ Pad版,QQ HD版,QQ Pad Mini版,这些信息可以看出来大多数情况,还是不太会采取同一份代码适应所有屏幕的方案。
这一课主要就是讲如何在运行的时候判断当前的布局,从而让AP选择不同行为。
Determine the Current Layout [判断当前的布局]
Since your implementation of each layout will be a little different, one of the first things you will probably have to do is determine what layout the user is
currently viewing. For example, you might want to know whether the user is in "single pane" mode or "dual pane" mode. You can do that by querying if a given view exists and is visible:
【显然,为了现实不同UI flow的设计,我们首先需要知道当前使用的是哪个布局,two-pane or single-pane,因为前面讲到系统会自动根据当前屏幕来选择显示对应的布局文件】
- 方法一:我们可以查询对应的View是否存在并且可见来判断目前的布局是哪个
- 方法二:我们可以判断某个组件是否存在来执行需要的操作(比如two-pane下没有categoryButton[因为two-pane下被actionBar替代],而single-pane下则有)
React According to Current Layout [根据当前布局有不同的反应]
Some actions may have a different result depending on the current layout. For example, in the News Reader sample, clicking on a headline from the headlines list
opens the article in the right hand-side pane if the UI is in dual pane mode, but will launch a separate activity if the UI is in single-pane mode:
【某些动作会根据当前的布局而有不同的反映。例如如果你的AP是dual-pane的模式,点击左边list的item的时候,会在右边直接显示对应的内容,如果是single-pane的模式,那么需要跳转到另外一个Activity来显示对于的内容】
Reuse Fragments in Other Activities [在其他Activities里重用Fragments]
某些时候,我们可以重用一些组件,比如in the News Reader sample, the news article text is presented in the right side pane on large screens, but is a separate activity on smaller
screens.
In cases like this, you can usually
avoid code duplication by reusing the sameFragment
subclass in several
activities. For example,ArticleFragment
is used in the dual-pane layout:
[在这种情况下,我们可以重用同一个Fragment在若干个Activities里面而避免duplication.例如,ArticleFragment
被使用在dual-pane的布局里面]
并且被重用在small screens里面
显然,这样做的效果可以和声明一个布局文件效果一致,在这样的情况下,布局文件其实是另外一个Activity的组件,我们可以直接重复利用
One
very important point to keep in mind when designing your fragments is to not create a strong coupling to a specific activity. You can usually do that by defining an interface that abstracts all the ways in which the fragment needs to interact with its host
activity, and then the host activity implements that interface:
[当设计fragments的时候我们需要记住的是:不要为特定的activity创建一个强耦合的fragment,我们可以使用定义一个接口来和host
activity进行交互]
For example, the News Reader app'sHeadlinesFragment
does
precisely that:
Then, when the user selects a headline, the fragment notifies the listener specified by the host activity (as opposed to notifying a specific hard-coded activity):
[这样,当用户点击头条项的时候,这个fragment会通知host activity的listener进行操作,在listener的onHeadlineSelected方法里面会进行当前布局的判断,从而选择合适的UI(是显示在右边还是另起一个activity)]
Handle Screen Configuration Changes [Handle屏幕配置的改变]
If you are using separate activities to implement separate parts of your interface, you have to keep in mind that it may be necessary to react to certain configuration
changes (such as a rotation change) in order to keep your interface consistent.
[如果我们在使用分离的activity来实现不同的模块,那么为了保持UI的连续性,我们需要记住目前的配置信息]
For
example, on a typical 7" tablet running Android 3.0 or higher, the News Reader sample uses a separate activity to display the news article when running in portrait mode, but uses a two-pane layout when in landscape mode.
[比如,在跑3.0或者更高版本系统的7“的平板上,News Reader会在竖屏的时候使用另外一个activity来打开文章详情,在横屏的时候使用two-pane的布局(直接显示在右边)]
分享到:
相关推荐
vuforia-samples-advanced-android-ios-unity-4-2-3.zip官网下载太慢了,放在网盘方便大家下载
A low-cost Android screen adaptation solution (今日头条屏幕适配方案终极版,一个极低成本的 Android 屏幕适配方案). Overview Pixel 2 XL | 1440 x 2880 | 560dpi: Pixel XL | 1440 x 2560 | 560dpi: ...
advanced-spark-training.pdf
vuforia-samples-advanced-android-7-1-34 方便安卓的高通AR的unity示例包
Qt-Advanced-Docking-System-master
Advanced Android App Architecture pdf + epub + source code
《Android进阶解密》源码 源码目录介绍 目录 简介 chapter_12 第12章 理解ClassLoader chapter_13 第13章 热修复原理 chapter_14 第14章 Hook技术 chapter_15 第15章 插件化技术 本书内容 本书共...
RPA 流程机器 人 UiPath官网Level1 课程 Lesson3 99%题库
yii-advanced-app-2.0.4 下载
谷歌浏览器的api接口测试工具Advanced-REST-client
Advanced Bash-Scripting Guide
qt Qt-Advanced-Docking-System 使用教程 示例代码
Advanced UI - MDI list in the status bar (and a custom Window List dialog)(62KB)
Advanced Bash-Scripting Guide 3.9.1 (包括中译本) 作者:thegrendel 主页:http://personal.riverusers.com/~thegrendel 中译本:杨春敏(chunmin.yang at gmail.com) 黄毅 (linuxprogram at gmail.com)...
STM32F100xx advanced ARM-based 32-bit MCUs 手册 最新版
关于Android开发的电子书。本书从不同视角介绍了Android内在特点和结构,适合Android的初学者阅读。
网上的别人的android例子,可以跟着看下,入门的 FragmentExample_start LocaleText3_start LocaleText_start MemoryOverload RecyclerView_start Scorekeeper_start SimpleAccessibility_start...
谷歌插件Advanced-REST-client 谷歌插件Advanced-REST-client 谷歌插件Advanced-REST-client 谷歌插件Advanced-REST-client
Android高级注册登录UI Android高级注册/登录设计概念 这是预期的结果 这就是我们所达到的
互联网 Java 工程师进阶知识完全扫盲 本系列知识出自中华石杉,我对这部分知识做了一个系统的整理,方便学习查阅。By the way,微信公众号石杉的架构笔记(id:shishan100)有其它很多架构知识,墙裂推荐~ ...