iPhone 手机的成功, iOS 操作系统功不可没. 而 iOS 操作系统的成功, 与早期 iPhone 单一的屏幕分辨率也有极大的关系. 不客气地说, 正因为早期 iPhone 手机只有一个分辨率, iOS 操作系统和其上面的 App 才不需要关心所谓的"响应式布局", "流式布局", "自动布局"这些技术, 它们只使用绝对定位的布局 - 每一个控件的大小和位置都是定死的, 几乎不变. 这样, iOS 应用开发者把精力放在了界面外观和交互体验, 最终促成了 iPhone/iOS 的成功.

   不过, 从 iPad 的出现, 到 iPhone 5 发布, 以及后面的 iPhone 6/6+, iPhone/iOS 手机的屏幕分辨率开始多样化了, 这时, 界面布局便不能死守着绝对定位布局了.

   为了解决这个问题, 苹果的方案是"Auto Resizing"和"Auto Layout", 特别是后者, 解决了界面动态布局的问题.

   说实话, 所谓 Auto Layout 的原理非常简单, 也不是新事物. 其本质是相对布局, 而且很多年以前 .Net 的 UI 就有了 Dock/Anchor 特性. 原理简单, 符合人的一般思维, 这是个优点, 问题是, 苹果采用了一种非常丑陋的方式来实现这个原理. 不信, 你可以看看这段代码:

苹果的 Auto Layout

UIView *superview = self;
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
[superview addSubview:view1];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[superview addConstraints:@[
    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:padding.left],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding.bottom],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-padding.right],

]];

   这段代码就是为了实现 padding(内边距), 但是用却用了一坨长长的代码. 任何人看到这段代码都应该感到恶心才对!

   果不其然, iOS 程序员们发明了一些工具来消除这种难看的代码. 例如和 Facebook 有关系的名为 Masonry 的框架, 封装了一些函数来. 例子如下:

封装的相对布局

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

   万变不离其宗, 其实质还是相对布局, 虽然代码量少了, 看起来简洁了, 而且好像在说"人话"(human nature language), 但是经验告诉我们, 用"人话"来做计算机编程, 基本上就是个笑话! 一是拖沓, 二是学习成本太高.

   还有一点我必须要提到, 那就是相对布局的固有缺陷. 相对布局的缺陷就是其自身 - 相对. 相对意味着完成一件事, 你需要两个条件(两个参数). 如果你要动态地添加 UI 控件, 你不知道谁在你身边, 怎么办?

   其实, 最好的布局方式, 应该是对于每一个控件, 它不需要关心其它的控件是谁, 每一个控件只需要自主地做好自己的份内事即可. 这就是 Web 界面布局(流式布局)的原理 - 每个人做好自己的事, 整体就自然而然好了.

   那么, iOS 界面布局有没有这样简洁高效的方法的? 有! 使用 CocoaUI 界面库(libIKit.a), 你就可以使用 Web 界面布局的思路和原理来做 iOS 应用的界面布局. 这就是例子:

简洁的Web布局

[superview.style set:@"padding: 10;"];

   没错! 只需要一行代码, 一行直观的符合程序员思维的代码, 每一个 Web 开发者都熟悉的的一行代码, 就完成所谓"自动布局" 40 行的代码. 不仅代码急剧减少, 思维还理顺了, 脑筋也不拧巴了.

   CocoaUI(libIKit.a) 界面布局框架的功能不仅如此. 你知道, iOS 开发时我们经常用 .xib(nib) 来设计界面, 然后在代码里用一行代码来加载初始化界面. 使用, CocoaUI, 你也可以使用类似的技术, 直接从一个 HTML/XML 文件中加载初始化界面, 而且这个 HTML/XML 文件可以直接用浏览器来打开和预览!

   如果你想提高 iOS 应用界面的开发效率, 可以试试 CocoaUI 吧. 先下载这个 Xcode 工程例子, 跑起来再说.

建议继续学习：

1. 响应式网页设计    (阅读：18483)
2. 异步编程与响应式框架    (阅读：3910)
3. 响应式设计的5个CSS实用技巧    (阅读：3609)
4. 响应式Web设计：50实例例与实践    (阅读：3577)
5. 淘宝响应式WebUI设计实践    (阅读：3045)
6. 响应式Web设计    (阅读：2968)
7. 响应式网页设计    (阅读：2641)
8. 响应式Web设计    (阅读：2442)
9. Web开发中的响应式图片处理    (阅读：1545)
10. 复杂产品的响应式设计【流程篇】    (阅读：1449)