通過Auto Layout和Size Classes深入瞭解UIStackView的好處和使用

本站文章均為【小豬熊】原創,轉載務必在明顯處註明：（作者新浪微博:@周公夢蝶9999 )轉載自【小豬熊】 原文連結:  www.piggybear.net/?p=291

為了解決適配多尺寸的問題，Apple在2012年推出了Auto Layout特性，2014年又推出了Adaptive Layout、Size Classes，2015年又推出了Stack View。這些無一不是我們開發者做適配的利器。今天就讓我們看看StackView是怎麼一回事。 UIStackView提供了一個高效的介面用於平鋪一行或一列的檢視組合。對於嵌入到StackView的檢視，你不用再新增自動佈局的約束了，Stack View管理這些子檢視的佈局，並幫你自動佈局約束。也就是說，這些子檢視能夠適應不同的螢幕尺寸，你只需要對StackView做出相應的約束就行了。此外，你可以嵌入一個stack View到另一個stack view中來建立更為複雜的使用者介面。 下面做一個小demo 在介面上拖拽3個UIImageView，第一個ImageView距離Top Layout Guide為10個畫素，距離螢幕左邊距為20個畫素，距離螢幕右邊距為20個畫素，第二個和第三ImageView，每個之間的間距是10個畫素，同樣距離螢幕左邊距為20個畫素，距離螢幕右邊距為20個畫素，三個ImageView的高度相同為154個畫素。 假如沒有UIStackView，我們做這樣的一個小demo展示時，通過Auto Layout分別需要給每個ImageView新增約束，而且在橫屏的情況下表現不佳的話還需要通過Size Classes設定橫屏的情況，就做這樣的一個小demo，就這樣的複雜。 對每個ImageView做對應的約束

4英寸IPhone豎屏展示是沒有問題的

4英寸Iphone橫屏展示就會出現這樣的問題

如果想要解決如上圖所示橫屏問題時，我們又需要通過SizeClasses對橫屏操作 面對這麼簡單的一個小小的demo，就要這麼的複雜，針對此問題，蘋果在2015年的WWDC上給我們展示了UIStackView，可以非常方便的做出這樣的效果，接下來我們就用UIStackView來做一下這樣的一個小demo。 首先來介紹一下UIStackView的基本屬性 UIStackView的屬性皮膚

UIStackView的屬性中文解釋

接下來，我們就一步步的用UIStackView來做一下 1、首先在拖拽一個Vertical Stack View到storyboard，然後選擇下面的Pin按鈕，對StackView設定約束 1）反勾選Constrain to margins，然後設定上面為10，左右兩邊分別為20，然後新增這三個約束

2）選擇Resolve Auto Layout lssues，在Selected Views下面選擇Add Missing Constraints，新增一下缺失約束 3）選擇Resolve Auto Layout lssues，在Selected Views下面選擇Update Frames，更新一下介面

4）拖拽一個View到StackView中，並在Size inspector給它設定一個背景顏色(便於看的清，隨便設定)，然後設定它的高度為154個畫素 5）按下command + d，在複製兩個相同的View，然後給每個View設定不同的背景顏色 6）在Document Outline介面選中StackView，在Attributes inspector下，Distribution設定成Fill Equally，讓每個子檢視的寬高相等，其實不用設定也行，因為我們剛才是複製的，不是拖拽的，所以每個View本來大小就相等。 7）同樣在StackView的Attributes inspector下，將Spacing設定成10，意思就是StackView裡面的每個子檢視間距是10個畫素

然後我們看看效果 4英寸Iphone豎屏顯示(正常)

    4英寸Iphone橫屏顯示(效果不是我們想要看到的)

那麼，我們使用了UIStackView，但是在橫屏的情況下還是表現不佳，該怎麼辦呢，非常簡單 在Document Outline介面選中StackView，在Attributes inspector下，在Axis前面的加號，點選一下，選擇Compact Width下面的Compact Height，然後將它設定為Horizontal。

我們為什麼要這樣做呢，因為在iPhone的3.5英寸，4英寸以及4.7英寸的手機下，橫屏的寬和高都是Compact(緊湊型)，在這種情況下，就會出現上面的那種情況，所以選擇Compact Width下面的Compact Height，為什麼要選擇Horizontal呢，因為是橫屏，那我們就讓StackView水平顯示，這樣效果就會更好，以同樣的方式新增5.5英寸的iPhone以及ipad的適配 再來看看效果

是不是非常完美呢。 總體的來說，UIStackView還是非常的方便的，但是不是這樣規則性的需求時，或許就用不到UIStackView了，大家可以根據自己的需求選擇，但還是建議大家能用UIStackView就儘量用，因為真心非常的方便，而且非常的快。   該工程的下載地址： oschina：git.oschina.net/piggybear/U… **github： **github.com/xiaozhuxion…