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.pngVertical axis:
Paste_Image.pngFirstBaseline and LastBaseline:
Paste_Image.pngConvert the weather section
为这3个添加这样结构的stack view:
Paste_Image.png
Paste_Image.png
现在WEATHER的高度和Hide的高度一样,把包含这两个控件的stack view的Alignment属性设置为buttom:
Paste_Image.pngChange 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.pngTop-level stack view
选择这5个stack view,并嵌入新的stack view:
Paste_Image.png Paste_Image.png设置新的stack view的Alignment为Fill和间隔为20,设置Hide button的约束:
Paste_Image.pngRepositioning views
现在改变他们的位置,直接移动stack view:
Paste_Image.pngArranged 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.pngAnimation
Paste_Image.png改进:
Paste_Image.png Paste_Image.png
网友评论