iOS开发之UIStackView基本运用

UIStackView

UIStackView是基于自动布局AutoLayout，创建可以动态适应设备方向、屏幕尺寸和可用空间的任何变化的用户界面。UIStackView管理其ArrangedSubview属性中所有视图的布局。这些视图根据它们在数组中的顺序沿堆栈视图的轴排列。由axis, distribution, alignment, spacing等属性改变。

有点类似前端的flex布局，Apple从很早就引入了，但是实际使用的人太少了🤔，接下来的文章将引用部分Apple官方文档介绍

• 只需要定义UIStackView的位置position，size是可选的。

• 当没有设置size的时候，会根据它的内容的大小来调整自己的大小，即子视图各个控件的大小决定了UIStackView的大小

• UIStackView的布局受到本身frame或者AutoLayout的影响，包括子组件的AutoLayout的影响

• 设置子组件大小只能使用Auto Layout，为UIStackView设置大小位置可以采用Frame、Auto Layout

• 需要设置axis, distribution, alignment, spacing属性，并通过addArrangedSubview添加子组件

基本使用

固定一个位置和大小的UIStackView，添加三个等大且间隔为10的子组件

    // UIStackViewUIStackView *stackView = [[UIStackView alloc] init];stackView.backgroundColor = UIColor.redColor;stackView.frame = CGRectMake(0, 100, 390, 100);stackView.spacing = 10;stackView.axis = UILayoutConstraintAxisHorizontal;// 水平方向stackView.distribution = UIStackViewDistributionFillEqually;// 垂直方向stackView.alignment = UIStackViewAlignmentFill;[self.view addSubview:stackView];// 添加子组件UIView *view1 = [[UIView alloc] init];view1.backgroundColor = UIColor.grayColor;UIView *view2 = [[UIView alloc] init];view2.backgroundColor = UIColor.yellowColor;UIView *view3 = [[UIView alloc] init];view3.backgroundColor = UIColor.blueColor;// 必须使用的特殊添加方式[stackView addArrangedSubview:view1];[stackView addArrangedSubview:view2];[stackView addArrangedSubview:view3];

属性介绍

• Axis：设置内部子组件堆叠方式，水平/垂直方向
• Alignment：与axis方向相反的方向的布局规则，Axis会影响其设置方向
• distribution：与axis方向相同的方向的布局规则，Axis会影响其设置方向
• spacing：设置默认间隔，UIStackViewDistributionEqualSpacing/UIStackViewDistributionEqualCentering情况下，spacing为最小间距

Alignment属性具体介绍

下面默认举例采用Axis是水平，则Alignment代表的是垂直方向的布局规则，Axis是垂直则相反

• UIStackViewAlignmentFill：默认方式，垂直方向填充满UIStackView

• UIStackViewAlignmentCenter：垂直方向居中对齐
  

• UIStackViewAlignmentTop / UIStackViewAlignmentLeading ：垂直方向顶部对齐
  

• UIStackViewAlignmentBottom / UIStackViewAlignmentTrailing ：垂直方向底部对齐
  

• UIStackViewAlignmentFirstBaseline：垂直方向对齐第一个子组件的头部
  

• UIStackViewAlignmentLastBaseline：垂直方向对齐最后一个子组件的尾部
  

distribution属性具体介绍

下面默认举例采用Axis是水平，则distribution代表的是水平方向的布局规则，Axis是垂直则相反吗，space代表的是实际间隔，spaceing代表的是设置的间隔

UIStackViewDistributionFill：子组件填充满整个UIStackView，space=spaceing

• 使用方法：UIStackView只需要确定AutoLayout位置，为子组件添加AutoLayout的大小，用来确定UIStackView的大小

UIStackViewDistributionFillEqually：每个子组件宽度相等且填充满整个UIStackView，sapce=spaceing

• 使用方法1：UIStackView只需要确定AutoLayout位置，为一个子组件添加AutoLayout的大小，用来确定UIStackView的大小
• 使用方法2：UIStackView需要确定AutoLayout位置和大小，默认为子组件生成相等大小

UIStackViewDistributionFillProportionally：根据space和每个组件的Size分配每个子组件的宽度，最终也是填充满整个UIStackView

• 使用方法1：UIStackView只需要确定AutoLayout位置，为每个子组件添加AutoLayout的大小，用来确定UIStackView的大小
• 使用方法2：UIStackView需要确定AutoLayout位置和大小，为每个子组件添加AutoLayout的大小，最终根据算法确定每个子组件的比例，（好坑😓，效果难以达到预期的，或许有更高级的用法❓欢迎👏留言讨论）
  
  UIStackViewDistributionEqualSpacing：根据每个组件的Size分配每个子组件的宽度，达到间隔相等的情况，🌟特殊在通过拉伸space，存在实际space>=spacing的情况
• 使用方法1：UIStackView只需要确定AutoLayout位置，为每个子组件添加AutoLayout的大小，用来确定UIStackView的大小，space=spacing
• 使用方法2：UIStackView需要确定AutoLayout位置和大小，为每个子组件添加AutoLayout的大小，最终根据算法确定每个子组件的比例，空间充足则拉伸space，space>=spacing，空间不足则缩小子组件的Size
  

UIStackViewDistributionEqualCentering： 子组件中心点之间的距离相等，🌟特殊在通过拉伸space，存在实际space>=spacing的情况

• 使用方法1：UIStackView只需要确定AutoLayout位置，为每个子组件添加AutoLayout的大小，用来确定UIStackView的大小，通过拉伸space来达到子组件中心点之间的距离相等，space>=spacing
• 使用方法2：UIStackView需要确定AutoLayout位置和大小，为每个子组件添加AutoLayout的大小，通过拉伸space和Size来达到子组件中心点之间的距离相等，space>=spacing

总结：根据实际情况去选择合适的distribution和Alignment属性，为子组件添加合适的Auto Layout，为UIStackView添加合适的Auto Layout 可以达成任何你想要的动态效果

参考资料

Apple Developer
iOS - UIStackView的使用
UIStackView 入坑指南