本文翻译自Chris Grant的《iOS9 Day-by-Day :: Day 4 :: UIStack View》(https://www.shinobicontrols.com/blog/ios9-day-by-day-day4-uistack-view)。感谢Chris Grant的辛苦工作！
苹果从iOS 9开始引入UIStackView为应用程序提供简单的水平或垂直布局的能力。UIStackView使用自动布局管理每个子视图的位置和大小，使得UI更容易适配。
在没有UIStackView时，我们要实现同样的布局，需要使用大量的约束。比如手动设置间距，根据方向确定x/y坐标等。
UIStackView替我们把这些事情都做完了，甚至还为增加、隐藏和移除子视图以及修改布局属性等添加了平滑的过渡动画。
使用UIStackView
现在我们来看一下如何使用UIStackView。最终的代码在GitHub上。下面就一步一步来看一下如何使用UIStackView。这个例子使用UISegmentedControl来控制UIStackView的对齐和分布属性。
我们的目标就是实现上图所示的程序。如图所示，界面上显示了4个好友信息和2个分段控件。这个界面使用自动布局来适配不同屏幕尺寸。令人惊讶的是，我们只需要添加4个布局约束就可以了！
所有东西都被放在UIStackView中。我们一共会使用4个UIStackView。其中只要给第一个设置约束，并且将它放在根视图里。
将一个垂直的栈视图添加到页面后，打开约束面板，然后设置上图一样的四个约束。这样栈视图就会一直处于屏幕中央。
然后将三个或更多的水平栈视图加入刚才的垂直栈视图中。最上面的栈视图包含四个图片，每个图片对应一个好友。由于图片的尺寸各自不同，为了避免出现变形，我们将UIImageView的contentMode设置为Aspect Fit。这样不管图片视图的尺寸是什么样的，图片都会保持原始的长宽比！
大家可能注意到在最终的实现里，每个图片之间有一点小的间隙。这通过设置最上层栈视图的spacing属性即可。在同样的地方还可以设置对齐和分布属性，将这些属性都设置为“Fill”。我们在点击分段控件的时候再做其它修改。
另外还有两个水平的栈视图，每个都放置一个标签（Label）和分段控件（UISegmentedControl）。按下面的样子设置标签和分段控件的对齐和分布属性。
- Distribution
- Fill
- Fill Equally
- Fill Proportionally
- Equal Spacing
- Equal Centering
- Alignment
- Fill
- Top
- Center
- Bottom
我们很快就可以看到每个属性的演示了。需要注意的是，这些属性很大程度上依赖UIStackView的contentSize属性。
现在我们已经将UI创建好，接下来就是实现选择不同分段以后的动作。首先，将包含图片视图的UIStackView连接IBOutlet到视图控制器，并命名为peopleStackView。然后为每一个分段控件拖一个IBAction事件到代码中，用来处理分段控件的Value Changed事件。在这些方法中，我们将为peopleStackView设置对齐和分布属性。
@IBAction func alignmentSegmentSelected(sender: UISegmentedControl) {
UIView.animateWithDuration(1.0,
delay: 0,
usingSpringWithDamping: 0.5,
initialSpringVelocity: 0.2,
options: .CurveEaseInOut,
animations: { () -> Voie in
if sender.selectedSegmentIndex == 0 {
self.peopleStackView.alignment = .Fill
}
else if sender.selectedSegmentIndex == 1 {
self.peopleStackView.alignment = .Top
}
else if sender.selectedSegmentIndex == 2 {
self.peopleStackView.alignment = .Center
}
else if sender.selectedSegmentIndex == 3 {
self.peopleStackView.alignment = .Bottom
}
},
completion: nil)
}
@IBAction func distributionSegmentSelected(sender: UISegmentedControl) {
UIView.animateWithDuration(1.0,
delay: 0,
usingSpringWithDamping: 0.5,
initialSpringVelocity: 0.2,
options: .CurveEaseInOut,
animations: { () -> Void in
if sender.selectedSegmentIndex == 0 {
self.peopleStackView.distribution = .Fill
}
else if sender.selectedSegmentIndex == 1 {
self.peopleStackView.distribution = .FillEqually
}
else if sender.selectedSegmentIndex == 2 {
self.peopleStackView.distribution = .FillProportionally
}
else if sender.selectedSegmentIndex == 3 {
self.peopleStackView.distribution = .EqualSpacing
}
else if sender.selectedSegmentIndex == 4 {
self.peopleStackView.distribution = .EqualCentering
}
})
}
我将每每个改变动作都放在一个动画方法中，但这并不是必须的。只是这样能够看起来更舒服一点。如果将动画删掉，视图变化起来更加直接。下面就可以编译运行了。看看结果吧！
尝试不同的组合，看看结果是什么样的。我们可以发现，UIStackView自动适配了不同的设备。
将已有视图添加到UIStackView
如果需要将一个现有的布局改用UIStackView，只需要移除这些视图的约束，选中它们并在Interface Builder下方选择UIStackView即可。
Interface Builder自动将这些视图放入一个UIStackView中进行布局。
更多信息
更多关于Xcode 7自动布局的信息，可以观看WWDC session 218（“Mysteries of Auto Layout, Part 1”）。Jason Yao用了15分钟的时间来介绍UIStackView的用法，并且用一个例子来演示如何用更少的约束来快速布局。
戴维营教育
戴维营教育（Dive In Education)，潜心做IT职业教育！紧跟时代潮流，不弄虚作假！不忘初心！
网友评论