iOS开发之StackView

本文介绍的还是跟适配有关的内容，今天讲的是iOS8新出的特性StackView。该特性的推出是专门解决适配问题的。下面简单介绍使用它的两种方法。

下面看看demo的运行效果：（图有点丑，将就的看吧，主要是学习使用）





下面来介绍StackView的使用：

1.在控件库中拖一个垂直的StackView（由效果可以看出需要垂直排列图片），垂直StackView如下：



2.向StackView中拖入3个UIImageView控件，直接拖进去就行，什么也别管。效果如下：



3.尽管StackView是帮助我们自动给UI设置约束的，但是，StackView本身的约束还是需要我们自己完成的，下面设置StackView的约束，如下：

StackView距离上、左、右边距分别为0、10、0，利用下方约束按钮进行设置。选中StackView



再约束StackView的高度。使其高度为self.view高度的70%



找到该约束，进入进行详细设置，如下：



4.约束完StackView后，效果如下：



5.根据效果图设置UIimageView控件之间的属性，在右侧属性栏中按照如下设置



6.效果如下：



7.设置图片,运行查看效果，如下：





8.接下来，我们在图片的下面，添加两个label和两个button吧。这次我不会先拖StackView了，而是使用如下按钮。



9.向storyboard中拖入两个label，垂直放置。设置下面label的Lines为0，line breaks为Word Wrap，同时选中两个label，再点击上述的stack view按钮。这样就将这两个label放在一个stackview中，如下：



10.再拖两个button到storyboard中，如下：



11.选中两个按钮，再点击stack view按钮，这样也就将两个button放在一个stackview中,效果如下：



12.将button所在的stackview拖到label所在的stackview中，放在两个label之间，效果如下：



13.要想让label----1与按钮水平放置，选中label----1和button所在的stackview，再点击下面的stackview按钮，这样就把label----1与button所在的stackview放在了一个stackview中。



14.对这个新的stackview的属性栏进行如下设置：



15.现在只有一个stackvew没有设置约束就了，就是包含两个label、两个button的大stackview，下面设置约束。

该stackview距离上面的stackview间距为20，距离self.view的左右间距为0。



到现在为止，项目已经完成。运行看一下吧，和前面讲到的效果是一样的。如下横屏的时候显示如下样式是不是更爽呢。



这里就用到了size class的知识。这里就简单的使用以下。

1.选中图片所在的stackview，在右侧属性栏中点击Axis右侧“+”按钮。如下：



选择Any Width ->Compact Height，就会多出一个属性，将该属性设置为水平样式即可，如下：



运行项目之后，横竖屏如下所示：





stackview就介绍到这里了。