iOS 一一 AutoLayout之XIB实现

随着iOS设备屏幕尺寸的增多，当下无论是纯代码开发还是Xib/StoryBoard开发，自动布局已经是必备的开发技能了。

我使用自动布局也有一段时间了，遇到了不少问题，在解决的过程中也收获了很多知识。尤其是在使用熟练之后开发速度上的提升非常明显。这里把AutoLayout的基本使用和个人使用心得汇总一下，希望能帮助到大家！

适配的概念

适配主要分两种

• 系统适配

  系统适配主要指适配不同版本系统，如 iOS 6（拟物化） 到 iOS 7（扁平化）两个系统系统的适配，我们需要写不同的代码来保证项目在不同系统上的美观与可用。

• 屏幕适配

  屏幕适配主要是针对不同尺寸的屏幕进行适配，同一个页面再不同尺寸屏幕上的布局，如Safari在手机横竖屏下的布局等等。

常见设备的分辨率：

Snip20170313_1.png

屏幕适配发展史

• iPhone 4s 以前的时代

iPhone 4s 和之前设备的屏幕都是3.5英寸，可以说没有屏幕适配，所有的坐标点就是 320*480.
适配完全使用frame、bounds、center进行计算，代码基本写死。

// 直接写死UIImageView *iv = [UIImageView new];iv.frame = CGRectMake(50, 300, 200, 80);[self.view addSubview:iv];

• iPad、iPhone横屏时代

  • 出现 AutoResizing 技术

    • 优点：

      • 解决了父子控件相对位置的问题
      • 子控件可根据父控件的行为发生相对应的变化
      • 让横竖屏的适配变得简单
      • 无法处理兄弟控件相对位置的问题

    • 使用前提：

      • 关闭AutoLayout

    • 局限性：

      • 只能解决父子控件的相对关系，
      • 无法解决兄弟控件之间的相对关系

  • AutoResizing在Xib中的使用介绍

    在Xib中主要有6根线来设置AutoResizing

Snip20170313_2.png

外部四根线

外部四根线分别表示上、下、左、右四个方向，子控件相对于父控件的距离。实线：表示固定位置虚线：表示非固定位置**内部两根线**内部两根线分别表示水平和竖直方向，子控件是否根据父控件等比例缩放。实线：该方向上跟随父控件等比缩放虚线：该方向上不跟随父控件等比缩放- **AutoResizing在代码中的使用介绍**通常代码中子控件在添加到父控件之前设置AutoResizing对应的属性值，其代码属性值和Xib中相反，代码中设置可变部分，Xib中是选中部分为固定不变的。

    // 上下左右四个方向参数（与Xib中设置相反）    UIViewAutoresizingNone                 = 0,     UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,    UIViewAutoresizingFlexibleBottomMargin = 1 << 5    // 宽高是否根据父控件等比缩放    UIViewAutoresizingFlexibleHeight       = 1 << 4,    UIViewAutoresizingFlexibleWidth        = 1 << 1,

比如要设置一个UIView与其父控件关系为右下角对齐
示例代码如下：

XYBannerView *banner = [XYBannerView bannerView];banner.frame = CGRectMake(80, 20, 200, 90);banner.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;[self.view addSubview:banner];

• iOS 6之后

  • 出现了AutoLayout技术

    AutoLayout弥补了AutoResizing的局限性，不仅可以解决父子控件之间的相对关系，还可以描述兄弟控件之间的相对关系，还可以描述自身关系等，功能非常强大。

    AutoLayout的两个核心概念

  • 参照

  • 约束

AutoLayout介绍和使用

Xib中常用的面板

Xib 主要有以下三个面板

• Align ： 对齐方式

Snip20170313_4.png

• Add New Constraint： 添加新的约束

Snip20170313_5.png

• Resolve Auto Layout Issues ： 修复自动布局问题
  
  
  

  Snip20170313_7.png

AutoLayout的使用原则

AutoLayout是为了确定View的frame（确定View的Point和Size）。

• 至少添加四个约束，宽高和位置来确定frame
• 避免约束冲突：
  1.如同一个View的宽设置两次，一个100，一个200，导致无法确定，形成冲突，冲突属于错误，须解决：
  
  
  

  Snip20170314_1.png
  
  2.如约束不够，无法确定View的frame时候也会报错：

• AutoLayout的警告：警告一般是Xib中添加好了约束，但是对应View没有移动到对应位置导致。这种情况程序运行起来之后会是正确约束的样子，而不是Xib中的样子。
  • 警告解决办法：
    1.选中View，update frame 或使用快捷键‘command’ + ‘option’ + ‘=’
    2.如图：
    
    

    Snip20170314_2.png

• 约束的修改：
  约束的修改有很多种方式，下面列举一种我常用的方式!
  
  
  

  Snip20170314_4.png

注意：上面说的Add New Constaints面板只能添加新的约束，修改不能在那里。

AutoLayout案例练习

AutoLayout这种灵活的实用技术最直接的学习办法就是实战练习，下面几个小案例来展示一下。

练习1

1.在控制器底部添加两个View，一个红色，一个蓝色
2.两个View的高度、宽度永远相等
3.距离父控件左边、右边、两者中间和距底边的距离相等
示意如图：

Snip20170314_5.png

根据：添加四个约束确定frame，避免冲突和警告的原则。我们按照要求添加约束
1.两者等高等宽：使用Add New Constraints面板

Snip20170314_6.png

或者可以直接拖线：选中红色 按住‘control’键拖线到蓝色

Snip20170314_8.png

2.设置红色View约束
选中红色View打开Add New Contraint面板设置对应约束

Snip20170314_9.png

3.设置蓝色View约束
选中红色View打开Add New Contraint面板设置对应约束，其中蓝色View的约束同上图，只需要设置蓝色的右边距同红色相等 为 20 即可（其他约束在设置红色的时候已经有了）

4.设置红蓝色View等高/底
设置等高/底 和上面设置两者等高等宽步骤一致，选择 Top/Bottom即可。

效果：

练习1.gif

练习2

同样两个View 一蓝一红
1.两个View的高度相等
2.红色View和蓝色View的右边对齐
3.蓝色View距离父控件的左右相等，且距离红色View的间距相等
4.红色View的左边和蓝色View中点对齐

Snip20170314_10.png

1.设置蓝色View约束
蓝色View约束：距离父控件边距和红色View的边距

Snip20170314_11.png

2.设置红色View和蓝色View等高 和边距

1.设置两者等高，直接拖线即可
2.设置红色view的边距直：距右 20 和 距底边 20。（参考上图）

3.设置红色View与蓝色View的中心对齐

红色View和蓝色View的中心对齐可转化为 红色View长度为蓝色一半。可先设置等宽再修改等宽约束。

Snip20170314_14.png

效果图：

练习2.gif

练习3

四个相同的View均分占据屏幕的四个角，如图

Snip20170314_15.png

1.四个view是等宽等高
直接分别设置四个的等宽等高，拖线就很方便

2.四个view互相之间的间距为零
使用Add New Contraint面板分别添加每个View的四边距 为0即可

最终效果如图：

练习3.gif

AutoLayout 中的UILabel

UILabel相对比较特殊一点，需要单独说一下。

在不使用 AutoLayout的时候 UILabel 内部的文字默认是居中显示的，如果设置的Size较大，而内部文字较少就会造成上下留白，从而造成资源的浪费。

在实际的使过程中，需求往往是UILabel正好包裹住内部的文字。

有了AutoLayout之后的UILabel在添加约束的时候可以不用添加高度，系统会自动计算内部文字高度来自适应UILabel的高度！

Snip20170314_18.png

实际应用中经常需要设置UILabel的根据文字多少来自动适应高度，并且UILabel.width <= 某个值.
这种情况需要给UILabel添加宽度约束，比例关系设置为Less Than Or Equal

Snip20170314_19.png

练习4

1.设置两个View，两者间距为0，一红一绿，
2.红色View内部有一个UILabel，
3.根据Label内部的文字自适应高度，
4.点击屏幕修改Labe内部文字，让其父控件的frame也自动适应

Snip20170314_20.png

1.设置两个View一红一绿，分别设置边距等约束
2.红色View中添加UILabel，设置Label的文字和约束，设置Label高度自适应

最终效果图：

练习4.gif

这只是几个简单的小练习，若想使用熟练AutoLayout还需要认真练习

AutoLayout在代码中的使用

以上讲了AutoLayout的可视化使用，但是项目中有很多页面是动态生成的，需要我们用代码实现，所以下面讲讲AutoLayout的代码实现

代码实现的特点：繁琐、技术含量低

Xib中的每一条拖线对应代码中一个 NSLayoutConstraint 对象，从NSLayoutConstraint头文件中可以查看其对象的创建方法：

    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view1     attribute:attr1 relatedBy:NSLayoutRelation toItem:view2 attribute:attr2     multiplier:multiplier constant:c];    参数含义：    view1：                  约束的第1个View    attr1：                  第1个View的属性    NSLayoutRelation：       两个View的属性之间的关系    view2：                  约束的第2个View    attr2：                  第2个View的属性    multiplier：             倍数关系    c：                      需要增加的常量

上面的方法可以整合成一个自动布局的核心计算公式

obj1.property = (obj2.property) * multiplier + c

代码添加AutoLayout的步骤

• 利用NSLayoutConstraint类创建具体的约束对象
• 添加约束到对应的View上

- (void)addConstraint:(NSLayoutConstraint *)constraint; - (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints;

代码添加AutoLayout的注意点

• 需要先禁止AutoResizing功能，设置如下

view.translatesAutoresizingMaskIntoConstraints = NO;

• 添加约束之前，确保所有View已经添加到父控件上
• 设置AutoLayout之后无需再设置frame

代码添加约束的规则

1. 对于兄弟控件之间的约束要添加到共同的父控件上
2. 对于不同层级的'兄弟'控件的约束要添加到最近的‘父控件’上
3. 两个父子控件之间的约束要添加到父控件上

下面代码实现一个如图自动布局

Snip20170314_21.png

    UIView * view = [UIView new];    view.translatesAutoresizingMaskIntoConstraints = NO;    view.backgroundColor  = [UIColor redColor];//    view.frame = CGRectMake(10, 10, 100, 100);   ---> 不再设置frame    [self.view addSubview:view];    //设置底边约束    NSLayoutConstraint * bottomConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10];    //设置右边约束    NSLayoutConstraint * rightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];    //设置width约束    NSLayoutConstraint * widthConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];    //设置height约束    NSLayoutConstraint * heightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];    [self.view addConstraint:bottomConstraint]; ----> 与父控件相关的约束添加到父控件上    [self.view addConstraint:rightConstraint];    [view addConstraint:widthConstraint];    [view addConstraint:heightConstraint];

代码实现AutoLayout相对比较繁琐，但是如果懂得了原理还是能很好实现出来的。