iOS界面響應式布局方式對比

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 程序員們發明了一些工具來消除這種難看的代碼. 例如和 非死book 有關系的名為 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 工程例子, 跑起來再說.

</div> </div>