前言
隨著Apple產(chǎn)品的更新?lián)Q代，iPhone的屏幕尺寸也越來越大，對于iOS開發(fā)者來說，屏幕適配就變成了一個不得不去掌握的技術(shù)。小屏?xí)r代的Frame已經(jīng)漸漸的不適合去處理屏幕適配的問題了，隨之而來的新技術(shù)就是Auto Layout 。AutoLayout 重新構(gòu)思了開發(fā)者構(gòu)建界面的方式，通過相鄰視圖之間的關(guān)系來確定視圖之間的位置關(guān)系，可以更快捷更方便的實現(xiàn)屏幕適配的問題。特別是通過Interface builder （IB）可以更快速、直觀的完成對界面的搭建。
AutoLayout介紹
隨著iPhone陣營的不斷壯大，為了適應(yīng)不斷變大的屏幕，Apple提出了Auto Layout的方案來解決適配問題，因此適配方式從以前的UIViewAutoResizing過度到了現(xiàn)在Auto Layout階段。現(xiàn)階段的Auto Layout適配也有很多種不同的方案。
-
Masonry首先要說到的當(dāng)然是純代碼流框架
Masonry。作為開源三方框架，Masonry提供了一種更簡單快捷的布局方式； VFL
VFL (Visual Format Language)，蘋果官方提供的AutoLayout API，也是被開發(fā)者吐槽不斷的一種方式；
（VFL我在之前的文章中也有過簡單的介紹 -- 簡書、 博客）IB
IB(Interface Builder)， 直接通過Interface Builder 進行適配布局；
今天要介紹的就是第三種方法，通過IB來進行一些常見UI布局。
interface builder 介紹
工欲善其事，必先利其器。既然我們要用Interface Builder ，首先當(dāng)然要了解下我們需要用到的功能板塊。
- Identity Inspector
用于設(shè)置控件的父類、attributes屬性 、以及控件對應(yīng)的可訪問屬性等； - Attributes Inspector
用于設(shè)置控件的基本屬性、父類的屬性等； - Size Inspector
顧名思義，用于設(shè)置控件的Size等，例如auto layout 以及優(yōu)先級等； - Connections Inspector
用于查看控件與父視圖的關(guān)聯(lián)性； - Object Library
控件庫，Interface Builder 可以設(shè)置的控件，都可以在這里找到；
在這里只是大致的介紹了下功能板塊的作用，也會在之后的Demo中使用到上面的功能板塊。
-------------------------實踐是第一生產(chǎn)力分割線----------------------------
約束設(shè)置介紹
在這里可以設(shè)置單個View的約束線：上邊距Top、左邊距l(xiāng)eading、右邊距trailing、下邊距bottom、寬度width、高度height、等寬equal Widths、等高equal Heights、寬高比Aspect Ratio等；
在這里可以設(shè)置多個View之間的約束線關(guān)系；左、右、上、下邊距對齊，水平垂直居中對齊、相對于父視圖垂直居中對齊等；
介紹了基礎(chǔ)知識后，下面進入Demo演示時間！通過Demo可以更直觀的了解通過Interface Builder It's show time ！
UILabel 設(shè)置Attribute屬性字體
在這個Gif中依次設(shè)置了文本對齊方式、字體顏色、背景顏色、字體大小、刪除線、下劃線。刪除線和下劃線分為單線和雙線兩種，并且可以設(shè)置線條顏色。
PS：這里設(shè)置刪除線或下劃線等屬性有一個小竅門，當(dāng)打開Fonts 面板時，再去選中要設(shè)置的文本部分，這樣刪除線和下劃線才會生效。
設(shè)置UIView 圓角
在Identity Inspector板塊設(shè)置UIView 的Runtime Attributes 屬性。圓角、線框都是可以設(shè)置的，只要知道相對應(yīng)的屬性就可以了。
相鄰視圖等距分布
首先在屏幕上按比例放置四個View，然后設(shè)置等寬約束就完成了最簡單的等寬設(shè)置。如果感興趣的話，也可以自己把相鄰View的間距為20或其它值、最左最右距離父視圖間距為10或其他值再試下。
固定寬度，間距跟隨屏寬度變化而變化
這個Demo是在上一個Demo上的延伸。當(dāng)需要相鄰View寬度固定，間距跟隨屏幕變化而變化時，單純的使用一層View是不容易實現(xiàn)的。這時候我們可以借助上一個等分Demo的方法，再在View里添加子視圖固定寬高后居中對齊，就可以實現(xiàn)這個需求了。
子視圖確定父視圖寬高
在這個Demo中，我沒有去設(shè)置View的寬高，只設(shè)置了View的X、Y而已，View的寬高會根據(jù)子視圖Label的大小改變而改變。這個Demo是為了我們下一個TableViewCell的高度自適應(yīng)的一個預(yù)熱。
自適應(yīng)TableViewCell高度
TableViewCell的自適應(yīng)，需要設(shè)置滿足條件的Layout來讓Cell確定它自身的高度，也就是我們上面Demo說到的，由子視圖來確定父視圖的寬高。一般情況下，如果Cell內(nèi)布局是固定的，我們可以固定Cell的高度，不需要考慮Cell高度變化的情況。這里有個小問題要提一下，為了Label可以換行顯示，需要把Label的 numberOfLines屬性設(shè)置成0.
ScrollView
設(shè)置ScrollView的contentSize，也是上面的子視圖確定父視圖大小的延伸。通過確定的子視圖在ScrollView中的位置，來確定ScrollView最終的contentSize的大小。這里要注意的是，需要把ScrollView的父視圖的Size設(shè)置成FreeForm，通過調(diào)節(jié)父視圖大小，設(shè)置ScrollView所有邊距約束為0，且相對父視圖水平、垂直居中對齊，然后添加子視圖至ScrollView中。
總結(jié)
這次關(guān)于Interface Builder 的介紹就先到這里結(jié)束了。上面的這些實例，只需要根據(jù)需求靈活使用，基本可以滿足日常開發(fā)需要，希望可以對iOS開發(fā)道友們有些許幫助。后續(xù)可能還會再添加一些關(guān)于視圖優(yōu)先級、擠壓優(yōu)先級、拉伸優(yōu)先級以及約束優(yōu)先級的介紹。優(yōu)先級的學(xué)習(xí)，會讓我們對于Autolayout有更深次的認(rèn)知，更好的掌握AutoLayout。
如果有iOS同行遇到比較難解決的UI布局，或者有其他需求需要解決，可以私信找我，我會盡力幫助解決。
以上內(nèi)容可能更偏向基礎(chǔ)，如有錯誤，還煩請各位同行指出！若覺得本文不值得一看，也請諒解！
參考
iOS Autolayout 介紹
Auto Layout 開發(fā)秘籍(第2版)
