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

如何正确地写好一个界面 写界面可以说是每位移动应用开发者的基本功，也是一位合格移动应用开发者绕不过去的坎。但就 如不是每一位开发者都能够成为合格的开发者一样，本人在不同的团队中发现，甚少有人能够编写 出合格的 UI代码；而非常奇怪的是，在很多的开发者论坛上看到我们移动开发者更多关注于某个控 件或者是动画，但却很少看到深入剖析 UI机制，指导 UI开发的文章。 由于界面涉及到的方面实在过于广泛，本文不可能事无巨细，一一道来，所以本文先立足于点，深 入剖析 iOS UI 系统中不被重视却非常重要的机制，帮助本文读者对 iOS 的UI系统有整体了解；进而 以点带面，拓展到 UI逻辑设计和架构设计模式的讨论；最后读文而有所思有所得，设计开发出高效 、易用、流畅的 UI模块。 本文章节如下： 各章节间没有必然的联系，读者可以选择感兴趣章节阅读。 1. 基础与本质 终端App 开发区别于后端开发最大的不同，就是终端开发很大部分的逻辑是为用户提供界面以供人 机交互，即所谓的 UI(User Interface) 。所以所有的 UI架构主要关注三大模块：界面布局管理，渲染 及动画、事件响应； 1.1 布局管理 即在规定的坐标系统上，按照一定的层级顺序位置大小排布在容器内。一个 UI系统必然有个基于坐 标的布局管理系统，不管是 Windows 、Sysbian ，还是 Andorid 、 iOS 。好的布局管理机制直接影响 界面逻辑实现的难易程度； 我们现在日常接触到的 App 的UI坐标系统都是二维的，我们现在玩的 3D 游戏，受限于二维的展示 屏幕，所以实质上只是三维在二维上的映射投影。我们一直在往更高的维度发展：全息影像、 Hololens 等等。在此可以设想下，未来我们构建界面的布局管理很可能就是基于真实三维坐标。 1.2 动画及渲染 UI之所以叫 User Interface ，就是因为 UI通过视觉上的展示，为用户提供信息。这些信息的展示需 要通过一系列复杂的计算，最后操作液晶体展示在显示屏上，这一系列过程就是渲染和动画； 下图就是应用界面渲染到展示的流程： 引自WWDC2014 # 419 Advanced Graphics and Animations for iOS Apps 这里不展开来讲，推荐没看过的同学都认真观看，能够很好的理解渲染流程和界面优化； 推荐资料： WWDC2014 # 419 Advanced Graphics and Animations for iOS Apps Objc.io 的文章： # Objc Issue 3:Views – Getting Pixels onto the Screen 1.3 事件响应 UI除了展示信息之外，还需要接收并响应用户的点击、手势、摇晃等事件，经过一系列操作后更新 展示信息，展示给用户；正确及时地响应用户的操作并给予反馈，是良好用户体验的保证。为 何Android 设备普遍给人的感觉比 iOS 设备要卡，其中一个主要的原因是 iOS 系统将响应用户事件放 在主线程的最高优先级。 1.4 UI 系统架构 从整体理解了上述三个方面，你会对 UI架构有系统认识。 iOS 中的 UI系统架构如下： 引自WWDC2014 # 419 Advanced Graphics and Animations for iOS Apps 2. View UIView 是UIKit 中最基本控件，就如同 NSObject 基本上是 Cocoa 库内所有类的基类一样， UIView 也 是 UIKit 中所有界面控件的基类。只要你愿意，你甚至只用 UIView 就可以搭建你的 App （不过iOS9 做 了约束，必须设置 keyWindow 的rootViewControler ）。 一般来说，熟练掌握常用的 UIView 子类控件（如 UIButton, UIImageView, UILabel 等）就足以应 付90% 的界面编码需要。但想要编写出高效、优美的界面代码，还需要更深入的了解。既然要深入 ，本文假设你对 UIView 已经有了初步的了解，至少使用写过