先介绍一下几种AutoLayout自动布局所经常使用的布局约束类型
- width表示约束ui控件的固定宽度
- height表示约束ui控件的固定高度
- Leading Space to Superview 与父视图的左边界线保持固定距离
- Trailing Space to Superview 与父视图的右边界线保持固定距离
- Top Space to Superview 与父视图的顶部边界线保持固定距离
- Bottom Space to Superview 与父视图的底部边界线保持固定距离
- Horizotal Spacing 两个子视图之间的水平距离保持固定长度
- Vertical Spacing 两个子视图之间的垂直距离保持固定长度
- Width Equally 两个子视图之间保持相等的宽度
- Height Equally 两个子视图之间保持相等的高度
新建一个single view application的模板项目,向Main.stroryboard拖入两个button按钮,分别设置background的颜色为紫色和绿色,可以看到在画布上显示正确的两个button在不同尺寸屏幕的设备上的运行效果都有所偏差
实际设备上的运行效果:
iPhone 4s上的运行效果
因为我想要这两个button一直是保持这样的尺寸:两个button宽和高要相等,同时两个button离屏幕的两边都保持固定距离,且两个button之间的距离一直保持不变,所以添加以下约束:
- 分别选择两个button并点击editor->pin->width,editor->pin->height设置其固定宽度和高度
- 分别选择两个button并点击editor->pin->Leading Space to Superview,editor->pin->Trailing Space to Superview固定其和父视图之间的边界距离
- 按住shift分别点击两个button,并点击editor->pin->Horizontal Spacing设置两个button之间保持固定的长度距离
- 按住shift分别点击两个button,并点击editor->pin->Width Equally设置两个button拥有相等的宽度
增加完上面的约束后就可以看到程序运行的显示结果不会显得那么难看了
并且就算旋转屏幕也能得到比较好的结果: