4、UI开发之核心基础——约束（实用）

概述

本节将会介绍最经常使用的几种约束，基本能够知足90%以上的UI布局要求。

先附上一份其余优秀博客https://blog.csdn.net/companion_1314/article/details/51823243，该篇博文使用GIF演示了常见约束，很好的给新手一个直观印象，我本人也从其中受益良多，贴在此处以供参考。

Xcode提供的约束总共能够分为如下六种：

1. 距离约束

2. 边长约束

3. 比例约束

4. 对齐约束

5. 容器约束

6. 伸缩/拉伸等级约束

 

接下来咱们将对这5种约束进行一一描述。

 

距离约束

任意一个UI控件都是矩形布局，咱们将其4边称为“边界”。这个手机屏幕的4边也是“边界”。

则距离约束指的是，对控件及其四周最近的“边界”间的约束。

 

例1:上边距0，下边距300，左边距0，右边距0

 

例2:在空的storyboard上拖入label“神鸟归位”，并设置约束：上边距0，下边距300，左边距0，右边距0。

而后再拖入label“菜鸟站边”，并设置约束：上边距0，下边距50， 左边距0， 右边距0。

 

边长约束

边长约束指的是，对控件长宽的约束。

不一样于距离约束，边长约束只能肯定控件的大小，不能肯定其位置，因此必须搭配其余约束才能肯定控件。

 

例1:左边距0，上边距0，长200，高200

 

例2:首先按例1的方式约束label“神鸟归位”，而后拖入新的label“菜鸟看齐”。

首先设置“菜鸟看齐”的距离约束：左边距0，下边距0。

 

而后先选中“菜鸟看齐”，再按住"shift"并选中“神鸟归位”，而后设置“等宽”“等高”约束。

 

 

 PS：

细心的同窗可能会注意到，不知从何时开始，这里多出来了一个小黄点

点进去看一下，咱们会发现两个关键字：overlapping（覆盖）和clipping（截断）。

还记得上一节中“举个栗子”那三张图吗？

这里使用的约束方式（尤为是例1）正式控件默认使用的约束方式。

固然，这些警告并不妨碍编译，因此咱们暂且忽略它们。

 

比例约束

例：首先设置距离约束：上/左/右边距0，并开启比例约束。

 

默认的比例约束并不是咱们想要的（此处为121:36），因而咱们将其设置为2:1，并按回车键。

 

对齐约束

例1:首先设置label“神鸟归位”左边距50，上边距50，长200，高200

 

而后拖入label“菜鸟站边”，设置上边距50，长200，高200。 

 

这时咱们会发现左上角出现了一个错误提示，label“菜鸟站边”周边出现了红色框框，这时由于label“菜鸟站边”的约束不够明确（左边位置没法肯定）。 

 

按住“shift”键依次选中label“菜鸟站边”和label“神鸟归位”，而后选择起始对齐。

 

这样咱们看到2个labe的左边框都对齐了。

其余三边的对齐方式与此雷同，此处再也不赘述。

 

容器约束

例1:以整个屏幕为容器，而后使用水平中心约束和垂直中心约束

 

例2：拖入1个View做为容器

 

给容器View添加约束：左/下/右边距0，高300

 

拖入1个label至View容器中，这时能够在左边的结构图中看到label“菜鸟先飞”是View的子控件。

为label“菜鸟先飞”设置垂直中心约束。

 

当前约束不足以肯定label“菜鸟先飞”的位置，因而咱们再为其添加左边距10的约束。

 

 

 

 

伸缩/拉伸等级约束

假设咱们想实现以下的效果。

 

因而咱们设置约束以下：

label“神鸟”：左/上/右边距0，高40

label“神鸟不语，霸气缕缕”：左/上/右边距0，高40

（注：先将两个label都放到面板上，且并列放置，不然label“神鸟”会直接约束到屏幕左边界）

貌似应该很完美，然鹅。。。咱们看到的是

 

或者是

 

到底怎么回事呢？

每一个控件都有1个“收缩等级”（hugging priority）。

当2个控件共同占有一块区域且2个控件在水平（或垂直）方向有多余空间（好比上述例子），高“收缩等级”控件不动，低“收缩等级”控件拉伸填满区域。

当2个控件“收缩等级”相同时，就会出现以上报错。

“收缩等级”分水平方向和垂直方向，以上例子报错的是水平方向“收缩等级”问题：2个label的“收缩等级”都是251。

咱们不妨把左边的label的收缩等级改成“252”。

 

 

 

相应的还有一个拉伸等级（Compression Resistance Priority）：

当2个控件共同占有一块区域且2个控件在水平（或垂直）方向空间不足（好比上述例子），高“拉伸等级”的控件不动，低“拉伸等级”的控件压缩自身内容。

话很少说，对比看下面2幅图，你就明白“拉伸等级”是什么了。

 

 

小技巧

当咱们在设置约束的时候，控件的初始位置有时候会很关键。

咱们分别为以上2幅图中的“菜鸟居下”添加一样的约束：水平中心约束+上边距20

结果却不同：

 

咱们看到，2种情形对“上边距”的理解是不一样的：前者指的是和面板上边界的距离，后者指的是和“神鸟在上”下边界的距离。

因此咱们最好将所要约束的控件放在咱们视觉上合适的位置，以便Xcode进行自动识别。

 

咱们的故事讲到如今，想必你们对UI布局的大部分情节已经了解到七七八八了，以上内容足以让咱们应对90%以上的UI布局问题。下一节，咱们将介绍其中的“曲折原因”，给你们一个完整的故事。

 

上一节           回目录          下一节