《AutoLayout编程实战与调试指南》

### 《Auto Layout编程实战与调试指南》 #### 1. 编程式Auto Layout基础 在某些情况无法使用Interface Builder来定义Auto Layout约束，比如在代码里动态创建用户界面组件时，就需要通过代码来设置约束。下面将构建一个简单应用，该应用包含三个按钮，分别用于添加新的图像视图、移除最后添加的图像视图以及移除所有添加的图像视图。 #### 2. 应用搭建步骤 - **创建应用与添加属性**： - 新建一个单视图应用。 - 在视图控制器中添加以下属性： ```objc // // ViewController.h // Recipe 2.2 Coding Auto Layout // #import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (strong, nonatomic) UIButton *addButton; @property (strong, nonatomic) UIButton *removeButton; @property (strong, nonatomic) UIButton *clearButton; @property (strong, nonatomic) NSMutableArray *imageViews; @property (strong, nonatomic) NSMutableArray *imageViewConstraints; @end ``` - **创建按钮的辅助方法**： - 在ViewController.m中添加辅助方法来创建按钮： ```objc - (UIButton *)addButtonWithTitle:(NSString *)title action:(SEL)selector { UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; [button setTitle:title forState:UIControlStateNormal]; [button addTarget:self action:selector forControlEvents:UIControlEventTouchUpInside]; button.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:button]; return button; } ``` - 这里将按钮的`translatesAutoresizingMaskIntoConstraints`属性设为`NO`很重要，否则可能会出现约束冲突。 - **在`viewDidLoad`方法中创建按钮**： ```objc - (void)viewDidLoad { [super viewDidLoad]; self.addButton = [self addButtonWithTitle:@"Add" action:@selector(addImageView)]; self.removeButton = [self addButtonWithTitle:@"Remove" action:@selector(removeImageView)]; self.clearButton = [self addButtonWithTitle:@"Clear" action:@selector(clearImageViews)]; } ``` - **添加按钮动作方法的占位符**： ```objc - (void)addImageView { } - (void)removeImageView { } - (void)clearImageViews { } ``` #### 3. 创建约束的两种主要方式 - **Visual Format Language**：这是一种直观描述性的语法，用于定义Auto Layout约束，能更好地可视化所创建的约束。 - 示例： - `[button1]-20-[button2]`：定义button2紧挨着button1，两者间距为20像素。 - `[button1]-[button2]`：表示默认间距。 - `V:[button1]-[button2]`：垂直布局约束。 - `|-[textField]-|`：将textField固定在父视图的左右两端，使用默认间距。 - `[button1(50)]-[button2(==button1)]`：指定button1宽度为50像素，button2宽度与button1相同。 - `[button1(>=50)]`：button1宽度至少为50像素。 - `[button1(>=50, <=100)]`：设置button1宽度的最小和最大值。 - `[button1(>=50@500)]`：button1宽度至少为50像素，优先级为500。 - **`constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:`方法**：此方法能提供完整性，因为并非所有约束都能用Visual Format Language表达。 #### 4. Visual Format Language语法元素表 | 语法元素 | 示例 | 描述 | | --- | --- | --- | | H:, V: | H:|-[statusLabel]-| <br> V:|[textView]| | 水平或垂直方向，默认是水平方向，H:可省略 | | \| | \|[textView]\| | 表示父视图，左边是起始端，右边是末尾端 | | - | [button1]-[button2] | 标准间距 | | -N- | \|-20-[view] | N大小的间距 | | [view] | | 表示子视图 | | ==, >=, <= | [view1(==view2)] <br> [view(>=30, <=100)] | 关系运算符，仅用于大小约束 | | @N | [view(==50@500)] <br> [view1(==view2@500, >=30)] | 约束优先级，仅用于大小约束，默认优先级为1000（即必需约束） | #### 5. 为按钮添加约束 - **创建按钮字典**： ```objc NSDictionary *viewsDictionary = [[NSDictionary alloc] initWithObjectsAndKeys: self.addButton, @"addButton", self.removeButton, @"removeButton", self.clearButton, @"clearButton", nil]; ``` - **添加水平约束**： ```objc [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[addButton]-[removeButton]-[clearButton]" options:0 metrics:nil views:viewsDictionary]]; ``` - **添加垂直约束**： ```objc [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[addButton]" options:0 metrics:nil views:viewsDictionary]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[removeButton]" options:0 metrics:nil views:viewsDictionary]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[clearButton]" options:0 metrics:nil views:viewsDictionary]]; ``` 此时`viewDidLoad`方法如下： ```objc - (void)viewDidLoad { [super viewDidLoad]; self.addButton = [self addButtonWithTitle:@"Add" action:@selector(addImageView)]; self.removeButton = [self addButtonWithTitle:@"Remove" action:@selector(removeImageView)]; self.clearButton = [self addButtonWithTitle:@"Clear" action:@selector(clearImageViews)]; NSDictionary *viewsDictionary = [[NSDictionary alloc] initWithObjectsAndKeys: self.addButton, @"addButton", self.removeButton, @"removeButton", self.clearButton, @"clearButton", nil]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[addButton]-[removeButton]-[clearButton]" options:0 metrics:nil views:viewsDictionary]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[addButton]" options:0 metrics:nil views:viewsDictionary]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[removeButton]" options:0 metrics:nil views:viewsDictionary]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[clearButton]" options:0 metrics:nil views:viewsDictionary]]; } ``` #### 6. 添加图像视图 - **准备图像资源**：把PNG格式的图像拖到项目的Supporting Files文件夹，在代码里替换图像文件名。 - **初始化数组属性**：在`viewDidLoad