iOS StackView 布局视图

Question

在 iOS 的布局中，我们常常会做一些 按钮 间隔相等 之类的操作，在 StackView 没出现之前，都是通过额外的父层 View 来协助完成的。 接下来 我们看看 StackView 可以帮我们做哪些事情。

一，视图自动伸缩

先上一个效果图看下：

再看一下视图结构和代码：

WechatIMG1139.png

需要注意的是，StackView 是分横向和纵向的，如果是纵向的排列，我们不设置 Bottom 约束，只设置 Left，Top，Right，意味着这个 StackView 是可以无限延长的，根据内部的子 View 多少和相对关系。

如果是横向的，同样的道理，我们如果设置了，Left，Top，Bottom，意味着这个 StackView 可以向右面无限延伸，根据里面的子 View 多少和相对间距等决定。

Jan072020135355.gif

代码基本一直，只为 StackView 设置了三个方向的约束。 分别是 Left, Top, Bottom。

如果现在还不清楚，没关系，我会把 Demo 项目一同给出。

二，子 View 的布局

注意: 如果你选择把几个 View 外面套上 StackView，那么你的几个子 View 会失去他们原有的约束，换句话说，更像是，StackView 通过配置给他们子 View 设置约束，不再给开发者去设置，StackView 提供了许多配置参数，我们来一同感受一下，他们都能帮助我们做什么。

其中 StackView 提供了几个配置选项，最重要的有三个选项，分别是：

WechatIMG1143.png

1. Axis: 横纵轴
   • Horizontal: 横向

     

   • Vertical: 纵向

     

2. Alignment：对齐方式
   • Fill: 填充满

     

   • Top: 靠顶对齐

     

   • Center: 靠中间对齐

     

   • Bottom: 靠底部对齐

     

   • First Baseline / Last Baseline

     

3. Distrubution: 子 View 之间的布局
   • Fill: 子 View 一个挨着一个填充 StackView

     

   • Fill Equally: 每一个子 View 被填充的地方都是一样大的

     

   • Fill Proportionally: 按照子 View 的多少进行分配大小

     

   • Equal Spacing: 保证每个子 View 的间距相同

     

   • Equal Centering: 保证每个子 View 的中心到其他邻近的子 View 中心相等。

     

总结

有了 StackView，解决了 我们麻烦的 子 View 间的布局。

Demo: https://github.com/zColdWater/StackViewDemo Demo 提供了，横向，纵向两个 Demo。