iOS9-by-Tutorials-学习笔记六:UIStackView-Auto-Layout-Changes
本文版权归作者所有,如需转载请联系孟祥月
CSDN博客:http://blog.csdn.net/mengxiangyue
独立博客:http://mengxiangyue.com
今天这是第六篇笔记,现在回过头去看,我也没有想到自己能够更新到第六篇。我算是一个比较懒的人了,现在已经不太喜欢动手敲代码了。在写这几篇笔记的时候,我需要一边看英文的文档,一边测试代码,还得考虑怎么能够写明白。这里有点说明,我的英语水平只是四级,语文水平只能用呵呵评价了,文章中的语句难免会有不通顺的地方,希望能够把语义表述清楚。
闲话多了,回到正题,这篇文章介绍UIStackView和一些Auto Layout的改变。
UIStackView我个人理解是为了解决使用Storyboard添加的约束需要经常变化的情况。我想我们可能都在开发中遇到过修改约束的情况,一般是把约束与一个outlet的约束link起来,然后代码修改,但是这个操作起来是不方便的。UIStackView通过修改一些简单的属性,例如alignment, distribution, and spacing,从而让UIStackView根据我们的修改自动调整内部的显示。
Auto Layout的改变主要是介绍layout anchors和layout guides。
Getting Started
打开本章的配套的工程VacationSpots,在iPhone 6模拟器上运行,能够看到APP有一些UI的问题,不要担心,在后面将会修复这些问题。简单梳理一下问题如下:
1. 图中标出的内容没有在垂直方向居中
点击列表中的London Cell进入详情页面,最下面的三个按钮没有平均分配空间:
点击WEATHER旁边的hide按钮,内容是被隐藏了,但是留下了一块空白,下面的内容没有移动上来:
WHAT TO SEE 部分在WHY VISIT的下面会更加合理一点。
现在已经了解了这些问题,下面开始用UIStackView来修改这些问题。打开Main.storyboard,查看如下的Controller scene:
能够注意到上面的每个对应的控件都有背景颜色,这个只是为了帮助我们查看这些属性的变化。这些背景颜色在运行的时候都会被去掉,通过如下代码,如果你想让它们在运行的时候也显示注释掉这些代码就可以:
// SpotInfoViewController.swift
override func viewDidLoad() {
super.viewDidLoad()
// Clear background colors from labels and buttons
for view in backgroundColoredViews {
view.backgroundColor = UIColor.clearColor()
}
........
}
在Storyboard中的的控件都通过outlet与SpotInfoViewController.swift中对应的属性进行了关联。在storyboard中显示的名字对应SpotInfoViewController.swift对应的变量。
Your first stack view
我们先用Stack View解决我们问题列表中底部按钮的问题。使用UIStackView能够在一个坐标抽上分配位置和控件之间的空间。幸运的是将Views嵌入到UIStackView中并没有太难。在Storyboard中的Spot Info View Controller选择如下三个按钮控件:
选择好三个按钮后,在Storyboard中点击如下的按钮:
当Views被嵌入UIStackView之后,Views的约束都被移除了,同时需要设置UIStackView的约束。选中UIStackView,然后按照如图添加约束:
这里有个选择UIStackView的技巧,由于UIStackView是在按钮的后面,很不好选中,我们可以按住Shift