Getting started
这篇的内容是接着上一篇,上篇中得4个问题,我们还没解决完。接下来就解决上次的没有解决的问题
Converting the sections
我们将把SpotInfoViewController中的section转换为stack view
Rating section
打开Main.storyboard Spot Info View Controller然后嵌入stack view:
给stack view添加约束:
设置他们的间距为8:
你可能会看到红色星星那个Label被拉伸了:
为了修复它,你可以改变stack view的属性,使它适应新的布局,改变它的Alignment,改为Top->Fill:
好了:
Your first vertical stack view
选择这两个label然后嵌入stack view:
给stack view加上约束:
看到下面的label的width没有随着stack view的width的变化
Alignment property
最后我们选择Fill
Convert the "what to see" section
选择这两个label然后嵌入stack view
为新添加的stack view添加下面的约束:
设置它的Alignment为Fill
Alignment
Horizontal axis:
Vertical axis:
FirstBaseline and LastBaseline:
Convert the weather section
为这3个添加这样结构的stack view:
现在WEATHER的高度和Hide的高度一样,把包含这两个控件的stack view的Alignment属性设置为buttom:
Change the weather section – for real
我们不用上面的方法,选择这两个label,添加stack view:
为新加的stack view添加约束:
并把Alignment属性改为Fill
为WEATHER嵌入一个stack view,为什么这样做,是因为我们想它的大小不是那么宽,而是由WEATHER内容决定,并改Alignment属性为Leading:
为Hide button添加,水平和baseline的约束,就OK了:
Top-level stack view
选择这5个stack view,并嵌入新的stack view:
设置新的stack view的Alignment为Fill和间隔为20,设置Hide button的约束:
Repositioning views
现在改变他们的位置,直接移动stack view:
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:
Animation
改进: