翻译@Auto Layout Guide（自动布局指南）

• 原文：Auto Layout Guide
• 作者：Apple
• 更新：Yannmm@Github.com

Auto Layout Cookbook（自动布局使用手册）

Stack Views（利用堆叠视图布局）

本节通过实际例子展示堆叠视图的使用，界面复杂程度不断上升。堆叠视图能够有效降低界面复杂度，加快搭建速度；通过调整其各项属性，做到精细布局。此外，还可以在此基础上进一步添加约束，实现预期效果；然而布局复杂度也会因此上升。

具体源码详见项目Auto Layout Cookbook。

Simple Stack View（简单堆叠视图）

本例中，我们利用堆叠视图垂直布局一个标签（label），一个图像视图（image view）以及一个按钮（button）。

图25

Views and Constraints（搭建布局）

拖拽一个堆叠视图（stack view）到画布上；向其中添加一个标签，一个图像视图和一个按钮。随后按照下图添加约束：

图26

Stack View.Leading = Superview.LeadingMargin
Stack View.Trailing = Superview.TrailingMargin
Stack View.Top = Top Layout Guide.Bottom + Standard
Bottom Layout Guide.Top = Stack View.Bottom + Standard

Attributes（设置属性）

打开堆叠视图属性面板，设置如下：

然后打开图像视图属性面板，设置如下：

最后，打开图像视图尺寸面板，调整外扩和内缩优先级：

Discussion（分析&讨论）

系统根据堆叠视图的内容计算其尺寸。所以，只需固定其位置即可。

这里我们让堆叠视图填充父视图，四周标准间距。内容视图尺寸经过缩放，以适应堆叠视图：水平方向上，拉伸至堆叠视图宽度；垂直方向上，根据各自的内缩和外扩优先级调整高度。图像视图应该被优先缩放，因此其垂直方向上的外扩和内缩优先级应该小于其他内容视图。

随后将图像视图的内容模式（content mode）设置为等比例缩放适配（Aspect Fit）。顾名思义，图像被等比例缩放以适应视图尺寸。因此，无论视图尺寸如何变化，图像也不会变形。

更多关于固定子视图以填充父视图的信息，详见章节Simple Single View（简单独立视图）以及Adaptive Single View（自适应独立视图）。

Nested Stack View（嵌套堆叠视图）

这次我们通过嵌套多个堆叠视图实现一个复杂布局。另外为了达到预期效果，还需进一步添加约束。

图27

首先构建视图结构，再添加约束，如下一章节Views and Constraints（搭建布局）所示。

Views and Constraints（搭建布局）

处理层层嵌套的堆叠视图时，遵循"由内而外"原则。从姓名部分的一行开始：并排摆放一个标签和一个文本框，同时选中，依次点选菜单栏Editor > Embed In > Stack View。最后生成一个水平堆叠视图，可以作为姓名部分的一行使用。

创建三行，同时选中，依次点选菜单栏Editor > Embed In > Stack View。我们获得了一个垂直堆叠视图，可以作为姓名部分使用。不断重复，按照下图搭建界面，添加约束。

图28

Root Stack View.Leading = Superview.LeadingMargin
Root Stack View.Trailing = Superview.TrailingMargin
Root Stack View.Top = Top Layout Guide.Bottom + 20.0
Bottom Layout Guide.Top = Root Stack View.Bottom + 20.0
Image View.Height = Image View.Width

Attributes（设置属性）

每个堆叠视图拥有自己的属性，影响内容布局。打开属性面板，设置如下：

另外，将文本框背景颜色设置为浅灰色（light gray）。便于我们在设备方向改变时，观察其尺寸变化。

外扩和内缩优先级决定视图的拉伸顺序。打开尺寸面板，设置如下：

Discussion（分析&讨论）

本布局几乎全部通过堆叠视图完成。可惜，并非全部。例如图片应始终保持原始比例。然而我们无法使用章节Simple Stack View（简单堆叠视图）中的技巧。图片四周间距必须保持不变，设置内容模式为"等比例缩放适配（Aspect Fit）"会引入间隙。幸运的是，这里图片宽高比始终为1:1，所以将视图宽高比约束为1:1即可。

注意

对于IB来说，比例约束（Aspect Ratio）就是视图宽高之间的约束。约束中系数（Multiplier）有多种含义。对于比例约束来说，如果View.Width = View.Height，则系数为1，表示1:1等比例约束。

此外，所有文本框都应等宽。然而，它们散落在各个堆叠视图中，无法统一管理。所以，需要添加等宽约束。

同简单堆叠视图一样，必须调整部分视图的外扩和内缩（CHCR）优先级，以便其尺寸随父视图变化。

垂直方向上，上部堆叠视图（Upper Stack）和按钮堆叠视图（Button Stack）之间的空隙需要由文本视图填充。因此，其内缩优先级最低。

水平方向上，标签保持其固有宽度；文本框填充剩余空间。前者的优先级无需修改，因为IB会自动将其内缩优先级设置为251，高于后者；然而，我们仍需主动降低将文本框的外扩和内缩优先级。（译者：最后一句我也不知道为什么🤔）

图片高度应该同代表姓名的堆叠视图保持一致。然而，由于堆叠视图只"包裹"内容，所以图像视图的垂直外扩优先级必须非常低，才能保证其主动降低，与堆叠视图保持一致（而非堆叠视图增高，与图像视图保持一致）。此外，图像视图的等高约束进一步使问题复杂化，因为这导致水平和垂直约束互相依赖。所以文本框的水平内缩优先级必须非常低，否则图像视图不会主动缩小。对于上述情况，将优先级调至48或更低可以解决问题。

Dynamic Stack View（动态堆叠视图）

面对堆叠视图，如何动态的添加和删除内容？接下来，我们将完成这项挑战。内容的删除和添加都附带动画效果；另外，堆叠视图位于滚动视图中，从而使得过长的列表能够滚动。

图29

注意

本例旨在演示如何动态操作堆叠视图，如何在滚动视图中使用堆叠视图。实际开发中，列表最好通过UITableView实现。一般来说，不建议用堆叠视图替代列表视图。应根据具体需求，审慎区分不同技术的使用场景。

Views and Constraints（搭建布局）

界面初始布局很简单：将一个滚动视图置于画布中，填充整个根视图；向其中添加一个堆叠视图，再向堆叠视图中添加一个按钮。随后按照下图添加约束：

图30

1. Scroll View.Leading = Superview.LeadingMargin 
2. Scroll View.Trailing = Superview.TrailingMargin 
3. Scroll View.Top = Superview.TopMargin 
4. Bottom Layout Guide.Top = Scroll View.Bottom + 20.0 
5. Stack View.Leading = Scroll View.Leading 
6. Stack View.Trailing = Scroll View.Trailing 
7. Stack View.Top = Scroll View.Top
8. Stack View.Bottom = Scroll View.Bottom
9. Stack View.Width = Scroll View.Width

Attributes（设置属性）

打开堆叠视图属性面板，设置如下：

Code（编写代码）

为了添加和删除内容，我们需要编写一些代码。创建一个自定义视图控制器，使其拥有滚动视图和堆叠视图。

class DynamicStackViewController: UIViewController {
    
    @IBOutlet weak private var scrollView: UIScrollView!
    @IBOutlet weak private var stackView: UIStackView!
    
    // Method implementations will go here...
    
}

重写方法viewDidLoad，调整滚动视图的初始位置：我们需要滚动视图的内容从状态栏下边开始。

override func viewDidLoad() {
    super.viewDidLoad()
    
    // setup scrollview
    let insets = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0)
    scrollView.contentInset = insets
    scrollView.scrollIndicatorInsets = insets
    
}

然后为按钮编写动作方法，用来添加内容。

// MARK: Action Methods
 
@IBAction func addEntry(sender: AnyObject) {
    
    let stack = stackView
    let index = stack.arrangedSubviews.count - 1
    let addView = stack.arrangedSubviews[index]
    
    let scroll = scrollView
    let offset = CGPoint(x: scroll.contentOffset.x,
                         y: scroll.contentOffset.y + addView.frame.size.height)
    
    let newView = createEntry()
    newView.hidden = true
    stack.insertArrangedSubview(newView, atIndex: index)
    
    UIView.animateWithDuration(0.25) { () -> Void in
        newView.hidden = false
        scroll.contentOffset = offset
    }
}

上述代码首先为滚动视图计算新的偏移量，然后创建内容视图。内容视图被添加至堆叠视图时处于隐藏状态。隐藏视图对堆叠视图布局没有任何影响。最后，在动画block中显示视图，并更新滚动视图偏移量。

删除内容的代码类似；与方法addEntry不同的是，deleteStackView不通过IB与任何控件关联，而是以代码的形式与新创建的内容视图关联。

func deleteStackView(sender: UIButton) {
    if let view = sender.superview {
        UIView.animateWithDuration(0.25, animations: { () -> Void in
            view.hidden = true
        }, completion: { (success) -> Void in
            view.removeFromSuperview()
        })
    }
}

这个方法通过动画block隐藏要删除的视图；待到动画结束，将其移出视图结构，这也意味着从堆叠视图内容中移出。

尽管可以添加任意视图，但这里我们使用一个堆叠视图作为内容视图。它包含两个标签，一个显示日期，另一个显示随机十六进制字符串，还有一个删除按钮。

// MARK: - Private Methods
private func createEntry() -> UIView {
    let date = NSDateFormatter.localizedStringFromDate(NSDate(), dateStyle: .ShortStyle, timeStyle: .NoStyle)
    let number = "\(randomHexQuad())-\(randomHexQuad())-\(randomHexQuad())-\(randomHexQuad())"
    
    let stack = UIStackView()
    stack.axis = .Horizontal
    stack.alignment = .FirstBaseline
    stack.distribution = .Fill
    stack.spacing = 8
    
    let dateLabel = UILabel()
    dateLabel.text = date
    dateLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleBody)
    
    let numberLabel = UILabel()
    numberLabel.text = number
    numberLabel.font = UIFont.preferredFontForTextStyle(UIFontTextStyleHeadline)
    
    let deleteButton = UIButton(type: .RoundedRect)
    deleteButton.setTitle("Delete", forState: .Normal)
    deleteButton.addTarget(self, action: "deleteStackView:", forControlEvents: .TouchUpInside)
    
    stack.addArrangedSubview(dateLabel)
    stack.addArrangedSubview(numberLabel)
    stack.addArrangedSubview(deleteButton)
    
    return stack
}
 
private func randomHexQuad() -> String {
    return NSString(format: "%X%X%X%X",
                    arc4random() % 16,
                    arc4random() % 16,
                    arc4random() % 16,
                    arc4random() % 16
        ) as String
}
}

Discussion（分析&讨论）

如你所见，堆叠视图能够根据内容的变化（添加或删除），动态调整布局。但请注意：

• 隐藏视图不会对堆叠视图布局产生任何影响；
• 视图加入堆叠视图的同时，也会加入当前视图结构；
• 视图从堆叠视图中移除，不会自动脱离当前视图结构；反过来，视图从当前视图结构中移除，会自动脱离堆叠视图。
• iOS视图属性hidden是不可以添加动画效果的。但加入堆叠视图后，就可以了，因为动画效果被堆叠视图实现。所以添加或删除内容时才有了渐隐渐现效果。

另外我们还使用了滚动视图，其内容尺寸通过堆叠视图定义。水平尺寸参照等宽约束；垂直尺寸等同于堆叠视图的适配尺寸（fitting size）。添加新内容，堆叠视图变长，一旦超出屏幕高度，滚动自动开启。

更多信息，详见章节Working with Scroll Views（滚动视图的使用）。