本文转自http://www.cocoachina.com/ios/20150623/12233.html

本文由CocoaChina译者candeladiao翻译,欢迎参加我们的翻译活动
原文:iOS 9: Getting Started with 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在最上面,image view在中间,button在下面。添加完成后看起来是这样:

接下来,我们要在Attributes Inspector里修改一下刚才添加的subview的属性。把label的文本秘诀成“How do you likeour app?”, Text Alignment选择Center 。image view的Image 输入“logo”, Content Mode选Aspect Fit。最后把button的Text 设置成“Add Star!”。

运行app。能看到我们只做了很少工作,但已经添加了三个能响应方向、size class等改变的subview。事实上你并不需手动添加任何约束。

当app运行时,点击Xcode窗口底部Debug View Hierarchy按钮可以进行实时视图调试

选择先前添加的任意一个subview。查看size inspector,我们注意到Stack View已经自动为其添加了约束。下图显示的是为button添加的约束

5. 添加五角星

按钮事件还没和app界面关联,我们先关联起来。停止运行app,打开storyboard。创建一个名为addStar的IBAction 关联到按钮的Touch Up Inside事件。

addStar(_:)方法实现:

@IBAction func addStar(sender: AnyObject) {
    let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))
    self.horizontalStackView.addArrangedSubview(starImgVw)
    UIView.animateWithDuration(0.25, animations: {
        self.horizontalStackView.layoutIfNeeded()
    })
}

给水平布局的Stack View里的星星image添加动画。记住,由于Stack View自动为我们管理Auto Layout constraints,我们只能调用layoutIfNeeded来实现动画。

编译运行app,点击add star按钮。能看到最后结果却不尽人意。

选择下面的Stack View,查看Attributes Inspector会看到问题所在。由于Alignment 和Distribution 都设置成了Fill,Stack View 拉伸了星星以适应其大小。

这在添加更多的星星的时候会引起更多问题。我们希望星星居中显示,而不是被拉伸来适应Stack View的宽度。

修改Alignment 的值为Center ,修改Distribution 的值为Fill Equally。最后在addStar(_:)方法中设置image view的内容。

@IBAction func addStar(sender: AnyObject) {
    let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))
    starImgVw.contentMode = .ScaleAspectFit
    self.horizontalStackView.addArrangedSubview(starImgVw)
    UIView.animateWithDuration(0.25, animations: {
        self.horizontalStackView.layoutIfNeeded()
    })
}

运行app,点几次添加按钮,我们发现所有星星居中了。

6. Stack View嵌套

不能删除星星,我们的app评分什么用处不大。打开storyboard,添加一个水平布局的Stack View到上面的Stack View里。把它放置在logo之下,按钮之上。

把“Add Star!”按钮拖到新添加的Stack View里,再添加一个按钮到新的Stack View里。改变按钮的title为“Remove Star”,文本颜色设为red。预览如下:

在Attributes Inspector中编辑新Stack View的属性,改变如下:

  • Alignment 设为 Center

  • Distribution 设为 Equal Spacing

  • Spacing 设为 10

7. 删除五角星

为“Remove Star”按钮创建名为removeStar,事件类型为Touch Up Inside的IBAction响应方法。

removeAction(_:)实现:

@IBAction func removeStar(sender: AnyObject) {
    let star:UIView? = self.horizontalStackView.arrangedSubviews.last
    if let aStar = star
    {
        self.horizontalStackView.removeArrangedSubview(aStar)
        aStar.removeFromSuperview()
        UIView.animateWithDuration(0.25, animations: {
            self.horizontalStackView.layoutIfNeeded()
        })
    }
}

运行app,现在既可增加,也可删除了。改变模拟器方向或者旋转设备看看app会怎样调整其界面。我们并未添加一行约束就构建好了app的用户界面。

需要注意的是:removeStar(_:)里调用removeFromSuperview是把subview从视图层级中移除。再次调用removeArrangedSubview(_:)只是告诉Stack View不再需要管理subview的约束。而subview会一直保持在视图层级结构中直到调用removeFromSuperview把它移除。

结论

UIStackView类大大简化了用户界面开发。这是好事,特别是随着硬件的改变。使用UIStackView,减少了开发者为简单场景设置枯燥的约束,把繁杂的工作交给了UIKit。

如果对文中的任何知识点感兴趣,可以从 GitHub下载完整工程。

iOS 9: UIStackView入门的更多相关文章

  1. iOS 8 AutoLayOut入门

    http://blog.csdn.net/asdfg13697116596/article/details/42562565 iOS 8 AutoLayOut入门自从iOS6带来Auto Layout ...

  2. 【转】iOS 开发怎么入门?

    原文网址:http://www.zhihu.com/question/20264108 iOS 开发怎么入门? 请问有设计模式.内存管理方面的资料吗?最好有除了官方文档之外的其它内容,10 条评论 分 ...

  3. IOS 客户端测试入门.pdf

    IOS 客户端测试入门  http://www.open-open.com/doc/view/42d1257bf67946f595e843bfdbdfeabf

  4. iOS 6 Passbook 入门 1/2

    http://www.raywenderlich.com/zh-hans/23066/ios-6-passbook-%E5%85%A5%E9%97%A8-12 iOS 6 Passbook 入门 1/ ...

  5. iOS 开发如何入门

    iOS 开发如何入门 新人如何入门 上一篇文章的回复中,很多读者让我推荐入门图书.其实我觉得每个人可能有自己喜欢的学习方式,我习惯的不一定适合你.不过我可以分享一下我当时是如何学习 iOS 开发的. ...

  6. 关东升的iOS实战系列图书 《iOS实战:入门与提高卷(Swift版)》已经上市

             承蒙广大读者的厚爱我的 <iOS实战:入门与提高卷(Swift版)>京东上市了,欢迎广大读者提出宝贵意见.http://item.jd.com/11766718.html ...

  7. 做QA的日子——iOS測试入门(四)

    坦言,做QA的这半年我没有成长,就算有成长也非常少,我非常难过.和身边的人讲事实上并没有谁能真正理解自己的难过,事实上还是自己不够努力.对自己不够狠,以前认为自己不够幸运,想有一个更好的指路人,事实上 ...

  8. 李洪强iOS开发之-入门指南

    李洪强iOS开发之-入门指南 1零基础小白如何进行iOS系统学习 首先,学习目标要明确:其次,有了目标,要培养兴趣,经常给自己一些正面的反馈,比如对自己的进步进行鼓励,在前期小步快走:再次,学技术最重 ...

  9. Xamarin.IOS之快速入门

    欢迎大家加入以下开源社区 Xamarin-Cn:https://github.com/Xamarin-Cn Mvvmcross-Cn:https://github.com/Mvvmcross-Cn  ...

随机推荐

  1. Linux_iptables

    Linux:网络防火墙 netfilter:Frame iptables: 生成防火墙规则,并附加到netfilter上实现数据报文过滤 NAT mangle等规则生成的工具 TCP有限状态机 LIS ...

  2. DataFrame重命名单个column

    由于当时的需求我的a表和b表的公共键名称不一样 例如这个 那么我就可以进行重命名: df1 = DataFrame(np.arange().reshape((, )), columns=['a', ' ...

  3. 【Html】Clipboard.js 实现点击复制,剪切板操作

    可以使用cdn 或者直接下载 设置好引用路径(百度云下载) <script type="text/javascript" src="./dist/clipboard ...

  4. mybaits if标签语句

    Mybatis if 标签可用在许多类型的 SQL 语句中,我们以查询为例.首先看一个很普通的查询: <!-- 查询用户列表,like用户名称 --> <select id=&quo ...

  5. Unity 各个组件参数总结

    今天在蛮牛教育上学习了NGUI的课程下面给大家总结了一些小知识点希望对大家有帮助UICamera-可以添加到任何相机,包含事件系统.UICamera是每个UI的重要组成部分.它负责发送Camera中所 ...

  6. (转)在公司的局域网使用git或github 设置代理

    目录 [hide] 1 生成SSH Key 2 git使用http访问 3 git使用ssh进行访问 在公司这样的局域网环境中,向要走网络必须走HTTP代理出去.不能直接访问外面的服务,所以这样安全了 ...

  7. C# wkhtmltopdf 将html转pdf

    一.转换程序代码如下: public string HtmlToPdf(string url) { bool success = true; // string dwbh = url.Split('? ...

  8. php base64_encode,serialize对于存入数据表中字段的数据处理方案

    A better way to save to Database $toDatabse = base64_encode(serialize($data)); // Save to database $ ...

  9. 使用阿里云的maven私服的setting.xml, 提高maven项目jar下载速度

    下载: http://files.cnblogs.com/files/007sx/settings.zip 然后替换自己原本maven的配置文件. 如下载失败,可内容替换: <?xml vers ...

  10. XcenServer和XcenCenterter的安装

    XcenServer安装 安装在客户端(作为服务器的电脑) 准备工具:U盘(4G以上).uiso9(iso刻录) 步骤一:下载ISO文件, 下载地址:https://xenserver.org/ove ...