如何优雅的代码编写 AutoLayout

时间：2024-04-14 20:59:05

概述

使用 Objective-C 纯代码编写 AutoLayout，看 AutoLayout 的字面理解就是自动布局，听起来好像蛮屌的样子。说白了就是适配：适应、兼容各种不同的情况，包括不同版本的操作系统的适配（系统适配）和不同屏幕尺寸的适配（屏幕适配）。
在 Storyboard 中，AutoLayout 有以下 3 个常用面板：

  1. Align（对齐）

    如何优雅的代码编写 AutoLayout
    Align（对齐）

  2. Pin（相对）

    如何优雅的代码编写 AutoLayout
    Pin（相对）

  3. Resolve Auto Layout Issues（约束处理）

    如何优雅的代码编写 AutoLayout
    Resolve Auto Layout Issues（约束处理）

在 Storyboard 中实现 AutoLayout 我就不在本文讲解，因为讲了就是违背了不忘初心，方得始终的标题了。

如何优雅的代码编写 AutoLayout
不忘初心，方得始终

Talk is cheap, show me the code

先说一下用代码实现 AutoLayout 步骤，别眨眼：

  1. 利用 NSLayoutConstraint 类创建具体的约束对象；

  2. 添加约束对象到相应的 view 上，代码有这两种：

- (void)addConstraint:(NSLayoutConstraint *)constraint;

- (void)addConstraints:(NSArray *)constraints;

或许有人问了，原来才两个步骤就可以了，我刚刚裤子都脱了，你就给我看这个？！
话不多说，马上 show you the code !
先看看我们使用 frame 的方式是如何确定一个 view 的位置的：

- (void)viewDidLoad {

    [super viewDidLoad];

    self.title = @"使用 frame 的方式";

    UIView *purpleView = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 150, 150)];

    purpleView.backgroundColor = [UIColor purpleColor];

    [self.view addSubview:purpleView];

}

代码很简单，运行效果如下：

如何优雅的代码编写 AutoLayout
运行效果

再来看看 AutoLayout 的实现：

- (void)viewDidLoad {

    [super viewDidLoad];

    self.title = @"使用 AutoLayout 的方式";

    UIView *purpleView = [[UIView alloc] init];

    purpleView.backgroundColor = [UIColor purpleColor];

    // 禁止将 AutoresizingMask 转换为 Constraints

    purpleView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:purpleView];

    // 添加 width 约束

    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];

    [purpleView addConstraint:widthConstraint];

    // 添加 height 约束

    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];

    [purpleView addConstraint:heightConstraint];

    // 添加 left 约束

    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];

    [self.view addConstraint:leftConstraint];

    // 添加 top 约束

    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:200];

    [self.view addConstraint:topConstraint];

}

看完这段代码，我收到了惊吓！我被这一大段代码吓到了，很多童鞋看到那么简单的布局需要写那么多代码，可能就被吓跑了。我只能说一句：先不要走，待我慢慢解释～

  1. 创建约束对象（NSLayoutConstraint）的常用方法
    一个 NSLayoutConstraint 对象就代表一个约束。
+ (id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

总共有 7 个参数

相关文章