iOS-storyboard中autolayout 自动布局的理解

最近在学习 iOS实战开发,由于 MacBook 屏幕有点小所以在使用 storyboard 设计界面的时候选择了 iPhone 4-inch,然而在4.7寸设备/虚拟机上所有视图普遍偏左错位,经了解是绝对布局的问题,今天查阅资料做了几个简单的案例,说说我对 layout 自动布局的理解,望大家补充。

在使用 layout 时主要有两种类型,一种是子视图控件和父视图控件的约束关系,另一种是子视图控件之间的约束关系。
可设置的约束关系有如下几种:

  • Width: 对视图宽度的约束
  • Height: 对视图高度的约束
  • Aspect Ratio: 对视图的宽高比进行约束
  • Leading Space to Container Margin: 对视图左边距与其他试图进行约束
  • Trailing Space to Container Margin: 对视图右边距与其他试图进行约束
  • Vertical Spacing to Top Layout Guide: 对视图上边距与其他视图进行约束
  • Vertical Spacing to Bottom Layout Guide: 对视图下边距与其他视图进行约束
  • Center Horizontally in Container: 对视图竖直中心线与其他视图进行约束(水平居中)
  • Center Vertically in Container: 对视图水平中心线与其他视图进行约束(竖直居中)
  • Equal Widths: 约束两视图宽度相等
  • Equal Heights: 约束两视图高度相等

    另外在其他博主那里可能会看到「头部」「尾部」两个词,这里区分一下「顶部」和「底部」。在一篇博文中博主清楚的解释「头部」「尾部」。

    绝大多数情况下,语言文字方向都是从左到右,因此“头部”等同于“左侧”,“尾部”等同于“右侧”

    所以这里「头部」代表左侧,「尾部」代表右侧


    上图即为本文案例,上述布局在横屏竖屏/不同屏幕尺寸情况下都可以正常显示

下面开始制作过程

1.界面设计,本案例使用了三个 UIImageView,并且修改为不同的 background。(刚开始拖拽控件时可以不必追求控件精确的位置与大小)

2.首先最下面单独的这个 ImageView 左侧,右侧,底部分别让其与父视图边距为0
–点一下这个 ImageView 选中
–根据下图序号一个一个分析,
—-《1》.点一下即可增加约束。
—-《2》.此处默认是勾中的,其效果就像最开始的两张图一样,左右有20像素,为了实现全           屏效果我们取消勾选。
—-《3》.我们已经知道需要给该控件的左右下方向添加约束,所以点亮3处三个方向的                     ‘工’型按钮。
—-《4》.确认增加这三个约束。

3.我们还需要对该 ImageView的上部进行约束,这里我们采用一种方法,我们可以先让该 ImageView 的水平中心线与父视图水平中心线进行约束,然后将 ImageView 的水平中心线修改成其上边线。
–《1》.在左侧控件列表中选择第三个 ImageView,按住 control ,然后拖向 View,                   效果如图所示。
–《2》.在弹出的列表中选择 Center Vertically in Container

–《3》.在右侧工具栏 按1位置,然后点一下2(水平线中心线),然后双击3
–《4》.将First Item 修改为 Top

4.上方两个相似的做法,左侧 ImageView 的上侧,左侧贴近父视图,右侧下侧分别采用  方法3中的方法通过修改中心线的方法来完成。
5.全部修改完成后,在菜单栏更新所有视图控件

(菜单中有两个 Update Frames 第一个为更新单个控件,第二个为更新所有控件)

OK 所有步骤完成,大家可以进行虚拟机调试.因为本人是初学者,博文中难免出现一些问题,欢迎大家批评改正。

虚拟机小技巧
command + 左/右          旋转屏幕
command + L                锁屏
command + shift + h    Home 键