在新項(xiàng)目中使用Xib有一段時(shí)間了，遇到了不少的問題，也收獲了很多的奇跡，最讓我驚嘆的就是使用熟練之后的界面開發(fā)速度，完勝Android那種XML方式的半吊子可視化界面開發(fā)工具。這里把使用心得匯總一下，希望能幫到大家。

一、Xib的使用深度

StoryBoard不是我的菜，畢竟VC之間的邏輯關(guān)系和跳轉(zhuǎn)都比較復(fù)雜，甚至有時(shí)還得實(shí)現(xiàn)自己的棧管理，我更喜歡只是純頁面開發(fā)的時(shí)候使用可視化工具，就像Android的XML一樣。感謝蘋果，XCode的可視化工具比Android那個(gè)半吊子強(qiáng)太多了。

Xib中頁面元素與VC中的事件關(guān)聯(lián)我通常自己來通過addTarget的方式手動(dòng)做，一方面是因?yàn)锳ndroid中這么做習(xí)慣了，另一方面事件注冊的可變性太大，VC下面有時(shí)候還會(huì)分成更小單元粒度的Controller，就像Android中的Fragment一樣。

二、Xib的基本原則

1、怎么樣唯一確定一個(gè)View的布局？

只要直接或者間接確定x,y,width,height這四個(gè)值就可以了。這就是Xib的中心思想。

確定x和y的方式有很多種，這里舉幾個(gè)常見的例子：指定View在Parent中橫向居中就是確定x的值，豎向居中則是確定y的值。指定相對(duì)于上方或下方View的距離就是確定View的y值，相對(duì)于左方或右方View的距離，就是確定View的x值。同時(shí)指定View距離其左方和右方View的距離，就可以同時(shí)確定x和width，而同時(shí)指定View距離其上方和下方的View的距離，就可以同時(shí)確定y和height。

2、支持定制

對(duì)于Xib中的一個(gè)View，可以指定其Custome類，這樣就把具體實(shí)現(xiàn)交給繼承了UIView的那個(gè)類了。這樣，就可以對(duì)系統(tǒng)提供的任何View進(jìn)行擴(kuò)展，再通過Xib布局在頁面上。

3、代碼與Xib混排

Xib中可以包含定制的View，而代碼生成的View中也可以添加通過Xib而Load進(jìn)內(nèi)存的View。

4、Xib中View的確切布局時(shí)機(jī)

在Xib中做頁面布局時(shí)，只是指定了一系列的Constraints，并由IB對(duì)這些Contraints進(jìn)行預(yù)覽。那這些頁面中的View到底是在什么時(shí)間點(diǎn)布局呢？準(zhǔn)確地說，是viewWillAppear之后和viewDidAppear之前。在這之前，Xib文件的根View默認(rèn)是600*600的，并沒有根據(jù)Constraints在不同的Size Class下的表現(xiàn)進(jìn)行l(wèi)ayout計(jì)算。也就是說，想得到布局完成的View樹并進(jìn)行查看或操作，至少要到viewDidAppear中。

補(bǔ)充于2015.10.12

在一個(gè)使用AutoLayout布局的ALView中，使用代碼增加了一些計(jì)算好frame的subView，等效果出來后，subView的frame可能會(huì)被ALView改變，因此，有必要把ALView的AutoResizesSubViews設(shè)置為NO。

對(duì)于通過loadNamedXib加載到內(nèi)存中的View，必須手動(dòng)指定其frame中的width和height，然后再通過addSubView的方式添加到現(xiàn)有的View樹中，使用Xib表示的View在布局時(shí)，是以600*600的默認(rèn)寬高進(jìn)行的。

5、根View寬高不確定

我們在使用xib要時(shí)刻牢記。對(duì)于做過Android的同學(xué)來說，可以簡單地把xib的根View理解成一個(gè)RelativeLayout。xib的根View的寬高是在真正程序運(yùn)行到布局時(shí)才會(huì)參考當(dāng)前的Size Class確定下來。所以，除非特別必要，不要使用絕對(duì)值來確定x,y,width,height的值。

6、Size Class

根據(jù)當(dāng)前設(shè)備橫屏、豎屏，還是手機(jī)、Pad，Xib把它們歸為不同的Size Class，我們可以通過切換Size Class，讓View在不同Size Class下展現(xiàn)不同的特性。比如，手機(jī)橫屏和豎屏下，用戶頭像的位置分別位于屏幕上方和屏幕左方。

三、工具

可以看看這篇文章“如何使用View Debugging”，通過這個(gè)調(diào)試工具可以看到View的層級(jí)關(guān)系、邊界等很詳細(xì)的信息。

四、動(dòng)態(tài)位置調(diào)整

這方面有一個(gè)很經(jīng)典的場景，就是在經(jīng)典的登錄界面中，頁面中主要的View從上往下依次是用戶名輸入框、密碼輸入框、校驗(yàn)碼輸入框、登錄按鈕。默認(rèn)情況是沒有校驗(yàn)碼輸入框的，這個(gè)時(shí)候登錄按鈕要緊挨密碼輸入框，一旦用戶的登錄觸發(fā)安全策略，導(dǎo)致校驗(yàn)碼輸入框彈出來之后，登錄按鈕就要下移，給校驗(yàn)碼輸入框騰出位置來。

這在Android中可以使用Vertical的LinearLayout很輕松地布局出來，但在IOS中是沒有現(xiàn)成的View可以做到動(dòng)態(tài)調(diào)整子View位置的。只能使用稍微笨一點(diǎn)兒的方式，在代碼中找到對(duì)應(yīng)的Constraints，修改其Constant值。

這個(gè)時(shí)候需要注意，如果明確指定一個(gè)View的width和height等Constraints，那這個(gè)Constraints是屬于這個(gè)View的。決定View的x、y，或間接決定width、height的其它Constraints都是在View的superView中的。不要找錯(cuò)了地方。

五、動(dòng)態(tài)寬高

有的時(shí)候，我們可能需要根據(jù)View中的內(nèi)容來動(dòng)態(tài)調(diào)用一個(gè)View的寬高，如文章的Title，字?jǐn)?shù)越多，Label越寬。這種情況就需要使用content hugging和content compression resistance這兩個(gè)屬性了。其詳細(xì)的解釋可以看看官方文檔。

六、多練

這個(gè)是最高原則。我在新項(xiàng)目中除了少數(shù)幾個(gè)很特殊的控件自己實(shí)現(xiàn)之外，99%的布局都使用Xib來完成，一開始不太熟悉稍微有些慢，等熟悉了之后，開發(fā)速度非常快。如今屏幕尺寸這么多，這AutoLayout比手工通過代碼獲取屏幕寬高計(jì)算View布局的方式快了豈止一個(gè)數(shù)量級(jí)。多練習(xí)，會(huì)出現(xiàn)奇跡的。