如何正确地写好一个界面.pdfVIP

如何正确地写好一个界面 写界面可以说是每位移动应用开发者的基本功 ，也是一位合 移动应用开发者绕不过去的坎。但就 如不是每一位开发者都能够成为合 的开发者一样 ，本人在不同的团队中发现 ，甚少有人能够编写 出合 的UI代码 ；而非常奇怪的是 ，在很多的开发者论坛上看到我们移动开发者更多关注于某个控 件或者是动画 ，但却很少看到深入剖析UI机制 ，指导UI开发的文章。 由于界面涉及到的方面实在过于广泛 ，本文不可能事无巨细 ，一一道来 ，所以本文先立足于点 ，深 入剖析iO S UI系统中不被重视却非常重要的机制 ，帮助本文读者对iO S的UI系统有整体了解 ；进而 以点带面 ，拓展到UI逻辑设计和架构设计模式的讨论 ；最后读文而有所思有所得 ，设计开发出高效 、易用、流畅的UI模块。 本文章节如下 ： 基础与本质 ：说明普遍意义上的UI系统的三大模块 ，让读者从整体上对UI系统有清楚的认识。 View ：深入View的内部机制 ，View与Layer之间的关系 ，以及Of f screen Render ； View Co nt ro ller ：讲解View Co nt ro ller在UI系统中所扮演的角色 ，以及UI架构设计 中View Co nt ro ller运用和实践 ； MV C、MV P、MVV M ：简单分析三种主流的架构设计模式及其异同 ，并简单提出了一些做架构 设计意见和想法 ； 总结。 各章节间没有必然的联系 ，读者可以选择感兴趣章节阅读。 1. 基础与本质 终端A pp开发区别于后端开发最大的不同 ，就是终端开发很大部分的逻辑是为用户提供界面以供人 机交互 ，即所谓的UI(User Int erf ace)。所以所有的UI架构主要关注三大模块 ：界面布局管理 ，渲染 及动画、事件响应 ； 1.1 布局管理 即在规定的坐标系统上 ，按照一定的层级顺序位置大小排布在容器内。一个UI系统必然有个基于坐 标的布局管理系统 ，不管是 indows、Sysbian ，还是A ndo rid、iO S。好的布局管理机制直接影响 界面逻辑实现的难易程度 ； 我们现在日常接触到的A pp的UI坐标系统都是二维的 ，我们现在玩的3D游戏 ，受限于二维的展示 屏幕 ，所以实质上只是三维在二维上的映射投影。我们一直在往更高的维度发展 ：全息影像、 Ho lo lens等等。在此可以设想下 ，未来我们构建界面的布局管理很可能就是基于真实三维坐标。 1.2 动画及渲染 UI之所以叫User Int erf ace ，就是因为UI通过视觉上的展示 ，为用户提供信息。这些信息的展示需 要通过一系列复杂的计算 ，最后操作液晶体展示在显示屏上 ，这一系列过程就是渲染和动画 ； 下图就是应用界面渲染到展示的流程 ： 引自 DC2014 # 4 19 A dvanced Graphics and A nimat io ns f o r iO S A pps 这里不展开来讲 ，推荐没看过的同学都认真观看 ，能够很好的理解渲染流程和界面优化 ； 推荐资料 ： DC2014 # 4 19 A dvanced Graphics and A nimat io ns f o r iO S A pps O bjc.io 的文章 ：# O bjc Issue 3:Views – Get t ing Pixels o nt o t he Screen 1.3 事件响应 UI除了展示信息之外 ，还需要接收并响应用户的点击、手势、摇晃等事件 ，经过一系列操作后更新 展示信息 ，展示给用户 ；正确及时地响应用户的操作并给予反馈 ，是良好用户体验的保证。为 何A ndro id设备普遍给人的感觉比iO S设备要卡 ，其中一个主要的原因是iO S系统将响应用户事件放 在主线程的最高优先级。 1.4 UI系统架构 从整体理解了上述三个方面 ，你会对UI架构有系统认识。iO S中的UI系统架构如下 ： 引自 DC2014 # 4 19 A dvanced Graphics and A nimat io ns f o r iO S A pps 2. View UIView是UIKit 中最基本控件 ，就如同NSO bject 基本上是Cocoa库内所有类的基类一样 ，UIView也 是UIKit 中所有界面控件的基类。只要你愿意 ，你甚至只用UIView就可以搭建你的A pp （不过iO S9做 了约束 ，必须设置key indow的root View Co nt