通过Auto Layout和Size Classes深入了解UIStackView的好处和使用-白红宇

本站文章均为【小猪熊】原创,转载务必在明显处注明：（作者新浪微博:)转载自【小猪熊】原文链接:

为了解决适配多尺寸的问题，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： **github： **