iOS 自动布局 Auto Layout 入门 03 进一步学习使用约束

这一节，我们来仔细看看约束是怎么工作的。

转载请注明出处：/article/9358067.html

拖一个button到view的底部中间位置：



通过Editor菜单为Button添加水平居中的约束-Align\Horizontal Center in Container.



添加水平居中约束后，可以看到一条橙色的线，这代表约束出问题了，我们没有为按钮设置Y轴的约束。

使用Editor\Pin为按钮添加一个按钮于底部之间的约束：



通过Preview assistant editor，我们可以查看不同屏幕、水平垂直方向的布局预览情况，旋转设备为横向时，预览图如下：



接下来，我们添加另一个按钮，在添加之前，我们将第一个按钮背景色修改为橙色，便于我们查看。



为两个item之间添加约束除了通过editor菜单，还可以使用Ctrl+拖动的方式。此时，我们按住Ctrl，从第二个按钮拖向第一个按钮然后松开鼠标，在弹出的菜单中选择Horizontal Spacing，这样，两个按钮之间就有了一个水平间距为8的约束。





新添加的约束如下图，可以是橙色的，这就意味着，我们缺失了必要的约束。



对于简单的布局很容易猜到少了什么约束，但是对于复杂的布局怎么办呢？Xcode提供了一个很好地方法来查看缺少了什么约束，如下图所示，Document Outline的右上角有一个红色小箭头，点击这个箭头，将切换到Auto Layout issue界面：





可以看到，问题是缺少了Y轴约束。我们为第二个按钮添加到bottom的约束-Bottom Space to Bottom Layout:



到这一步，两个按钮之间的约束就设定好了，我们可以试试修改第一个按钮的内容，让其变大，第二个按钮会自动根据第一个按钮的大小调整自己的位置，保证自己始终在第一个按钮的左侧偏8个像素的位置。



接下来，我们添加第三个按钮，让其在第一个按钮的上方：



添加第三个按钮到第一个按钮的垂直约束



修改垂直间距为40



预览效果如下：



第三个按钮并没有在我们所期望的位置，它跑到屏幕的边缘去了，这是由于我们缺少X轴的约束。

将第三个按钮拖动到于第一个按钮垂直对齐的位置：



Ctrl+drag，为第三个按钮和第一个按钮添加左侧对齐的约束，再将第三个按钮向上拖动，直到橙色方框消失：



至此我们就设置好了三个按钮之间的约束，预览图如下，三个按钮按我们所期望的方式排列在view上：