Auto Layout to the rescue!
接下来就看看如何使用Auto Layout来实现这个效果。
首先移除viewWillLayoutSubviews方法,选择Main.storyboard然后勾选Use Autolayout
注意:auto layout适用于整个的nib或者storyboard文件。所有在其中的views都将使用auto layout。
选择后运行app产生如下的效果
- Leading Space to Superview 与父视图的左边界线保持固定距离
- Trailing Space to Superview 与父视图的右边界线保持固定距离
- Top Space to Superview 与父视图的顶部边界线保持固定距离
- Bottom Space to Superview 与父视图的底部边界线保持固定距离
- Horizotal Spacing 两个子视图之间的水平距离保持固定长度
- Vertical Spacing 两个子视图之间的垂直距离保持固定长度
- Width Equally 两个子视图之间保持相等的宽度
- Height Equally 两个子视图之间保持相等的高度
选择⌘ 按键,然后选择上面的两个view视图。选择Xcode’s Editor菜单,下面的PinWidths Equally
选择两个view,然后选择EditorPinHorizontal Spacing
For the view on the left, choose from the EditorPin menu:
- Top Space to Superview
- Leading Space to Superview
For the view on the right, choose:
- Top Space to Superview
- Trailing Space to Superview
And for the big view at the bottom:
- Leading Space to Superview
- Trailing Space to Superview
- Bottom Space to Superview
最后的效果图如下:
到目前位置,你的T-bars还是橘色而不是蓝色的,证明约束还是不对的。需要添加更多的约束来实现这个效果。
选择⌘选择三个views然后选择PinHeights Equally,然后选择top-left corner和bottom view然后选择EditorPinVertical Spacing。就ok了
实际中,因为创建的view比较宽,然后报的高度有建议高度,这个只要在size属性中修改为建议的高度或者宽度等就可以了。然后就是这个view最好居中屏幕显示。
你可以在document outline的constrains下面看到所有的constrains。选择任何一个可以高亮。任何一个constraint都有他自己的属性可以用来设置和修改。