之前我们讲解了Swift2的新特性。我们将从介绍iOS9的一些很酷的新功能开始这篇文章。即将推出的iOS新版本将带来许多新功能。对于开发者来说，栈视图（UIStackView）的引入值得一提。我知道有些开发者很难使用autolayout来设计一些复杂的交互界面。UIStackView可以帮助并简化我们开发人员的工作。UIStackView提供了一个高效的界面来平铺一行或一列视图。对于嵌入在StackView中的视图，您不再需要添加自动布局约束。StackView管理这些子视图的布局并帮助您自动化布局约束。也就是说，这些子视图可以适应不同的屏幕尺寸。此外，您可以将一个堆栈视图嵌入到另一个堆栈视图中，以创建更复杂的用户界面。不要误会我的意思，这并不意味着您不必处理自动布局。您仍然必须定义一些布局约束来约束堆栈视图。它只是为您节省了为每个UI元素创建约束的时间，并且可以更轻松地从布局中添加/删除视图。Xcode7提供了两种使用UIStackView的方式。您可以将StackView（水平/垂直）从对象库拖到故事板上的正确位置。然后你可以将一些标签、按钮、imageView和其他视图拖到堆栈视图中。此外，您可以使用自动布局栏中的堆叠选项。对于这种方法，你可以简单地选择两个或多个view，然后点击Stack选项，IB会把这些view嵌入到一个stackview中，并自动进行调整。如果你对如何使用stackview还不太了解，没关系，我们将在本文中介绍这两种方式。继续阅读，您很快就会明白我的意思。我假设您了解自动布局。如果没有，请先阅读这篇关于自动布局的[介绍文章]DemoApp，看看我们将要构建的demoApp。在这篇文章中，我将向您展示如何使用堆栈视图来布局类似的UI：您可以在没有堆栈视图的情况下创建相同的UI，但是，正如您所看到的，堆栈视图完全改变了布局UI的方式。本文不使用编码，我们只是专注于使用IB来布局这个用户界面。在开始之前，请下载这个[启动项目]（或者[你自己的新启动项目]）。您需要使用Xcode7beta4（或更高版本）来构建此项目。如果你没有安装它，你必须下载它。项目模板非常简单，它只是预先构建了导航控制器和一些示例图像。致谢：示例照片由[magdeleine.co]提供。从对象库添加堆栈视图现在升级Xcode7并打开Main.storyboard。将垂直堆栈视图从对象库中拖放到故事板上的视图控制器中。StackView可以在纵向和横向布局中排列其子视图（称为排列视图）。由于我们要布局垂直图像视图，因此我们选择垂直堆栈视图。接下来，从对象库中拖出一个图像视图。当您将图像视图放入堆栈视图时，图像视图将自动调整。重复相同的操作以添加更多图像视图。这就是它发挥魔力的地方：当你添加另一个图像视图时，堆栈视图将自动布置图像视图，为你设置必要的约束。很酷，对吧？DefineLayoutConstraintsforStackViewStackView为开发者节省了为每个UI元素定义约束的时间，即你需要为StackView提供布局约束。对于我们刚刚添加的内容，我们需要定义如下布局约束：设置StackView的顶部、左右间距，使StackView位于屏幕顶部。为StackView设置高度约束，使StackView的高度为父视图高度的70%。现在选中stackview，点击布局栏按钮中的Pin按钮，将top、left、right的值分别设置为10、0、0。然后点击“Add3Constraints”按钮来添加这些约束。Stack视图的当前位置不符合约束条件。您可以单击文档大纲上的警告指示器（黄色箭头）来更正位置。要设置高度约束，将视图从堆栈视图拖动到IB的文档大纲中视图中的控件，松开按钮，然后选择“等高”。这会将堆栈视图的高度设置为等于此视图的高度。然而，堆栈视图只需要其高度的75%。因此，选择“StackView.height”约束，选择属性检查器，并将乘数的值从1.0更改为0.7。#p#设置StackView的属性这个stackview看起来不像我们预期的那样。添加堆栈视图后，您可以更改堆栈视图的某些属性以更改其外观。axis选项决定布局视图应该垂直还是水平布局。对齐选项控制这些视图的对齐方式。比如你设置为Leading，stackview管理的视图排列会按照Leading对齐。distribution属性决定了它管理的视图的大小和位置。默认设置为填充。这是堆栈视图试图将其所有子视图保持在合理距离的地方。现在将其更改为FillEqually。堆栈视图将其所有子视图调整为相同大小。spacing属性允许您设置视图之间的间距。将其值更改为10以增加图像视图之间的间距。设置图像接下来，我们为图像视图设置相应的图像。选择第一个图像视图，选择属性检查器，将图像设置为“nature-1”，将模型设置为“AspectFill”，并选中“ClipSubviews”。对剩余的图像视图重复相同的步骤，但将图像设置为“nature-2”和“nature-3”。所以你的布局看起来像这样：现在你可以运行项目并预览它。您可以在模拟器上测试应用的UI是否正确适配所有设备。堆栈视图已自动为您添加约束。您实际上可以启用视图调试选项（在运行应用程序时）以显示图像视图的布局约束。使用嵌套堆栈视图布局标签和按钮我们还没有完成。用户界面中添加了多个标签和按钮。现在将对象库中的标签拖到视图中，将其命名为“Nature”并将其放置在堆栈视图下方。将其字体大小更改为30磅，使其更大一些。接下来，放置另一个标签视图和名称标签“来自magdeleine.co的自然照片集”。放置在自然标签下。同样，您不需要为这些标签设置布局约束。让堆栈视图为您施展魔法。在本教程的开头，我提到了使用堆栈视图的方法。以前，堆栈视图是从对象库中添加的。现在我告诉你另一种方式。按住命令键选择选项卡，然后点按布局栏中的“堆叠”按钮。IB自动将这些选项卡嵌入到垂直堆叠视图中。接下来，向视图添加2个按钮。将一个按钮命名为“喜欢”，将另一个命名为“分享”。同样，我们不想处理自动布局。因此，选择布局栏中的按钮并单击Stack按钮将两个按钮嵌入到水平堆栈视图中。将堆栈视图的间距值设置为5。如果您查看最终布局，这两个按钮应该放在Nature标签旁边。你怎么能做到这一步？堆栈视图最重要的一点是，您可以使用嵌套的多个堆栈视图来构建您想要的确切布局。现在将堆栈视图拖到Nature标签上的按钮上。释放按钮后，堆栈视图将嵌入到另一个堆栈视图中。要布置Nature标签和按钮，请选择两个视图，然后使用堆栈选项将它们添加到另一个堆栈视图。默认情况下，新堆栈视图的轴设置为垂直。在Propertiesinspector中，将其更改为Horizo??ntal，以便Like和Shared按钮位于Nature标签旁边。该按钮还需要与Nature标签的基线对齐。选择堆栈视图并将对齐方式从填充更改为第一基线。此外，间距选项设置为20，以在Naturel标签和按钮之间添加间距。如您所见，我们只需要使用嵌套堆栈视图来构建您需要的确切布局。#p#最后，我们为包含图像的堆栈视图和包含按钮和标签的堆栈视图设置布局约束。选择包含按钮和标签的堆栈视图，然后单击布局栏按钮中的Pin按钮。将top、left、right的值分别设置为0、8、0。确保Description标签是AutoSize，Lines设置为0，LineBreaks设置为WordWrap。太好了，你已经完成了界面设计。现在运行该项目以查看结果。如果一切配置正确，您的UI应该是这样的：如果您将iPhone横过来，UI应该是这样的：看起来不错，但是如果图像像这样横向排列不是更好吗？使用SizeClasses来调整StackViews为了在不同的方向上实现不同的iPhone布局，我们必须让StackView自适应。在iOS8中，引入了SizeClasses的概念。下表显示了iOS设备及其对应的尺寸类：您可以使用提供的尺寸类来覆盖原始的基本布局。在这种情况下，对于这两个尺寸类别，我们必须将堆栈视图（包含图像视图的那个）的轴从垂直设置为水平：紧凑宽度-紧凑高度常规宽度-紧凑高度现在选择堆栈视图,在选择属性检查器中。单击轴选项下的+按钮。选择AnyWidth>Compactheight，然后将此尺寸类别下的Axis值设置为Horizo??ntal。这里，任何宽度包括紧凑宽度和常规宽度。这样做之后，当iPhone横向时，堆栈视图将被设置为水平的。在不同的iOS设备上运行该项目以查看结果。总结在本教程中，我向您介绍了堆栈视图并演示了如何使用这个新组件来布置您的UI。堆栈视图允许您在几乎没有约束的情况下高效地布置UI。您可能有一个问题，什么时候使用堆栈视图？苹果的工程师建议开发者先采用stackview，再采用实际需要用到的繁琐约束。所以，开始使用堆栈视图设计您的UI！我相信你会喜欢的。作为参考，您可以在此处下载[Xcode项目]。
