UIStackView & Auto Layout changes(一)

Getting started

学习iOS9 by Tutorials笔记


UIStackView & Auto Layout changes(一)_第1张图片

打开VacationSpots-Starter,运行有些cell的nameLabel和locationLabel内容不居中,如下图红色框住的。

UIStackView & Auto Layout changes(一)_第2张图片

1.点击第一行London Cell,观察下,最后面3个button没有适配屏幕宽度,把屏幕旋转下就更明显了

UIStackView & Auto Layout changes(一)_第3张图片

2.点击Hide button能把下方的内容隐藏起来,可是下面还留了一片空白。

UIStackView & Auto Layout changes(一)_第4张图片

3.有些地方可以提升的,就是WHAT TO SEE部分在WHY VISIT下面

4.在landscape在情况下,下面的button太靠近底部边缘。

指出了程序的问题。我们将要修改好它们。

打开Main.storyboard,查看Spot Info View Controller


UIStackView & Auto Layout changes(一)_第5张图片

观察到上面的控件有背景色,是方便我也等下用stack view修改。它们会在运行的时候清除颜色

for view in backgroundColoredViews {

    view.backgroundColor =UIColor.clearColor()

}

Your first stack view

首先修改上面问题中的第一个,stack view可以保持button间的间距,stack view可以使他们按指定的方式分布,选择3个button


然后在点击嵌入stack view


然后变成这样了:


以前和这几个button相关的约束都被清除了,以前是这样子的


UIStackView & Auto Layout changes(一)_第6张图片

现在:


现在要给stack view添加约束,如下图


UIStackView & Auto Layout changes(一)_第7张图片

然后变成这样:


查看stack view的属性


现在Distribution是Fill,他会把stack view里面的内容填满stack view,我们把它改成:

UIStackView & Auto Layout changes(一)_第8张图片


下面是关于iOS9 AutoLayout的一些新特新

Layout anchors(布局锚)

在iOS9之前,加入有两个label。分别叫做叫做topLabel和bottomLabel。你想设置topLabel底部距离bottomLabel顶部的距离为8,代码要这样写:

letconstraint =NSLayoutConstraint('

item: topLabel,

attribute: .Bottom,

relatedBy: .Equal,

toItem: bottomLabel,

attribute: .Top,

multiplier:1,

constant:8

)

而在新特新的情况下,你只需这样写:

let constraint = topLabel.bottomAnchor.constraintEqualToAnchor(bottomLabel.topAnchor, constant:8)

Non-equal constraints

添加不相等的约束,在iOS9之前,你需要这样做


UIStackView & Auto Layout changes(一)_第9张图片

而现在:NSLayoutAnchor有下面的方法方便我们添加这种约束:


Including a multiplier

按之前的方法创建的约束需要填很多参数:

UIStackView & Auto Layout changes(一)_第10张图片

NSLayoutAnchor的子类NSLayoutDimension,有下面这些方法给我们用:


Layout guides

把Layout guide看成是矩形区域在你的view的层次上

Fixing the alignment bug


UIStackView & Auto Layout changes(一)_第11张图片

在awakeFromNib里。

说下这几步做了什么。

1.生产UILayoutGuide,并把它加入到cell的contentView中

2.把layoutGuide的top设置成nameLabel的top

3.把layoutGuide的�bottom设置成locationNameLabel的bottom

4.把layoutGuide的centerY设置成contentView的centerY

5.激活这些约束


UIStackView & Auto Layout changes(一)_第12张图片

Handling the truncation

看上面的效果,发现下面的label被截断了。这是因为要同时满足新加的约束和在storyboard中得约束的原因。因为距离上面的约束是15


UIStackView & Auto Layout changes(一)_第13张图片

把上面的约束删除就会报错:


UIStackView & Auto Layout changes(一)_第14张图片

而实际上,我们不删除它。


UIStackView & Auto Layout changes(一)_第15张图片

运行


UIStackView & Auto Layout changes(一)_第16张图片

(完)

你可能感兴趣的:(UIStackView & Auto Layout changes(一))