Auto Layout中Stack View的使用

这是关于自动布局的第二篇文章。
<< Auto Layout的使用

上一篇文章介绍了如何使用Auto Layout，这一篇文章主要介绍堆栈视图(Stack View)。Stack View提供了一种轻松的方式来使用Auto Layout，不需要引入复杂的约束。单个堆栈视图定义用户界面的行或列，堆栈视图根据以下属性来排列其子视图。

• axis：定义Stack View的方向，水平方向或竖直方向，只适用于UIStackView。NSStackView中定义方向使用orientation属性。
• distribution：设定视图沿轴线的排布方式。
• alignment：设定如何沿轴线垂直方向排布子视图。
• spacing：设定子视图间距。

UIStackViewProperties.png

UIStackView适用于iOS 9.0+和tvOS 9.0+，NSStackView适用于macOS 10.9+。这篇文章只讲解UIStackView。

使用Stack View时可以先从对象库中拖拽出Horizontal Stack View或Vertical Stack View到storyboard，后把需要添加的视图放进Stack View；也可以先添加视图，后点击Auto Layout工具Embed in Stack，Auto Layout会根据视图布局插入水平或垂直堆栈视图，也可以点击Editor > Embed In > Stack View插入堆栈视图，与点击Embed In Stack插入没有区别。

1. 创建demo

这里使用Tabbed Application的模板创建demo，Product Name为StackView，选择文件位置，创建工程。

下面通过三个示例来学习Stack View。

2. 示例1

打开刚创建demo的Main.storyboard，在First Scene添加以下视图：第一行为UILabel和UISwitch，第二行为两个UIImageView。

StackViewD1Storyboard.png

选中第一行的UILabel和UISwitch，点击Embed In Stack插入Stack View。打开Attributes Inspector，设置Stack View的属性如下：

• Axis：Horizontal，自动创建的应该为Horizontal，不需要修改。
• Alignment：Center
• Distribution：Fill，不需要修改。
• Spacing：16

选中两个UIImageView，重复上面插入Stack View步骤并修改属性，属性与上面相同。UIImageView中图片的Content Mode属性为Aspect Fit。

选中刚添加的两个Stack View，点击Embed In Stack再次插入一个堆栈视图。堆栈视图可以嵌入堆栈视图。界面构建器会自动插入一个垂直堆栈视图。修改其属性如下：

• Axis：Vertical，不需要修改。
• Alignment：Center
• Distribution：Fill，不需要修改。
• Spacing：16

堆栈视图根据子视图大小来调整自身大小，这里子视图保持固有内容大小，所以只需要添加约束指定堆栈视图位置，不需要约束堆栈视图大小。

添加约束指定堆栈视图水平居中，与Top距离为20points。如果添加过程遇到问题，你可以点击这里查看demo，也可以查看上一篇文章学习如何添加约束。添加完毕后视图层级如下：

StackViewD1Hierarchy.png

使用Stack View时一般只需要指定堆栈视图位置，堆栈视图大小会根据子视图大小动态调整。

堆栈视图中子视图显示顺序由其在arrangedSubviews数组的顺序决定。在水平堆栈视图中，视图显示方向与阅读方向一致，arrangedSubviews数组中低索引号视图先显示。在垂直堆栈视图中，视图从上向下显示，低索引号视图在上，高索引号视图在下。

当向arrangedSubviews数组中添加、移除视图时，或视图被隐藏时，Stack View会自动调整布局。

下面从UISwitch连接出一个IBAction的属性，当点击UISwitch时，调整imageStackView的axis。imageStackView为storyboard中图片堆栈视图的IBOutlet属性。

- (IBAction)axisChange:(UISwitch *)sender
{
    [UIView animateWithDuration:0.25 animations:^{
        [self updateConstraintsForAxis];
    }];
}

- (void)updateConstraintsForAxis
{
    // 在水平、垂直堆栈视图间切换
    if (self.imageStackView.axis == UILayoutConstraintAxisHorizontal)
    {
        self.imageStackView.axis = UILayoutConstraintAxisVertical;
    }
    else
    {
        self.imageStackView.axis = UILayoutConstraintAxisHorizontal;
    }
}

使用animateWithDuration: animations:方法可以让视图的变换以动画形式呈现。

StackViewD1AxisChange.gif

3. 示例2

通过示例1我们可以在runtime手动修改堆栈视图axis，但更好的方式是Stack View自动跟随设备旋转。例如，当设备从竖屏(portrait)旋转为横屏(landscape)时，堆栈视图axis属性自动从UILayoutConstraintAxisVertical调整为UILayoutConstraintAxisHorizontal。

进入Second Scene，添加两个UIImageView，其contentMode属性为Aspect Fit，图片分别为Heart、Star，可以通过文章底部网址下载源码获取图片。选中两个UIImageView插入一个Horizontal堆栈视图。堆栈视图与Leading、Trailing、Top、Bottom距离分别为0、0、Standard Value、Standard Value。Stack View其它属性如下：

• Axis：Horizontal
• Alignment：Center
• Distribution：Fill Proportionally
• Spacing：0

StackViewD2Stroyboard.png

上面的Distribution有Fill、Fill Equally、Fill Proportionally、Equal Spacing、Equal Centering五个属性，这五个属性的区别：

• UIStackViewDistributionFill：Stack View调整子视图大小以便填充所有可用空间。当子视图大小大于可用空间时，根据Compression Resistance优先级压缩视图；当子视图不能填充满可用空间时，根据Content Hugging优先级拉伸视图。如果优先级相同，优先调整arrangedSubviews数组中index小的视图。
• UIStackViewDistributionFillEqually：调整所有子视图为相同大小，占用所有可用空间。
• UIStackViewDistributionFillProportionally：会保持每一个子视图的固有大小，但如果有可用空间、或需要压缩视图，会按比例拉伸、压缩。如一个视图宽为100，另一个视图宽为200，Stack View想要拉伸视图以便填充可用空间，第一个视图宽被拉伸为150，第二个视图宽就会被拉伸为300。
• UIStackViewDistributionEqualSpacing：不调整子视图大小，通过移动子视图位置让子视图间距相等。如果子视图大于可用空间，会按照Compression Resistance优先级压缩。如果优先级相同，优先调整arrangedSubviews数组中index小的视图。
• UIStackViewDistributionEqualCentering：让子视图的中心距离相等。如果视图大于可用空间，会压缩spacing属性直到设定的最小值，如果此时仍旧大于可用空间，会根据子视图Compression Resistance优先级压缩子视图。如果优先级相同，优先调整arrangedSubviews数组中index小的视图。

选中Stack View，打开Attributes Inspector，你会发现每一个Stack View属性前会有一个+。

StackViewD2Attributes.png

点击这些+，可以自定义水平、垂直堆栈视图的属性。下面添加一个当宽度为compact、高度为regular时axis为垂直的属性。

StackViewD2AttributesAxis.png

你还可以通过相同方式，添加一个当宽度为compact、高度为regular时spacing属性，一般不需要添加其它属性。

现在运行app，当竖屏时，堆栈视图的axis是垂直的；当横屏时，堆栈视图的axis是水平的。

StackViewAxis.gif

4. 示例3

Stack View主要优点之一是会自动为其每个子视图创建自动布局约束，也可以对这些子视图的大小和位置进行设置。

为刚创建的demo添加一个View Controller，并连接到选项卡控制器，设定Bar Item的标题为Third。

打开Third Scene，自上而下添加UILabel、UIImageView、UIButton，并插入到一个垂直堆栈视图中。堆栈视图属性设置如下：

• Axis: Vertical
• Alignment: Center
• Distribution: Equal Spacing
• Spacing: 0

StackViewD3Stroyboard.png

其中UIImageView的contentMode为Aspect Fit，为上面Stack View添加约束，与Leading、Trailing、Top距离分别为0、0、20。

在上图Add Star下面添加一个水平堆栈视图，属性设置如下：

• Axis: Horizontal
• Alignment: Center
• Distribution: Fill Equally
• Spacing: 10

完成后为其添加约束，与Leading、Trailing、Top、Bottom距离分别为0、0、Standard Value、20，高度为120。

StackViewD3StoryboardFinal.png

虽然UIStackView继承自UIView，但它只管理子视图的位置和大小，不提供用户界面，也就是有些属性不适用于UIStackView，如backgroundColor，也不能重写drawRect:方法。

堆栈视图中有subviews和arrangedSubviews两个属性，其遵守以下规则。

• 当Stack View向arrangedSubviews数组添加视图时，也会将该视图添加为subviews。
• 从Stack View移除一个视图，该视图也会被从arrangedSubviews数组移除。
• 从arrangedSubviews数组移除一个视图，该视图依然存在于subviews数组。Stack View不在管理被移除视图的位置和大小，但它会存在于视图层级中。

所以，通过调用addArrangedSubview:或insertArrangedSubview: atIndex:方法向arrangedSubviews数组添加元素，该元素同时会被加入subviews数组。通过removeFromSuperView方法移除的视图，会被同步从arrangedSubviews数组移除。通过removeArrangedSubview:移除的视图，还会存在于subviews数组。

从UIButton连接出一个名为addStar的IBAction点击事件。当点击时，在底部的horizontalStackView添加一个五角星。

- (IBAction)addStar:(UIButton *)sender
{
    UIImageView *filledStarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"filledStar"]];
    
    // 添加视图到堆栈视图
    [self.horizontalStackView addArrangedSubview:filledStarView];
    filledStarView.contentMode = UIViewContentModeScaleAspectFit;
    
    [UIView animateWithDuration:0.25 animations:^{
        [self.horizontalStackView layoutIfNeeded];
    }];
}

现在增加移除五角星的功能。从对象库拖拽一个UIButton到Add Star下方。选中UIButton和Add Star，点击Embed In Stack按钮插入堆栈视图。修改刚插入堆栈视图属性如下：

• Axis: Horizontal
• Alignment: Center
• Distribution: Equal Spacing
• Spacing: 10

刚添加UIButton标题为Remove Star，文字颜色为red。

StackViewD3Remove.png

为刚添加的UIButton创建名为removeStar的IBAction点击事件，并实现移除方法。

- (IBAction)removeStar:(UIButton *)sender
{
    UIView *filledView = self.horizontalStackView.arrangedSubviews.lastObject;
    
    // 如果视图存在，移除视图
    if (filledView)
    {
        [filledView removeFromSuperview];   // 会自动从arrangedSubviews移除
        [UIView animateWithDuration:0.25 animations:^{
            [self.horizontalStackView layoutIfNeeded];
        }];
    }
}

运行app，现在可以添加、移除五角星，且视图会随着设备旋转自动调整布局。

StackViewD3.gif

总结

通过这篇文章，可以看到UIStackView极大降低了用户界面开发难度，简化了许多工作，仅仅添加少量约束便可实现自动布局。在布局时，应该优先考虑使用Stack View来布局界面。

Demo名称：StackView
源码地址：https://github.com/pro648/BasicDemos-iOS

参考资料：

1. Stacks
2. iOS 9: Getting Started with UIStackView
3. What are the different UIStackView distribution types?

欢迎更多指正：https://github.com/pro648/tips/wiki