通过Auto Layout和Size Classes深入了解UI

本站文章均为【小猪熊】原创,转载务必在明显处注明：（作者新浪微博:@周公梦蝶9999 )转载自【小猪熊】 原文链接: http://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做对应的约束

2015-12-208.00.35
4英寸IPhone竖屏展示是没有问题的
2015-12-207.21.32
4英寸Iphone横屏展示就会出现这样的问题
2015-12-207.21.42
如果想要解决如上图所示横屏问题时，我们又需要通过SizeClasses对横屏操作
面对这么简单的一个小小的demo，就要这么的复杂，针对此问题，苹果在2015年的WWDC上给我们展示了UIStackView，可以非常方便的做出这样的效果，接下来我们就用UIStackView来做一下这样的一个小demo。
首先来介绍一下UIStackView的基本属性
UIStackView的属性面板
2015-12-206.25.53
UIStackView的属性中文解释
2015-12-207.39.25
接下来，我们就一步步的用UIStackView来做一下
1、首先在拖拽一个Vertical Stack View到storyboard，然后选择下面的Pin按钮，对StackView设置约束
1）反勾选Constrain to margins，然后设置上面为10，左右两边分别为20，然后添加这三个约束
2015-12-208.17.18
2）选择Resolve Auto Layout lssues，在Selected Views下面选择Add Missing Constraints，添加一下缺失约束
3）选择Resolve Auto Layout lssues，在Selected Views下面选择Update Frames，更新一下界面
2015-12-209.00.03
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个像素
2015-12-208.50.06
然后我们看看效果
4英寸Iphone竖屏显示(正常)
2015-12-207.21.32

4英寸Iphone横屏显示(效果不是我们想要看到的)

2015-12-209.03.16
那么，我们使用了UIStackView，但是在横屏的情况下还是表现不佳，该怎么办呢，非常简单
在Document Outline界面选中StackView，在Attributes inspector下，在Axis前面的加号，点击一下，选择Compact Width下面的Compact Height，然后将它设置为Horizontal。
2015-12-209.03.38 2015-12-209.04.04
我们为什么要这样做呢，因为在iPhone的3.5英寸，4英寸以及4.7英寸的手机下，横屏的宽和高都是Compact(紧凑型)，在这种情况下，就会出现上面的那种情况，所以选择Compact Width下面的Compact Height，为什么要选择Horizontal呢，因为是横屏，那我们就让StackView水平显示，这样效果就会更好，以同样的方式添加5.5英寸的iPhone以及ipad的适配
再来看看效果
2015-12-209.04.13
是不是非常完美呢。
总体的来说，UIStackView还是非常的方便的，但是不是这样规则性的需求时，或许就用不到UIStackView了，大家可以根据自己的需求选择，但还是建议大家能用UIStackView就尽量用，因为真心非常的方便，而且非常的快。

该工程的下载地址：
oschina：http://git.oschina.net/piggybear/UIStackView
**github： **https://github.com/xiaozhuxiong121/UIStackView