首页 >iOS开发

iOS 9学习系列:UIStackView如何让你的开发更简单

2015-08-20 09:10 编辑: suiling 分类:iOS开发 来源:appcoda

本文由CocoaChina译者熏修翻译自appcoda.
原文:An Introduction to Stack Views in iOS 9 and Xcode 7


之前我们阐述了Swift2的新特性。本篇文章的开始我们将涵盖一些iOS9的很酷的新特性。iOS即将到来的新版本会带来很多新的特性。对于开发者来说堆栈视图(UIStackView)的引入值得一提。我知道对于一些开发者来说使用autolayout设计一些复杂的交互界面是比较困难的。UIStackView正好能帮助到并让我们的开发者的工作变得更容易些。

UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图,你不用再添加自动布局的约束了。Stack View管理这些子视图的布局,并帮你自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸。此外,你可以嵌入一个stack View到另一个stack view中来创建更为复杂的用户界面。不要误解我的意思,这并不意味着你就不需要处理自动布局了。你仍旧要定义一些布局约束来约束stack view。它只是帮你节约了为每个UI元素创建约束的时间,同时它更容易的从布局中添加/删除一个视图。

1.png

Xcode7提供两种方式使用UIStackView。你可以从对象库中拖一个Stack View(水平的/竖直的)放到storyboard的正确位置上。然后你可以拖一些label,button,imageView等视图放到stack view中。另外,你可以在自动布局栏中使用Stack选项。对于这个方式,你可以简单的选择两个或更多的视图,之后点击Stack选项,IB将会把这些视图嵌入到一个stackview中,并自动的调整。如果你仍旧对如何使用stack view没有太多头绪,没关系,接下来我们将在这篇文章中介绍这两种方式。继续往下阅读,你就会很快明白我的意思的。

我假设你对auto layout了解。如果不是,请先阅读这片关于autolayout的[介绍文章]

Demo App

先瞧一眼我们将要构建的demo app。在这篇文章中我将会给你展示如何使用stackview布局一个类似的用户界面:

stackview-16-2.png

你可以不使用stack view创建一样的UI,但是,但正如你所看到的,stack view完全改变了布局用户界面的方式。本文并没用coding,我们只是集中在使用IB来布局这个用户界面。

开始前,请下载这个[开始项目](备用[自己新建的开始项目])。你需要使用Xcode7 beta4(或以上版本)来build这个工程。如果你没有安装,你要下载个。该项目模板非常简单,它仅仅预置了导航控制器和一些示例图片。  

感谢:实例的照片是由[magdeleine.co]提供。

从对象库中添加Stack Views 

现在升级Xcode7并打开Main.storyboard。从对象库中拖出垂直的stack view放到storyboard上的view controller中。Stack View可以在纵向和横向布局安排其子视图(称为安排视图)。因为我们要布局垂直的图像视图,所以我们选择垂直的Stack View。

stackview-1-fs8.png

接下来,从对象库中拖出一个图像视图,当你把图像视图放到stack view中,图像视图会自动调整。重复同样的操作,添加更多的image view。这就是它神奇的地方:当您添加另一个图像视图时,stack view会自动布局图像视图,为您设置必要的约束。酷,对吗?

为Stack View定义布局约束

Stack View节省了开发者为每个UI元素定义约束的时间,所说的,您需要提供Stack View的布局约束。对于我们刚刚添加的,我们需要定义以下布局约束:

  • 设置Stack View的距上,距左和居右的间距,使得Stack View在屏幕的顶部。

  • 为Stack View设置一个高度约束,使得Stack View视图的高度占父视图高度的70%。

现在选择stack view,点击布局栏按钮中的Pin按钮,设置距上,距左,居右值分别为10,0,0。然后点击“Add 3 Constraints”按钮添加这些约束。

stackview-3-fs8.png

Stack view的当前位置不符合约束,你可以在Document Outline点击警告指示(即黄色的箭头)纠正位置。

要设置高度约束,就要在IB的Document Outline中从堆栈视图到视图中的控件拖动视图,释放按钮后,选择“Equal Heights”。

30.png

这是设置stack view的高度和这个view的高度相等的。然而,stack view仅仅需要高度的75%。所以,选择“Stack View.height”的约束,选择Attributes inspector,把Multiplier这项的值从1.0改为0.7.

31.png

设置Stack View的属性

这个stack view 看起来并不是我们期望的。一旦你添加了stack view,你可以改变一些stack view的属性来改变它的外观。axis选项决定是否应布置的视图垂直或水平布置。 alignment选项控制这些视图的对齐方式。比如你如果设置成Leading,stack view管理的视图排列按Leading对齐。

32.png

distribution属性决定了其管理的视图的大小和位置。默认设置为Fill。这是stack view尽量让它的所有子视图在一个合理的距离。现在把它改为Fill Equally。stack view会调整它所有的子视图一样的尺寸。

33.png

spacing属性让你设置视图之间的间距。把它值改为10来增加图像视图之间的间距。

34.png

设置图像

接下来,我们设置image view的相应的图像。选择第一个image view,选择Attributes inspector,把image设置为“nature-1″,把model设置为“Aspect Fill”,同时勾选上“Clip Subviews”。重复同样的步骤设置余下的image view,但是要把image 设置为“nature-2″ 和 “nature-3″。这样你的布局看起来像这样:

35.png

现在你可以运行项目,预览下。可以在模拟器上测试app的UI是否正确的适配所有的设备。stack view已经自动的为你添加好了约束。事实上你可以启动view debugging选项(要在运行app的时候)来显示图像视图的布局约束。

36.png

使用嵌套Stack View布局标签和按钮

我们还没有完成。有几个标签和按钮添加到用户界面。现在将标签从对象库中拖到视图,命名“Nature”,并将其定位在stack view下面。把它的字体大小改为30点,使其更大一些。下一步,将另一个标签视图和名称标签”A collection of nature photos from magdeleine.co“。放置在Nature标签之下。

再次,您不需要设置这些标签的布局约束。让stack view为你做这个魔术。在本教程的最开始,我提到了使用stack view的方法。之前,是从对象库中添加了堆栈视图。现在我会告诉你另一个办法。

按住命令键来选择标签,然后单击布局栏中的Stack按钮。IB自动把这些标签嵌入到垂直堆叠视图中。

37.gif

下一步,向视图添加2个按钮。命名一个按钮,“Like”,另一个是“Share”。再次,我们不想处理自动布局。所以,在布局栏中选择按钮,然后单击Stack按钮,将两个按钮嵌入到一个水平堆栈视图中。设置堆栈视图的spacing值为5。

38.png

如果你看了最后的布局,这两个按钮应该放在Nature标签旁边。你怎么能做到这一步呢?关于stack view的最重要的是,您可以使用嵌套的多个stack view来构建你想要的精确布局。现在将stack view拖到Nature标签的按钮上。一旦你释放了按钮,stack view将被嵌入到另一个stack view中。布局Nature标签和按钮,选择两种视图,然后将它们添加到另一个stack view中,使用stack选项。默认情况下,新堆栈视图的轴设置为垂直方向。在属性检查中,把它改为水平,这样就可以把Like和Shared按钮放置在Nature标签旁边了。

39.gif

按钮也需要与Nature标签的基线对齐。选择stack视图,并将alignment从Fill改为First Baseline。同时,spacing选项设置为20,这样来添加Naturel标签和按钮之间的间距。

40.png

正如你所看到的,我们只需要使用嵌套的stack view构建你需要的精确布局。

最后,我们为包含图像的stack view和包含按钮&标签的stack view之间的设置布局约束。选择包含按钮和标签的堆栈视图,然后单击布局栏按钮中的Pin按钮。设置居上、距左和居右的值分别为0、8和0。

41.png

确保描述标签是自动调整大小,Lines设置为0和Line Breaks设置为Word Wrap。太好了你已经完成了界面设计。现在运行该项目来看看结果。如果您的一切配置正确,您的UI应该看起来像这样:

42.png

如果你把iPhone横过来,UI应该是这样:

43.png

它看起来不错,但如果这些图像想这样横向排列的话,是不是更给力?

44.png

使用Size Classes 调整Stack Views

为了达到iPhone在不同的方向上布局不一样,我们必须使stack view自适应。在iOS 8中,介绍了Size Classes的概念。下表显示了iOS设备及其相应的Size Classes:

45.png

你可以使用size classes提供的重写原来的基本布局。在这种情况下,我们在这两种size classes情况下要设置stack view的axis(持有图像视图的)从垂直到水平:

  • Compact width-Compact height

  • Regular width-Compact height

现在选择stack view,在选择Attributes inspector。在Axis选项下点击+按钮。选择Any Width > Compact height,之后设置这个size classes下的Axis值为Horizontal。这里,any width包括compact和regular两种宽度。

46.gif

做完这些,stack view将会在iPhone横屏的时候设置为水平。在不同的iOS设备上运行项目,查看结果。

总结

在本教程中,我给你介绍了stack view并演示如何使用这个新组件布局你的UI。stack view让你使用很少的约束高效的完成UI的布局。你可能有一个问题是,何时使用stack view?苹果公司的工程师建议开发者先采用stack view,然后才是需要实际使用的繁琐的约束。因此,开始设计你的用户界面使用stack view!我相信你会喜欢它。

供参考,你可以在这里下载[Xcode项目]。

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:iOS 项目的目录结构能看出你的开发经验
下一篇:【iOS程序启动与运转】- RunLoop个人小结
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部