iOS - AutoLayout

2016-08-10 640

前言

    NS_CLASS_AVAILABLE_IOS(6_0) @interface NSLayoutConstraint : NSObject
    @available(iOS 6.0, *)    public class NSLayoutConstraint : NSObject

1）Autolayout
- 在 Autolayout 之前，有 Autoresizing 可以作屏幕适配，但局限性较大，有些任务根本无法完成（只能解决子控件跟父控件的相对关系问题，不能解决兄弟控件的相对关系问题）。相比之下，Autolayout 的功能比 Autoresizing 强大很多。
- Auto Layout 是苹果在 iOS 6 (Xcode 4) 中新引入的布局方式，旨在解决 3.5 寸和 4 寸屏幕的适配问题，由于 Xcode 4 的不给力，当时并没有得到很大推广，自 iOS 7（Xcode 5）开始，Auto Layout 的开发效率得到很大的提升。屏幕适配工作在 iPhone 6 及 plus 发布以后变得更加重要，苹果官方也推荐开发者尽量使用 Autolayout 来布局 UI 界面，Autolayout 能很轻松地解决屏幕适配的问题。
- Autolayout 的 2 个核心概念：
  - 参照
  - 约束
2）约束
- Auto Layout 的本质是依靠某几项约束条件来达到对某一个元素的定位。我们可以在某个地方只使用一个约束，以达到一个小目的，例如防止内容遮盖、防止边界溢出等。但实践证明，如果把页面上每一个元素的位置都用 Auto Layout 进行 “严格约束” 的话，那么 Auto Layout 可以帮我们省去非常多的计算 frame 的代码。
- “严格约束” 是什么？简单来说，严格约束就是对某一个元素的绝对定位，让它在任一屏幕尺寸下都有着唯一的位置。这里的绝对定位不是定死的位置，而是对一个元素完善的约束条件。我们要在一个直角坐标系里描述一个矩形。那么只需要指定这个矩形的位置和大小。那么只要给出上图中的四个值即可：到左边界的距离，到上边界的距离，宽度，高度。这四个约束是最简单的情况。在对一个元素进行严格约束时，请直接在脑中构建这个元素，并且加上几条约束条件，如果他无法缩放和动弹，那么严格约束就是成功的！必须牢记，使用 Auto Layout 时最重要的是：对页面上每一个元素都进行严格约束，不严格的约束是万恶之源。
- 约束主要分为以下几种：
  - 相对于父 view 的约束。如：距离上边距 10，左边距 10。
  - 相对于前一个元素的约束。如：距离上一个元素 20，距离左边的元素 5 等。
  - 对齐类约束。如：跟父 view 左对齐，跟上一个元素居中对齐等。
  - 相等约束。如：跟父 view 等宽。
- 约束特点：
  - Constraint 可以跨层级
    - 层级中不能有⾃己实现 layoutsubViews 的 View；
    - 不能连接有可变边界的 View，如 ScrollView。
  - Constraint 不会替换前一个。
  - 控件知道⾃己内容⼤⼩。
- 约束添加的规则：
  - 在创建约束之后，需要将其添加到作用的 view 上，在添加时要注意目标 view 需要遵循以下规则：
    - 相对于父视图的约束，添加到父视图上；
    - 相对于另一个控件的约束，添加到其共有的父视图上；
    - 跨层级的约束，添加到其最上层的父视图上；
    - 自身的宽高等约束，添加到自身视图上。
    - 1）对于两个同层级 view 之间的约束关系，添加到它们的父 view 上。
    - 2）对于两个不同层级 view 之间的约束关系，添加到他们最近的共同父 view 上。
    - 3）对于有层次关系的两个 view 之间的约束关系，添加到层次较高的父 view 上。

1、SB／Xib 中 AutoLayout 的设置

AutoLayout 使用流程：
- 启动 AutoLayout 功能。
  - 勾选 Use Auto Layout（默认是开启的）。
- 摆好控件位置。
- 添加约束。
- 给动态的 View 添加 placeholder。
  - 自定义的 View 若要实现 AutoLayout，需要在 Show the Size Inspector 选项卡中设置 Intrinsic Size 为 Placeholder，并实现下面方法。
```
    - (CGSize)intrinsicContentSize NS_AVAILABLE_IOS(6_0);
```
- 更新 constraints 和 frame。
- 解决有问题的约束。

1.1 添加对齐约束

添加对齐约束

Leading Edges	左边缘对齐
Trailing Edges	右边缘对齐
Top Edges	上边缘对齐
Bottom Edges	下边缘对齐

Horizontal Centers	水平中心对齐
Vertical Centers	垂直中心对齐
Baselines	文本底标线对齐，大多数控件中等同于 Bottom Edges

Horizontal Center in Container	在父控件中水平居中
Vertical Center in Container	在父控件中垂直居中

Update Frames	根据约束条件更新 Frame

None	不更新
Items of New Constraints	新添加约束的元素
All Frames in Container	容器内的所有 Frame

1.2 添加相对约束

添加相邻、自身、相等约束

Spacing to nearest neighbor	与相邻的控件间的距离
Constrain to margins	边缘约束（用于防边缘触摸，选中自动缩进 20）

Width	控件的宽度
Height	控件的高度

Equal Widths	相等的宽度
Equal Heights	相等的高度
Aspect Ratio	相等的长宽比

Align	对齐方式

Update Frames	根据约束条件更新 Frame

Use Standard Value	使用标准值
Use Current Canvas Value	使用当前值
View	视图控件
Top Layout Guide	状态栏下边缘处

Use Standard Value	使用标准值
Use Current Canvas Value	使用当前值
Buttom Layout Guide	屏幕下边缘处
View	视图控件

1.3 处理约束

更新、添加、清除约束

Selected Views	选中的控件
-- Update Frames	更新 Frame
-- Update Constraints	更新约束
-- Add Missing Constraints	添加缺失的约束
-- Reset to Suggested Constraints	添加建议的（自动）约束
-- Clear Constraints	清除约束

All Views in View Controller	所有控件
-- Update Frames	更新 Frame
-- Update Constraints	更新约束
-- Add Missing Constraints	添加缺失的约束
-- Reset to Suggested Constraints	添加建议的（自动）约束
-- Clear Constraints	清除约束

1.4 修改约束

更改添加的约束

方式 1:

选中添加的约束

修改约束的设置

AutoLayout4

First Item	第一个控件的约束值，要设置的控件
Relation	第一个控件与第二个控件约束值之间的关系
-- Second Item	第二个控件的约束值，参照的控件

-- Constraint	约束值增加量
-- Priority	约束优先级
-- Multiplier	约束值放大倍数

-- Placeholder
---- Remove at build time	编译时移除该约束

-- Installed	添加该约束

AutoLayout23

Leading Margin	左边距
Center X Within Margins	父控件水平中心
Trailing Margin	右边距

Relative to margin	相对于边缘
respect language direction	遵循本地语言方向

Reverse First And Second Item	调换 First 和 Second 两个控件的设置位置

AutoLayout24

Less Than or Equal	小于等于
Equal	等于
Greater Than or Equal	大于等于

AutoLayout25

Required(1000)	默认优先级（高优先级）
High(750)	中优先级
Low(250)	低优先级

AutoLayout26

Reverse Multiplier	反转倍数（即 0.5 变为 2，4:3 变为 3:4）
Convert to Decimal	转换为十进制

Presets	预设值（也可以不使用预设值，自己设置需要的倍数，如 0.5）
-- 1	1 倍
-- 4:3	4:3 倍
-- 16:9	16:9 倍

方式 2:
- 选中设置约束的控件
- 修改约束的设置

1.5 约束设置警告和错误

警告：
- 控件的 frame 不匹配所添加的约束。比如约束控件的宽度为 100, 而控件现在的宽度是 110。
错误：
- 缺乏必要的约束。比如只约束了宽度和高度, 没有约束具体的位置。
- 两个约束冲突。比如 1 个约束控件的宽度为 100, 1 个约束控件的宽度为 110。

1.6 约束值设置代码

Objective-C

    // 将约束关联到代码中
    @property (weak, nonatomic) IBOutlet NSLayoutConstraint *redViewWidthConstraint;

    // 获取约束的值
    /*
        获取到的 constant 值为 CGFloat 型数值
    */
    CGFloat widthConstant = self.redViewWidthConstraint.constant;

    // 设置约束的值
    /*
        直接给 constant 赋 CGFloat 型数值
    */
    self.redViewWidthConstraint.constant = 50.0;

Swift

    // 将约束关联到代码中
    @IBOutlet weak var redViewWidthConstraint: NSLayoutConstraint!

    // 获取约束的值
    /*
        获取到的 constant 值为 CGFloat 型数值
    */
    let widthConstant = self.redViewWidthConstraint.constant

    // 设置约束的值
    /*
        直接给 constant 赋 CGFloat 型数值
    */
    self.redViewWidthConstraint.constant = 50.0

1.7 Size Classes 设置

适配不同类型的屏幕
- 在同一个文件中设置不同类型的屏幕尺寸适配。
- 选择不同尺寸的宽度和高度的组合，可以设置在不同类型屏幕上加载不同的控件或约束。
- 启动 Size Classes 功能。
  - 勾选 Use Size Classes（默认是开启的）。

2、纯代码中 AutoLayout 的设置

代码实现 Autolayout 的步骤：
- 利用 NSLayoutConstraint 类创建具体的约束对象。
- 添加约束对象到相应的 view 上。
代码实现 Autolayout 的注意点：
- 要先禁止 autoresizing 功能，设置要添加约束的控件的下面属性为 NO。
```
    redView.translatesAutoresizingMaskIntoConstraints = NO;
```
- 添加约束之前，一定要保证相关控件都已经在各自的父控件上。
```
    [self.view addSubview:redView];
```
- 不用再给 view 设置 frame。
- 如果是 View Controller，则 AutoLayout 适配写在下面方法中。
```
    - (void)updateViewConstraints NS_AVAILABLE_IOS(6_0);
```
- 如果是 View，则 AutoLayout 适配写在下面方法中。
```
    - (void)updateConstraints NS_AVAILABLE_IOS(6_0);
```

VFL 语言：

VFL 全称是 Visual Format Language，翻译过来是 “可视化格式语言”，VFL 是苹果公司为了简化 Autolayout 的编码而推出的抽象语言。
VFL 语言格式

VFL 语言示例

AutoLayout6

    // canelButton 宽 72，acceptButton 宽 50，它们之间间距 12。
    H:[cancelButton(72)]-12-[acceptButton(50)]

    // wideView 宽度大于等于 60point，该约束条件优先级为 700（优先级最大值为 1000，优先级越高的约束越先被满足）。
    H:[wideView(>=60@700)]

    // 竖直方向上，先有一个 redBox，其下方紧接一个高度等于 redBox 高度的 yellowBox。
    V:[redBox][yellowBox(==redBox)]

    // 水平方向上，Find 距离父 view 左边缘默认间隔宽度，之后是 FindNext 距离 Find 间隔默认宽度；
    // 再之后是宽度不小于 20 的 FindField，它和 FindNext 以及父 view 右边缘的间距都是默认宽度。
    // 竖线 “|” 表示 superview 的边缘。
    H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

2.1 约束设置方法

Objective-C

    // 获取当前 view 中所有的约束
    - (NSArray *)constraints  NS_AVAILABLE_IOS(6_0);

    // 将指定的约束添加到页面，相对于另一个视图的约束必须添加到其父视图上
    - (void)addConstraint:(NSLayoutConstraint *)constraint     NS_AVAILABLE_IOS(6_0);
    - (void)addConstraints:(NSArray *)constraints              NS_AVAILABLE_IOS(6_0);

    // 将指定的约束从页面中移除
    - (void)removeConstraint:(NSLayoutConstraint *)constraint  NS_AVAILABLE_IOS(6_0);
    - (void)removeConstraints:(NSArray *)constraints           NS_AVAILABLE_IOS(6_0);

    // 激活或者停用指定约束
    @property (getter=isActive) BOOL active                    NS_AVAILABLE(10_10, 8_0);

        // 激活指定约束
        + (void)activateConstraints:(NSArray *)constraints     NS_AVAILABLE(10_10, 8_0);

        // 停用指定约束
        + (void)deactivateConstraints:(NSArray *)constraints   NS_AVAILABLE(10_10, 8_0);

    // 获取现有约束

    NSArray *constraints = [self.view constraints];

    // 添加约束

    [self.view addConstraint:constraintX];
    [self.view addConstraint:constraintY];
    [redView addConstraint:constraintW];
    [redView addConstraint:constraintH];

    [self.view addConstraints:@[constraintX, constraintY, constraintW, constraintH]];

    // 激活指定约束

    constraintX.active = YES;
    constraintY.active = YES;
    constraintW.active = YES;
    constraintH.active = YES;

    [NSLayoutConstraint activateConstraints:@[constraintX, constraintY, constraintW, constraintH]];

    // 删除约束

    [self.view removeConstraint:constraintX];
    [self.view removeConstraint:constraintY];

    [self.view removeConstraints:@[constraintX, constraintY]];

    // 停用指定约束

    constraintX.active = NO;
    constraintY.active = NO;

    [NSLayoutConstraint deactivateConstraints:@[constraintX, constraintY]];

Swift

    // 获取当前 view 中所有的约束
    public var constraints: [NSLayoutConstraint] { get }   @available(iOS 6.0, *)

    // 将指定的约束添加到页面，相对于另一个视图的约束必须添加到其父视图上
    public func addConstraint(constraint: NSLayoutConstraint)       @available(iOS 6.0, *)
    public func addConstraints(constraints: [NSLayoutConstraint])   @available(iOS 6.0, *)

    // 将指定的约束从页面中移除
    public func removeConstraint(constraint: NSLayoutConstraint)       @available(iOS 6.0, *)
    public func removeConstraints(constraints: [NSLayoutConstraint])   @available(iOS 6.0, *)

    // 激活或者停用指定约束
    public var active: Bool    @available(iOS 8.0, *)

        // 激活指定约束
        public class func activateConstraints(constraints: [NSLayoutConstraint])    @available(iOS 8.0, *)

        // 停用指定约束
        public class func deactivateConstraints(constraints: [NSLayoutConstraint])  @available(iOS 8.0, *)

    // 获取现有约束

    let constraints = self.view.constraints()

    // 添加约束

    self.view.addConstraint(constraintX)
    self.view.addConstraint(constraintY)
    redView.addConstraint(constraintW)
    redView.addConstraint(constraintH)

    self.view.addConstraints([constraintX, constraintY, constraintW, constraintH])

    // 激活指定约束

    constraintX.active = true
    constraintY.active = true
    constraintW.active = true
    constraintH.active = true

    NSLayoutConstraint.activateConstraints([constraintX, constraintY, constraintW, constraintH])

    // 删除约束

    self.view.removeConstraint(constraintX)
    self.view.removeConstraint(constraintY)

    self.view.removeConstraints([constraintX, constraintY])

    // 停用指定约束

    constraintX.active = false
    constraintY.active = false

    NSLayoutConstraint.deactivateConstraints([constraintX, constraintY])

2.2 关闭 Autoresizing

Objective-C

    // 纯代码添加约束必须先关闭 Autoresizing
    /*
        不要将 AutoresizingMask 转为 Autolayout 的约束
        每个添加约束的控件都需要设置
    */
    redView.translatesAutoresizingMaskIntoConstraints = NO;

Swift

    // 纯代码添加约束必须先关闭 Autoresizing
    /*
        不要将 AutoresizingMask 转为 Autolayout 的约束
        每个添加约束的控件都需要设置
    */
    redView.translatesAutoresizingMaskIntoConstraints = false

2.3 常规语句方式添加约束

Objective-C

    + (instancetype)constraintWithItem:(id)view1 
                             attribute:(NSLayoutAttribute)attr1 
                             relatedBy:(NSLayoutRelation)relation 
                                toItem:(nullable id)view2 
                             attribute:(NSLayoutAttribute)attr2 
                            multiplier:(CGFloat)multiplier 
                              constant:(CGFloat)c;

    参数说明：
        第一个参数 view1: 要约束的控件；
        第二个参数 attr1: 约束的类型（做怎样的约束）；
        第三个参数 relation: 与参照控件之间的关系；
        第四个参数 view2: 参照的控件；
        第五个参数 attr2: 约束的类型（做怎样的约束）；
        第六个参数 multiplier: 乘数，控件 1 的指定属性是参照控件 2 指定属性的多少倍；
        第七个参数 c: 常量，控件 1 的指定属性需要加的浮点数。

    根据参数的讲解，得出计算公式如下：

        view1.attr1 [= , >= , <=] view2.attr2 * multiplier + c;

    参数详解：

        1、NSLayoutAttribute

            NSLayoutAttributeLeft = 1,             左边缘，CGRectGetMinX(view.frame)
            NSLayoutAttributeRight,                右边缘，CGRectGetMaxX(view.frame)
            NSLayoutAttributeTop,                  上边缘，CGRectGetMinY(view.frame)
            NSLayoutAttributeBottom,               下边缘，CGRectGetMinY(view.frame)
            NSLayoutAttributeLeading,              前边缘，在习惯由左向右看的地区相当于 Left，
                                                   在习惯从右至左看的地区相当于 Right
            NSLayoutAttributeTrailing,             后边缘，在习惯由左向右看的地区相当于 Right，
                                                   在习惯从右至左看的地区相当于 Left
            NSLayoutAttributeWidth,                宽度，CGRectGetWidth(view.frame)
            NSLayoutAttributeHeight,               高度，CGRectGetHeight(view.frame)
            NSLayoutAttributeCenterX,              水平中心，view.center.x
            NSLayoutAttributeCenterY,              垂直中心，view.center.y
            NSLayoutAttributeBaseline,             文本底标线
            NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline, 文本底标线
            NSLayoutAttributeFirstBaseline         文本上标线，NS_ENUM_AVAILABLE_IOS(8_0)

            NSLayoutAttributeLeftMargin            左边缘，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeRightMargin           右边缘，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeTopMargin             上边缘，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeBottomMargin          下边缘，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeLeadingMargin         前边缘，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeTrailingMargin        后边缘，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeCenterXWithinMargins  宽度，NS_ENUM_AVAILABLE_IOS(8_0)
            NSLayoutAttributeCenterYWithinMargins  高度，NS_ENUM_AVAILABLE_IOS(8_0)

            NSLayoutAttributeNotAnAttribute = 0  清除所有约束

        2、NSLayoutRelation

            NSLayoutRelationLessThanOrEqual = -1,     小于等于
            NSLayoutRelationEqual = 0,                等于
            NSLayoutRelationGreaterThanOrEqual = 1,   大于等于

    // 创建约束

    // redView 的左边缘与 greenView 的左边缘对齐
    NSLayoutConstraint *constraintX = [NSLayoutConstraint constraintWithItem:redView 
                                                                   attribute:NSLayoutAttributeLeft 
                                                                   relatedBy:NSLayoutRelationEqual 
                                                                      toItem:greenView 
                                                                   attribute:NSLayoutAttributeLeft 
                                                                  multiplier:1.0 
                                                                    constant:0];

    // redView 的上边缘等于 greenView 的上边缘加 100
    NSLayoutConstraint *constraintY = [NSLayoutConstraint constraintWithItem:redView 
                                                                   attribute:NSLayoutAttributeTop 
                                                                   relatedBy:NSLayoutRelationEqual 
                                                                      toItem:greenView 
                                                                   attribute:NSLayoutAttributeTop 
                                                                  multiplier:1.0 
                                                                    constant:100];

    // redView 的宽度等于 100
    NSLayoutConstraint *constraintW = [NSLayoutConstraint constraintWithItem:redView 
                                                                   attribute:NSLayoutAttributeWidth 
                                                                   relatedBy:NSLayoutRelationEqual 
                                                                      toItem:nil
                                                                   attribute:NSLayoutAttributeNotAnAttribute 
                                                                  multiplier:1.0 
                                                                    constant:100];

    // redView 的高度等于 50
    NSLayoutConstraint *constraintH = [NSLayoutConstraint constraintWithItem:redView 
                                                                   attribute:NSLayoutAttributeHeight 
                                                                   relatedBy:NSLayoutRelationEqual 
                                                                      toItem:nil
                                                                   attribute:NSLayoutAttributeNotAnAttribute 
                                                                  multiplier:1.0 
                                                                    constant:50];

    // 将约束添加到视图上
    /*
        相对于另一个视图的约束必须添加到其父视图上
    */
    [self.view addConstraint:constraintX];
    [self.view addConstraint:constraintY];
    [redView addConstraint:constraintW];
    [redView addConstraint:constraintH];

Swift

    public convenience init(item view1: AnyObject, 
                       attribute attr1: NSLayoutAttribute, 
                    relatedBy relation: NSLayoutRelation, 
                          toItem view2: AnyObject?, 
                       attribute attr2: NSLayoutAttribute, 
                            multiplier: CGFloat, 
                            constant c: CGFloat)

    参数说明：

        第一个参数 view1: 要设置的视图；
        第二个参数 attr1: view1 要设置的属性；
        第三个参数 relation: 视图 view1 和 view2 的指定属性之间的关系；
        第四个参数 view2: 参照的视图；
        第五个参数 attr2: 参照视图 view2 的属性；
        第六个参数 multiplier: 视图 view1 的指定属性是参照视图 view2 指定属性的多少倍；
        第七个参数 c: 视图 view1 的指定属性需要加的浮点数。

    根据参数的讲解，得出计算公式如下：

        view1.attr1 [= , >= , <=] view2.attr2 * multiplier + c;

    参数详解：

        1、NSLayoutAttribute

            case Left                   左边缘，CGRectGetMinX(view.frame)
            case Right                  右边缘，CGRectGetMaxX(view.frame)
            case Top                    上边缘，CGRectGetMinY(view.frame)
            case Bottom                 下边缘，CGRectGetMinY(view.frame)
            case Leading                前边缘，在习惯由左向右看的地区相当于 Left，在习惯从右至左看的地区相当于 Right
            case Trailing               后边缘，在习惯由左向右看的地区相当于 Right，在习惯从右至左看的地区相当于 Left
            case Width                  宽度，CGRectGetWidth(view.frame)
            case Height                 高度，CGRectGetHeight(view.frame)
            case CenterX                水平中心，view.center.x
            case CenterY                垂直中心，view.center.y
            case Baseline               文本底标线

            case FirstBaseline          文本上标线，@availability(iOS, introduced=8.0)

            case LeftMargin             左边缘，@availability(iOS, introduced=8.0)
            case RightMargin            右边缘，@availability(iOS, introduced=8.0)
            case TopMargin              上边缘，@availability(iOS, introduced=8.0)
            case BottomMargin           下边缘，@availability(iOS, introduced=8.0)
            case LeadingMargin          前边缘，@availability(iOS, introduced=8.0)
            case TrailingMargin         后边缘，@availability(iOS, introduced=8.0)
            case CenterXWithinMargins   宽度，@availability(iOS, introduced=8.0)
            case CenterYWithinMargins   高度，@availability(iOS, introduced=8.0)

            case NotAnAttribute         清除所有约束

        2、NSLayoutRelation

            case LessThanOrEqual       小于等于
            case Equal                 等于
            case GreaterThanOrEqual    大于等于

    // 创建约束

    // redView 的左边缘与 greenView 的左边缘对齐
    let constraintX = NSLayoutConstraint(item: redView, 
                                    attribute: .Left, 
                                    relatedBy: .Equal, 
                                       toItem: greenView, 
                                    attribute: .Left, 
                                   multiplier: 1.0,
                                     constant: 0)

    // redView 的上边缘等于 greenView 的上边缘加 100
    let constraintY = NSLayoutConstraint(item: redView, 
                                    attribute: .Top, 
                                    relatedBy: .Equal, 
                                       toItem: greenView, 
                                    attribute: .Top, 
                                   multiplier: 1.0, 
                                     constant: 100)

    // redView 的宽度等于 100
    let constraintW = NSLayoutConstraint(item: redView, 
                                    attribute: .Width, 
                                    relatedBy: .Equal, 
                                       toItem: nil, 
                                    attribute: .NotAnAttribute, 
                                   multiplier: 1.0,
                                     constant: 100)

    // redView 的高度等于 50
    let constraintH = NSLayoutConstraint(item: redView, 
                                    attribute: .Height, 
                                    relatedBy: .Equal, 
                                       toItem: nil, 
                                    attribute: .NotAnAttribute, 
                                   multiplier: 1.0,
                                     constant: 50)

    // 将约束添加到视图上
    /*
        相对于另一个视图的约束必须添加到其父视图上
    */
    self.view.addConstraint(constraintX)
    self.view.addConstraint(constraintY)
    redView.addConstraint(constraintW)
    redView.addConstraint(constraintH)

2.4 VFL 语句方式添加约束

Objective-C

    // 使用 VFL 来创建约束数组
    + (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format 
                                                                    options:(NSLayoutFormatOptions)opts 
                                                                    metrics:(nullable NSDictionary<NSString *,id> *)metrics 
                                                                      views:(NSDictionary<NSString *, id> *)views;

        参数：
            format  ：VFL 语句
            opts    ：约束类型
            metrics ：约束值
            views   ：需要设置约束的控件

        NSLayoutFormatOptions  约束类型：

            NSLayoutFormatAlignAllLeft     = (1 << NSLayoutAttributeLeft),         左边缘对齐
            NSLayoutFormatAlignAllRight    = (1 << NSLayoutAttributeRight),        右边缘对齐
            NSLayoutFormatAlignAllTop      = (1 << NSLayoutAttributeTop),          上边缘对齐
            NSLayoutFormatAlignAllBottom   = (1 << NSLayoutAttributeBottom),       下边缘对齐
            NSLayoutFormatAlignAllLeading  = (1 << NSLayoutAttributeLeading),      前边缘对齐
            NSLayoutFormatAlignAllTrailing = (1 << NSLayoutAttributeTrailing),     后边缘对齐
            NSLayoutFormatAlignAllCenterX  = (1 << NSLayoutAttributeCenterX),      水平中心对齐
            NSLayoutFormatAlignAllCenterY  = (1 << NSLayoutAttributeCenterY),      垂直中心对齐
            NSLayoutFormatAlignAllBaseline = (1 << NSLayoutAttributeBaseline),     文本底标线对齐
            NSLayoutFormatAlignAllLastBaseline = NSLayoutFormatAlignAllBaseline,   文本底标线对齐
            NSLayoutFormatAlignAllFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0) = (1 << NSLayoutAttributeFirstBaseline),
                                                                                   文本上标线对齐
            NSLayoutFormatAlignmentMask = 0xFFFF,                                  无对齐

            /* choose only one of these three
             */
            NSLayoutFormatDirectionLeadingToTrailing = 0 << 16, // default         由前到后方向，默认
            NSLayoutFormatDirectionLeftToRight = 1 << 16,                          由左到右方向
            NSLayoutFormatDirectionRightToLeft = 2 << 16,                          由右到左方向

            NSLayoutFormatDirectionMask = 0x3 << 16,                               无方向

    // 使用下面的宏来自动生成 views 和 metrics 参数
    NSDictionaryOfVariableBindings(...)

        NSDictionaryOfVariableBindings(redView); 等价于 @{@"redView": redView};

    // 约束值
    NSNumber *margin = @50;

    NSNumber *width = @100;
    NSNumber *height = @50;

    // 创建水平方向约束
    /*
        redView 的宽度为 100
        kNilOptions = 0，相当于 NSLayoutFormatAlignmentMask
    */

    NSDictionary *viewsH = NSDictionaryOfVariableBindings(redView);
    NSDictionary *metricsH = NSDictionaryOfVariableBindings(width);

    NSString *vflH = @"H:[redView(width)]";

    NSArray *constraintH = [NSLayoutConstraint constraintsWithVisualFormat:vflH
                                                                   options:kNilOptions
                                                                   metrics:metricsH
                                                                     views:viewsH];

    // 创建垂直方向约束
    /*
        redView 的上边缘等于 greenView 的上边缘加 100（greenView 的高度为 50）
        redView 与 greenView 的左边缘对齐
        redView 的高度等于 50
    */

    NSDictionary *viewsV = NSDictionaryOfVariableBindings(redView, greenView);
    NSDictionary *metricsV = NSDictionaryOfVariableBindings(margin, height);

    NSString *vflV = @"V:[greenView]-margin-[redView(height)]";

    NSArray *constraintV = [NSLayoutConstraint constraintsWithVisualFormat:vflV
                                                                   options:NSLayoutFormatAlignAllLeft
                                                                   metrics:metricsV
                                                                     views:viewsV];
    // 将约束添加到视图上
    [self.view addConstraints:constraintH];
    [self.view addConstraints:constraintV];

Swift

    // 使用 VFL 来创建约束数组
    public class func constraintsWithVisualFormat(format: String, 
                                            options opts: NSLayoutFormatOptions, 
                                                 metrics: [String : AnyObject]?, 
                                                   views: [String : AnyObject]) 

                                                        -> [NSLayoutConstraint]

        参数：
            format  ：VFL 语句
            opts    ：约束类型
            metrics ：约束值
            views   ：需要设置约束的控件

        NSLayoutFormatOptions 约束类型：

            public static var AlignAllLeft: NSLayoutFormatOptions { get }               左边缘对齐
            public static var AlignAllRight: NSLayoutFormatOptions { get }              右边缘对齐
            public static var AlignAllTop: NSLayoutFormatOptions { get }                上边缘对齐
            public static var AlignAllBottom: NSLayoutFormatOptions { get }             下边缘对齐
            public static var AlignAllLeading: NSLayoutFormatOptions { get }            前边缘对齐
            public static var AlignAllTrailing: NSLayoutFormatOptions { get }           后边缘对齐
            public static var AlignAllCenterX: NSLayoutFormatOptions { get }            水平中心对齐
            public static var AlignAllCenterY: NSLayoutFormatOptions { get }            垂直中心对齐
            public static var AlignAllBaseline: NSLayoutFormatOptions { get }           文本底标线对齐
            public static var AlignAllLastBaseline: NSLayoutFormatOptions { get }       文本底标线对齐
            @available(iOS 8.0, *)
            public static var AlignAllFirstBaseline: NSLayoutFormatOptions { get }      文本上标线对齐

            public static var AlignmentMask: NSLayoutFormatOptions { get }              无对齐

            /* choose only one of these three
            */
            public static var DirectionLeadingToTrailing: NSLayoutFormatOptions { get } 由前到后方向，默认
            public static var DirectionLeftToRight: NSLayoutFormatOptions { get }       由左到右方向
            public static var DirectionRightToLeft: NSLayoutFormatOptions { get }       由右到左方向

            public static var DirectionMask: NSLayoutFormatOptions { get }              无方向

    // 生成 views 和 metrics 参数
    ["redView":redView]

    // 约束值
    let margin:NSNumber = 50

    let width:NSNumber = 100
    let height:NSNumber = 50

    // 创建水平方向约束
    /*
        redView 的宽度为 100
        kNilOptions = 0
    */

    let viewsH = ["redView":redView]
    let metricsH = ["width":width]

    let vflH = "H:[redView(width)]"

    let constraintH = NSLayoutConstraint.constraintsWithVisualFormat( vflH,
                                                             options: .AlignmentMask,
                                                             metrics: metricsH,
                                                               views: viewsH)

    // 创建垂直方向约束
    /*
        redView 的上边缘等于 greenView 的上边缘加 100（greenView 的高度为 50）
        redView 与 greenView 的左边缘对齐
        redView 的高度等于 50
    */

    let viewsV = ["redView":redView, "greenView":greenView]
    let metricsV = ["margin":margin, "height":height]

    let vflV = "V:[greenView]-margin-[redView(height)]"

    let constraintV = NSLayoutConstraint.constraintsWithVisualFormat( vflV,
                                                             options: .AlignAllLeft,
                                                             metrics: metricsV,
                                                               views: viewsV)

    // 将约束添加到视图上
    self.view.addConstraints(constraintH)
    self.view.addConstraints(constraintV)

2.5 Masonry 框架方式添加约束

2.5.1 Masonry 简介

Masonry 是目前最流行的 Autolayout 第三方框架，用优雅的代码方式编写 Autolayout，省去了苹果官方复杂的 Autolayout 代码，大大提高了开发效率。
mas_equalTo 和 equalTo：
- 默认情况下 mas_equalTo 有自动包装功能，比如自动将 20 包装为 @20，equalTo 没有自动包装功能。如果添加了下面的宏，那么 mas_equalTo 和 equalTo 就没有区别，这个宏一定要添加到 #import "Masonry.h" 前面。
```
    // define this constant if you want to enable auto-boxing for default syntax
    #define MAS_SHORTHAND_GLOBALS
```
mas_width 和 width：
- 默认情况下 width 是 make 对象的一个属性，用来添加宽度约束用的，表示对宽度进行约束。mas_width 是一个属性值，用来当做 equalTo 的参数，表示某个控件的宽度属性。如果添加了下面的宏，mas_width 也可以写成 width，就不用带 mas_ 前缀，这个宏一定要添加到 #import "Masonry.h" 前面。
```
    // define this constant if you want to use Masonry without the 'mas_' prefix
    #define MAS_SHORTHAND
```
- mas_height、mas_centerX 以此类推。

常用约束的类型：

    尺寸  ：width\height\size
    边界  ：left\leading\right\trailing\top\bottom
    中心点：center\centerX\centerY
    边界  ：edges

添加约束的方法：

    // 添加新的约束
    [view makeConstraints:^(MASConstraintMaker *make) {

    }];

    // 删掉以前的所有约束，添加新的约束
    [view remakeConstraints:^(MASConstraintMaker *make) {

    }];

    // 覆盖以前的某些特定的约束
    [view updateConstraints:^(MASConstraintMaker *make) {

    }];

可有可无的用法：

以下方法都仅仅是为了提高可读性，可有可无。

    - (MASConstraint *)with {
        return self;
    }

    - (MASConstraint *)and {
        return self;
    }

2.5.2 Masonry 的添加

Github 网址：https://github.com/SnapKit/Masonry
Masonry 使用 ARC
Masonry 使用步骤：
- 添加 Masonry 文件夹的所有源代码到项目中。
- 添加 2 个宏、添加主头文件，主头文件一定要放在宏定义的后面。
- 不需要设置 translatesAutoresizingMaskIntoConstraints 的值。

Objective-C

    // 添加第三方库文件
    Masonry

    // 添加宏定义
    #define MAS_SHORTHAND
    #define MAS_SHORTHAND_GLOBALS

    // 包含头文件
    #import "Masonry.h"

2.5.3 Masonry 基本使用

Objective-C

    // 添加控件

    UIView *greenView = UIView.new;
    greenView.backgroundColor = UIColor.greenColor;
    [self.view addSubview:greenView];

    UIView *redView = UIView.new;
    redView.backgroundColor = UIColor.redColor;
    [self.view addSubview:redView];

    UIView *blueView = UIView.new;
    blueView.backgroundColor = UIColor.blueColor;
    [self.view addSubview:blueView];

    UIView *superview = self.view;

    // 约束值

    int padding = 10;

    // 添加约束

    [greenView makeConstraints:^(MASConstraintMaker *make) {

        make.top.greaterThanOrEqualTo(superview.top).offset(padding);
        make.left.equalTo(superview.left).offset(padding);
        make.bottom.equalTo(blueView.top).offset(-padding);
        make.right.equalTo(redView.left).offset(-padding);

        make.width.equalTo(redView.width);

        make.height.equalTo(redView.height);
        make.height.equalTo(blueView.height);
    }];

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(superview.mas_top).with.offset(padding);           // with with
        make.left.equalTo(greenView.mas_right).offset(padding);             // without with
        make.bottom.equalTo(blueView.mas_top).offset(-padding);
        make.right.equalTo(superview.mas_right).offset(-padding);

        make.width.equalTo(greenView.mas_width);

        make.height.equalTo(@[greenView, blueView]);                        // can pass array of views
    }];

    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(greenView.mas_bottom).offset(padding);
        make.left.equalTo(superview.mas_left).offset(padding);
        make.bottom.equalTo(superview.mas_bottom).offset(-padding);
        make.right.equalTo(superview.mas_right).offset(-padding);

        make.height.equalTo(@[greenView.mas_height, redView.mas_height]);   // can pass array of attributes
    }];

运行效果

3、AutoLayout 动画效果设置

Objective-C

    // 添加动画效果
    [UIView animateWithDuration:2 animations:^{

        // 设置约束值
        /*
            设置约束的语句也可以写在此 block 之外，效果一样
        */
        self.redViewWidthConstraint.constant = 100.0;

        // 对 AutoLayout 约束添加动画效果
        /*
            self.view 为添加了约束控件的父控件
        */
        [self.view layoutIfNeeded];
    }];

Swift

    // 添加动画效果
    UIView.animateWithDuration(2) { 

        // 设置约束值
        /*
            设置约束的语句也可以写在此 block 之外，效果一样
        */
        self.redViewWidthConstraint.constant = 100.0

        // 对 AutoLayout 约束添加动画效果
        /*
            self.view 为添加了约束控件的父控件
        */
        self.view.layoutIfNeeded()
    }

4、AutoLayout UILabel 设置效果

在没有设置 Autolayout 时，UILabel 的文字内容总是居中显示，导致顶部和底部会有一大片空缺区域。
设置 Autolayout（位置约束和宽度约束）后，UILabel 的 bounds 默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域。
设置宽度约束为小于等于某个值，Label 的文字较短时，Label 的宽度也会随着缩小。

微信关注我们

原文链接：https://yq.aliyun.com/articles/312218

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

iOS - Xib

前言 xib 文件可以被 Xcode 编译成 nib 文件，xib 文件本质上是一个 xml 文件，而 nib 文件就是编译后的二进制文件，该文件将视图等控件对象封装了起来，而在程序运行起来后，这些对象会被激活。xib 可以用 vim 或 cat 命令查看。nib 文件可以在程序的 Build 目录下找到。 xib 文件有以下几个重要的属性，从哪里加载 xib，加载 xib 中的什么视图，都可以根据这几个属性得出。 xib 文件名 File’s Owner xib 文件中的视图的 Class xib 文件中的视图的 Outlet 指向在写界面时同时混用 xib 和代码可以提高效率，而对 xib 的使用主要体现在其专用性和通用性上。对于一些专门的界面，例如 App 中的设置界面，纯代码写难免会浪费时间，此时可以通过 xib 文件的拖控件方法来定制。这个 xib 是专用于某一个界面的，目的是提高效率。对于一些通用的控件甚至界面，例如一个很漂亮但实现起来非常复杂的按钮，此时可以通过 load xib 文件中的视图来快速添加。这个 xib 对于所有视图是共用的，目的是提高可复用性。对于...

2016-08-11

610

用Spannable字符串实现： String s= "Hello Everyone"; SpannableString ss1= new SpannableString(s); ss1.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size ss1.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color TextView tv= (TextView) findViewById(R.id.textview); tv.setText(ss1); 效果如下： Hello Everyone也可以通过截取字符串里面的空格来展示不同文字的大小，截取如下： String[] each; String s= "Hello Everyone"; for(int i=0;i<s.length();i++) { each = s.split("\\s"); }

2016-08-11

708

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

iOS - AutoLayout

前言

1、SB／Xib 中 AutoLayout 的设置

1.1 添加对齐约束

1.2 添加相对约束

1.3 处理约束

1.4 修改约束

1.5 约束设置警告和错误

1.6 约束值设置代码

1.7 Size Classes 设置

2、纯代码中 AutoLayout 的设置

2.1 约束设置方法

2.2 关闭 Autoresizing

2.3 常规语句方式添加约束

2.4 VFL 语句方式添加约束

2.5 Masonry 框架方式添加约束

2.5.1 Masonry 简介

2.5.2 Masonry 的添加

2.5.3 Masonry 基本使用

3、AutoLayout 动画效果设置

4、AutoLayout UILabel 设置效果

iOS - Xib

Android TextView 字符串展示不同大小文字

相关文章

发表评论

资源下载

优质分享App

Mario

Nacos

Sublime Text

欢迎您来访！