iOS 使用Interface Builder開發界面入門與技巧

引言:

    通過Interface Builder(簡稱IB)來制作界面一直是iOS開發界飽受争議的方式.主要争議的話題是不太适合團隊協作開發,再就是對IB的使用比較生疏,覺得IB隻能完成一些很簡單的功能.然而Interface Builder的出現并不是偶然,更是蘋果一直推崇使用GUI實作技術.隻是面對不同的問題,我們需要有相應的解決辦法.而不是刻意抵觸.

    如今,Xcode的第五個版本釋出,新版IDE對IB的核心檔案Xib進行了一次全面的優化和更新.解決了大家一直争議的團隊協作問題. 并且Autolayout(自動布局)的出現,和Xib配合使用簡直是天作之合.那麼本文的目的就來一點一點揭開IB的神秘面紗,并熟練運用到實際的項目中.

參考資料:

1:Xcode 5中的Interface Builder更有利于團隊協作開發

<a target="_blank" href="http://beyondvincent.com/blog/2013/09/04/111-xcode-5-finally-makes-interface-builder-a-viable-option-for-teams/">http://beyondvincent.com/blog/2013/09/04/111-xcode-5-finally-makes-interface-builder-a-viable-option-for-teams/</a>

2:Autosizing縮放規律詳解（iPhone5支援以及螢幕旋轉支援）

<a target="_blank" href="http://www.devdiv.com/autosizing_iphone_-blog-1-51978.html">http://www.devdiv.com/autosizing_iphone_-blog-1-51978.html</a>

3:提高Interface Builder高效工作的8個技巧

<a target="_blank" href="http://beyondvincent.com/blog/2014/03/19/18-tips-for-working-effectively-with-interface-builder/">http://beyondvincent.com/blog/2014/03/19/18-tips-for-working-effectively-with-interface-builder/</a>

4:使用 Swift 和 Xcode 6 制作超棒的 UI 元件

<a target="_blank" href="https://github.com/nixzhu/dev-blog/blob/master/2014-06-10-make-awesome-ui-components-ios-8-using-swift-xcode-6.md">https://github.com/nixzhu/dev-blog/blob/master/2014-06-10-make-awesome-ui-components-ios-8-using-swift-xcode-6.md</a>

5:Size Classes With Xcode 6: One Storyboard For All Sizes

<a target="_blank" href="http://www.learnswift.io/blog/2014/6/12/size-classes-with-xcode-6-and-swift">http://www.learnswift.io/blog/2014/6/12/size-classes-with-xcode-6-and-swift</a>

使用:

首先來看看通過Xcode我們可以建立哪些Xib檔案,如下圖:

從圖中羅列的可選項中可以判斷出,哪些是最常用的,以及蘋果推薦我們使用哪種來建立界面.

1:Storyboard

Storyboard中文翻譯過來的意思是故事版.是蘋果在Interface Builder推出的一項新的布局方式,不過Storyboard的本質依舊是Xib,它出現的主要目的是更好的展示Xib與Xib之間的流程和聯系.當然,如果要介紹Storyboard估計需要徹底新開一篇博文來專門其如何使用.

2:View

View便是我們在使用IB實作界面時最常用的方式. 建立後,Xib裡面已經預設初始化了一個View

3:Empty,Window,Application

以上三個的使用場景還是比較少的.如果你好奇,不妨也建立一個試試.