移动应用软件开发综合实训（基于iOS平台）-2017 堆叠视图UIStackView使用 iOS 9- UIStackView入门.docx

iOS 9- UIStackView入门 同iOS以往每个迭代一样，iOS 9带来了很多新特性。UIKit框架每个版本都在改变，而在iOS 9比较特别的是UIStackView，它将从根本上改变开发者在iOS上创建用户界面的方式。本文将带你学习怎样使用UIStackView创建用户界面。 本文假定你已经熟悉Auto Layout基础。不熟悉的可以先看看Auto Layout教程。要理解Stack View为何如此有用及它是如何起作用的，需要首先对Auto Layout有深入了解。 1. 实例预览 我们将使用UIStackView模拟一个app评分提示。用户可以增加星星或者移除星星来打分。完成后看起来是这样。 先从 GitHub下载样例工程并打开。在Main.Storyboard里有两个Stack View 我们将使用这两个Stack View来布局界面。开始编码前，让我们先看一下Stack View是如何工作的。 2. UIStackView 概述 Stack View的核心便是方便垂直或水平排布多个subview，如果你做过Android开发，那它和LinearLayout 控件非常相似。 Stack View最有用的就是它会自动为每个subview创建和添加Auto Layout constraints。当然你可以控制subview的大小和位置。可以通过选项配置subview的大小、排布以及彼此间的间距。 布局内容 打开Main.Storyboard，选择其中一个Stack View可以查看其选项，并选中一个Stack View。在 Attributes Inspector中，注意Stack View下面列出的选择。 Axis表示Stack View的subview是水平排布还是垂直排布。Alignment控制subview对齐方式。Distribution定义subview的分布方式。Spacing 为subview间的最小间距。 把术语简化一下，你可这样理解：Alignment 用于控制X 和 Y值，而Distribution 用于控制高度和宽度。另两个值都会影响对齐。如果选中Baseline Relative将根据subview的基线调整垂直间距。如果选中Layout Margins Relative 将相对于标准边界空白来调整subview位置。 另一个需要记住的是，Stack View会被当成Container View。所以它是一个不会被渲染的UIView子类。它不像其他UIView子类一样，会被渲染到屏幕上。这也意味着设置其backgroundColor属性或重载drawRect:方法都不会产生任何效果。 subView和arrangedSubView 开始使用Stack View前，我们先看一下它的属性subViews和arrangedSubvies属性的不同。如果你想添加一个subview给Stack View管理，你应该调用addArrangedSubview:或insertArrangedSubview:atIndex: arrangedSubviews数组是subviews属性的子集。 要移除Stack View管理的subview，需要调用removeArrangedSubview:和removeFromSuperview。移除arrangedSubview只是确保Stack View不再管理其约束，而非从视图层次结构中删除，理解这一点非常重要。 现在我们对Stack View有一定了解，开始使用它。 3. 配置垂直布局的Stack View 打开Main.Storyboard选择上面的Stack View。对Attributes Inspector作如下改变： Alignment 设为 Center Distribution 设为 Equal Spacing Spacing 设为 30 这告诉Stack View为subview添加约束，使其垂直居中并沿Stack View的轴线对称，然后为subview设置边距30。 如果subview大小和Stack View内容区不相符，将根据compression resistance priorities对subview进行拉伸或压缩。在运行时给Stack View添加subview也同样会如此。 布局有任何歧义Stack View都会根据subview在arrangedSubviews中index一步步回退去调整subview的大小，直至其刚好适应Stack View的大小。 4. 给Stack View添加垂直布局的Subview 添加一个label，一个image view和一个button到上面的Stack View里。label在最上面，