1. 程式人生 > >iOS之介面開發螢幕適配Interface Builder、Storyboard、Xib、Nib、AutoSizing、AutoLayout、Masonry

iOS之介面開發螢幕適配Interface Builder、Storyboard、Xib、Nib、AutoSizing、AutoLayout、Masonry

Interface Builder(IB)是Mac OS X平臺下用於設計和測試使用者介面(GUI)的應用程式;

storyboard:故事板

優點:頁面直觀清晰

缺點:不利於大型app協同開發,一個vc有大量的push和pop,如果全在一個一個storyboard上,後續維護難度大,遠不如程式碼邏輯清晰。

下面是一個故事板:


xib:等同於nib,初只有nib檔案,後來將其更名為xib,但大家一直沿襲nib這個叫法(即稱xib檔案為nib檔案)。xib一般用於快速定製個性化控制元件,例如:


AutoResizing:

優勢:輕量級的適配子檢視和父檢視位置。

不足:autoResizing是相對父控制元件進行佈局的,不可以在兩個兄弟view之間建立佈局關係,因為Autoresizing無法智慧計算多個子View各自的Frame。

方法1---->程式碼實現:在UIView中有一個autoresizingMask的屬性,它對應的是一個列舉的值,可根據屬性自動調整子控制元件與父控制元件的位置、寬高。
@property(nonatomic) UIViewAutoresizing autoresizingMask;    // simple resize. default is UIViewAutoresizingNone
程式碼則可以通過view.autoresizingMask = ...來設定autoResizing值; 如:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin

方法2--->介面實現:


切換到 show the size inspector 面板,注意Autoresizing的虛線點選可以變成實線,並在右邊實時看到改變後效果

點選虛線變成實線,實現適配:


AutoLayout:可通過約束來決定每個View的座標、大小,約束可以針對SuperView,也可以針對其他任意一個SubView

隨著不同螢幕解析度的iPhone推出,iOS原來的Frame頁面佈局方式在開發愈發顯得捉襟見肘,不能滿足專案需求,因此蘋果在Xcode 5 推出了AutoLayout,通過約束(constrains)來適配頁面。

    瞭解Android的朋友會發現,這個AutoLayout 就是類通於 Android 的 RelativeLayout(相對佈局),而iOS frame佈局方式類通於 Android 的AbsoluteLayout(絕對佈局)。

關於AutoLayout入門,可以瞭解1,不過由於約束的開發上手相對來說稍稍有點難,可讀性不是很好,已逐步被Masonry取代。

同理,AutoLayout也有程式碼和介面實現兩種途徑:瞭解2


Masonry:(重點、推薦)

一個基於AutoLayout封裝的第三方開源框架,通過程式碼方式,實現AutoLayout的各種功能,具備良好的易用性和程式碼可讀性。入門教程很多,這裡就不貼了,有興趣可以參考:

入門教程

Github地址:點選開啟連結