UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图,你不用再添加自动布局的约束了。Stack View管理这些子视图的布局,并帮你自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸。此外,你可以嵌入一个stack View到另一个stack view中来创建更为复杂的用户界面。不要误解我的意思,这并不意味着你就不需要处理自动布局了。你仍旧要定义一些布局约束来约束stack view。它只是帮你节约了为每个UI元素创建约束的时间,同时它更容易的从布局中添加/删除一个视图。
Xcode7提供两种方式使用UIStackView。你可以从对象库中拖一个Stack View(水平的/竖直的)放到storyboard的正确位置上。然后你可以拖一些label,button,imageView等视图放到stack view中。另外,你可以在自动布局栏中使用Stack选项。对于这个方式,你可以简单的选择两个或更多的视图,之后点击Stack选项,IB将会把这些视图嵌入到一个stackview中,并自动的调整。如果你仍旧对如何使用stack view没有太多头绪,没关系,接下来我们将在这篇文章中介绍这两种方式。继续往下阅读,你就会很快明白我的意思的。
我假设你对auto layout了解。如果不是,请先阅读这片关于autolayout的[介绍文章]
Demo App
先瞧一眼我们将要构建的demo app。在这篇文章中我将会给你展示如何使用stackview布局一个类似的用户界面:
你可以不使用stack view创建一样的UI,但是,但正如你所看到的,stack view完全改变了布局用户界面的方式。本文并没用coding,我们只是集中在使用IB来布局这个用户界面。
开始前,请下载这个[开始项目](备用[自己新建的开始项目])。你需要使用Xcode7 beta4(或以上版本)来build这个工程。如果你没有安装,你要下载个。该项目模板非常简单,它仅仅预置了导航控制器和一些示例图片。
感谢:实例的照片是由[magdeleine.co]提供。
从对象库中添加Stack Views