[iOS] Storyboard (2) --入门：约束篇
Storyboard 系列文章
[iOS] Storyboard (1) -- 入门：API 篇
[iOS] Storyboard (2) --入门：约束篇
[iOS] Storyboard (3) -- 使用：常用Tips
[iOS] Storyboard (4) -- 实践：问题总结
[iOS] Storyboard (4) -- 实践：UIScrollView
[iOS] Storyboard (4) -- 实践：UICollectionView
一个完整的 Storyboard 大概是这个样子：
主要分为三个红框区域和三个篮框工具条：
- 控件列表及层级关系
- UI 效果
- 属性设置、Frame布局约束等
- 视图模式切换
- Autolayout 布局约束
- 设备选择
这里的第一部分和第二部分很简单，第一部分是每个控制器内所包含的视图层级关系，多个控制器会依次并列显示在这里；第二部分是我们主要的工作区域，添加控件，也是最终的 UI效果预览区；
第三部分：属性设置区
总共有六个选项，从左到右依次为：
Show the File Inspector（文件检查器）、
Show the Quick help Inspector（快速帮助检查器）、
Show the Identity Inspector（标识检查器）、
Show the Attributes Inspector（属性检察器）、
Show the Size Inspector（尺寸检查器）以及
Show the Connections Inspector（连接关系检查器）；
在左侧控件列表选中的控件不同时，各个选项下的内容也不尽相同，可以都点看看一些大致有哪些东西；其中，最常用的是第三个到第五个：
Show the Identity Inspector（标识检查器）
前面说了，这里的内容，在选择不同的控件时，显示的内容略有区别，下面是选中 UIViewController 时的内容：
这里经常用到的是下面几个:
Custom Class
Custom Class 下的 Class 是关联我们新建的对应控件的子类的（即 .h/.m）；
** Identity**
Identity 下的 Storyboard ID，在我们使用 Storyboard 时会经常使用到这个，一般设置为和类名一致即可！
User Defined Runtime Attributes
这里使用 KVC 的特性, 设置类的 key-path 属性, 在运行时通过 key-path 来设置对应控件的属性, 在属性面板没有找到设置的属性, 都可以在这里进行添加,这里举一个🌰: 设置视图圆角
一种方式是通过 layer 的属性进行设置, 如果是代码的话,会是这样:
view.layer.cornerRadius = 6;
view.layer.borderWidth = 1;
而在这里可以这样添加:
需要注意的是, 在设置边框颜色时,因为这里只能选择 UIColor, 而实际需要的是 CGColor, 解决方法就是, 给 layer 写个扩展, 添加一个自定义属性, 然后在这里设置这个属性, 即: bColor, 通过这个属性转换一下即可; 这里的扩展大概是这样:
// CALayer+LQLayer.h
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface CALayer (LQLayer)
@property (nonatomic, weak) UIColor *bColor;
@end
NS_ASSUME_NONNULL_END
// CALayer+LQLayer.m
#import "CALayer+LQLayer.h"
@implementation CALayer (LQLayer)
@dynamic bColor;
-(void)setBColor:(UIColor *)bColor {
self.borderColor = bColor.CGColor;
}
@end
Show the Attributes Inspector（属性检察器）
这里是我们设置控件的相应属性的地方，根据选择的控件不同，内容差别比较大，下面是选中 UIView 时的内容：
可以不同的控件都选中看一下，每种控件的大部分属性都可以在这里进行设置，和使用代码时的设置是一样的；
Show the Size Inspector（尺寸检查器）
这里主要是现实各个控件的坐标及约束信息的，修改控件坐标、约束，都可以在这里进行操作，这里也是我们经常使用的；下面是选中 UIView 的时候的内容：
View 下主要是坐标信息，直接修改 x/y/width/height 的值，即可；
Constraints 是约束信息，给控件添加约束后，这里会显示所有的约束，如果我们想修改某个约束，也是在这里进行；
当我们想修改某条约束，直接点击约束后面的 Edit，或者直接双击该约束，会跳到约束的编辑页：
控件的约束，大致是按下面的公式进行计算：
First Item = Multiplier × Second Item + Constant
First Item：需要添加约束的视图
Relation：关系，Equal（=）、Less Than or Equal to（<=）、Greater Than or Equal to（>=）
Second Item：相对某个视图的约束，可以选择参考的是哪个视图和该视图的哪个属性
Constant：常量
Priority：优先级，一般不做修改
Multiplier：倍数
可以看下下面这个示例，约束是 绿色的宽是红色宽的2倍加10 ：
即：GreenView.width = 2 × RedView.width + 10
第四部分：视图面板
这里有四个按钮：控件库、Storyboard 面板、Storyboard & Code 双面板、XML面板；
主要用到的是前三个，在需要将 Storyboard 中的控件连线到Code 中时，需要切换为 Storyboard & Code 双面板（第三个）；
这里功能比较简单，不做过多介绍；
第五部分：约束
这部分主要是我们为各个控件添加约束的，五个按钮从左到右依次是：Update Frames、Embed In、Align、Add New Constrains、Resolve Auto Layout Issues
Update Frames：更新约束
经常使用
在修改了某个控件的约束后，如果视图没有立即变化，可在修改结束后，点击这个按钮，进行更新；
PS：需要注意，该按钮大部分时间下是灰色不可点击的，只有在约束有更新，并切选中的视图是其父视图的时候，才会变为可点击的黑色；
Embed In：嵌入
常使用
可以看到我们可以将选中的视图，嵌入到某些视图/视图控制器中；
Align：对齐
主要是需要将多个视图对齐时使用
屏幕快照 2019-01-16 下午2.48.21.png
Leading Edges：左对齐
Trailing Edges：右对齐
Top Edges：顶部对齐
Bottom Edges：底部对齐
Horizontal Centers：垂直居中对齐
Vertrical Centers：水平居中对齐
Baselines：基线对齐
Horizontally in container：和父视图的垂直中心线对齐
Verically in Container ：和父视图的水平中心线对齐
除了最后两个，前面的需要在选中多个视图时，才是可选的；
选中多个视图：按住Command键后即可多选
Add New Constrains：新加约束
主要是为单个控件添加约束的面板：
上下总共有三部分，第一部分是设置距离临近控件的间隙，设置后红色的虚线会变为红色的实线，也可以点击实线/虚线进行取消/添加约束；
这里有个复选框：Constrain to margins，勾选后，会在左右两边各有8pt 的间隙，在我们设置全屏的时候，如果不取消勾选，是无法全屏的，一般情况下，我们直接取消勾选即可；
第二部分，设置控件固定的宽高；
第三部分，看名称也能猜到，等宽、等高、等比；
Resolve Auto Layout Issues：解决布局错误
这里主要分为两部分：上半部分：Selected Views，只会作用在所选择的控件上；下半部分：All Views in View Controller，会作用在所有的视图上；每部分的功能都一样，只不过作用的范围不同，使用的时候需要注意这个；
Update Constraint Constants ：更新约束，一般不使用这个更新，而是使用 Upadte Frames
Add Missing Constraints ：如果我们添加的约束不足，系统推荐补全约束；一般不使用这个推荐，根据提示的不足，手动添加缺失的约束；使用这个的时候会有莫名其妙的问题
Reset to Suggested Constraints：重置为系统推荐的约束，同上面那个，一般不使用
Clear Constraints：清除约束。使用的时候需要注意是清除所有的还是某个控件的
这里常用的也就是最后一个 Clear Constraints，在我们添加约束遇到无法解决的问题，或者修改的太多，直接清除，然后重新添加；
第六部分：设备
点击后，可以选择不同的设备以及横竖屏，并可以调节画布的大小
这里需要注意的是 Vary for Traits（不同特征）按钮，如果需要在不同的设备或者不同的设备方向有不同的 UI 布局，可以使用这个功能；
例如, 我们先选择竖屏, 对控件进行了布局约束, 然后再选择横屏时, 这时候的UI布局可能就不是我们希望的, 也就是说, 在横竖屏状态下, UI 的布局是不一样的;
我们可以这样操作, 在选择横屏后, 点击 Vary for Traits , 选择 width & height, 然后进行横屏的布局;
点击后会弹出一个选择框：
选择特征的依据，Width、Height 或者 两者都选，然后点击空白区域，弹框消失；这时候，面板会变为这样：
点击手机模型图标，会弹出所有支持的设备，可以选择需要的设备，然后进行控件/约束的添加。
注意, 在未完成布局前, 不要点击 Done Varying, 横屏状态下的所有控件布局结束后, 再点击 Done Varying; 然后, 运行模拟器, 切换横竖屏, 就会看到不同的布局
完成后就是这个样子 ⤵️
横竖屏不同的UI布局
连线添加约束
除了使用上面的面板来为控件添加约束，还有一种方式是连线：
选中控件，按住 CTRL 键，点击左键，拖拽到需要参考的另一个控件上：
在弹出框中选择要添加的属性：
Horizontal Spacing：横向间距
Vertical Spacing：垂直间距
Vertical Baseline Standard Spacing：垂直基线标准间距
Top：顶部
Center Vertically：垂直中心点
First Baseline：第一基线
Bottom：底部
Leading：左侧
Center Horizontally：水平中心点
Trailing：右侧
Equal Widths：等宽
Equal Heights：等高
Aspect Ratio：等比
最后两个是操作的提醒：只按 CTRL 连一次线只能添加一个属性，
同时按住 CTRL + Shift，可以选择多个属性。
