Imtermediate UIStackView(二)

Getting started

这篇的内容是接着上一篇，上篇中得4个问题，我们还没解决完。接下来就解决上次的没有解决的问题

Converting the sections

我们将把SpotInfoViewController中的section转换为stack view

Rating section

打开Main.storyboard Spot Info View Controller然后嵌入stack view：

Paste_Image.png

给stack view添加约束：

Paste_Image.png

设置他们的间距为8：

Paste_Image.png

你可能会看到红色星星那个Label被拉伸了：

Paste_Image.png

为了修复它，你可以改变stack view的属性，使它适应新的布局，改变它的Alignment,改为Top->Fill：

Paste_Image.png

好了：

Paste_Image.png

Your first vertical stack view

选择这两个label然后嵌入stack view:

Paste_Image.png

Paste_Image.png

给stack view加上约束：

Paste_Image.png

Paste_Image.png

看到下面的label的width没有随着stack view的width的变化

Alignment property

Paste_Image.png

Paste_Image.png

Paste_Image.png

最后我们选择Fill

Paste_Image.png

Convert the "what to see" section

选择这两个label然后嵌入stack view

Paste_Image.png

为新添加的stack view添加下面的约束：

Paste_Image.png

设置它的Alignment为Fill

Alignment

Horizontal axis:

Paste_Image.png

Vertical axis:

Paste_Image.png

FirstBaseline and LastBaseline:

Paste_Image.png

Convert the weather section

为这3个添加这样结构的stack view:

Paste_Image.png

Paste_Image.png

现在WEATHER的高度和Hide的高度一样，把包含这两个控件的stack view的Alignment属性设置为buttom：

Paste_Image.png

Change the weather section – for real

我们不用上面的方法，选择这两个label，添加stack view:

Paste_Image.png

为新加的stack view添加约束：

Paste_Image.png

并把Alignment属性改为Fill

Paste_Image.png

为WEATHER嵌入一个stack view，为什么这样做，是因为我们想它的大小不是那么宽，而是由WEATHER内容决定，并改Alignment属性为Leading：

Paste_Image.png

为Hide button添加，水平和baseline的约束，就OK了：

Paste_Image.png

Top-level stack view

选择这5个stack view，并嵌入新的stack view：

Paste_Image.png

Paste_Image.png

设置新的stack view的Alignment为Fill和间隔为20，设置Hide button的约束：

Paste_Image.png

Repositioning views

现在改变他们的位置，直接移动stack view:

Paste_Image.png

Arranged subviews

UIStackView有个属性叫做arrangedSubviews，那么他和subviews有什么不同。我们来看看：
arrangedSubviews的array包含subviews，arrangedSubviews的顺序代表在stackview的顺序，而subviews中的顺序代表添加前后的顺序。
当你把view添加到arrangedSubviews中，就自动会添加到subviews中，添加在arrangedSubviews，它会自动帮你管理约束。你可能会问什么时候用哪一个，可能只有一种情况，就是为stack view添加backgroundview的时候用subviews。当你在arrangedSubviews中remove某一个view，那个view并没用真正remove，还要调用这个view的removeFromSuperview()

Size class based configuration

选择最顶层的stack view，把他们的间隔改成10：

Paste_Image.png

Paste_Image.png

Animation

Paste_Image.png

改进：

Paste_Image.png

Paste_Image.png