iOS开发基础11-屏幕适配、Autolayout及 Masonry 框架
在 iOS 开发中，适配性、布局和分辨率是至关重要的概念。通过理解这些概念，可以编写出兼容性更强、视觉效果更佳的应用。本文将详细介绍适配、点和像素、Autoresizing、Autolayout 及 Masonry 框架，并分析其底层逻辑。
一、适配
1. 什么是适配？
在软件开发中，适配指的是让应用能够适应并兼容各种不同的情况。
2. 移动开发中的适配种类
2.1 系统适配
针对不同版本的操作系统进行适配。例如，某些 API 在 iOS 的新版本中引入或废弃了，需要进行版本判断来适配不同的系统版本。
2.2 屏幕适配
针对不同大小的屏幕尺寸和屏幕比例进行适配。通过响应式设计和动态布局，使应用在不同设备上都能有良好的展示效果。
二、点和像素
1. 在用户眼中
屏幕是由无数个像素（Pixel）组成的，像素越多，屏幕越清晰。
2. 在开发者眼中
在 iOS 开发中，屏幕是由无数个点（Point）组成的。一个点由一个或多个像素组成。像素密度（PPI或DPI）越高，屏幕越清晰。
三、Autoresizing简介
1. Autoresizing 的历史
在 Autolayout 之前，iOS 开发者使用 Autoresizing 来进行屏幕适配。但 Autoresizing 的局限性较大，无法完成复杂的布局任务。相比之下，Autolayout 的功能更强大。
2. Autoresizing 的核心概念
- 参照（Reference）：确定控件相对于哪个父控件来设置位置和大小。
- 约束（Constraint）：定义控件与其父控件之间的关系。
3. Autoresizing 的实现
如下图所示的六根线：
- 四周线的作用：勾选上某一根线，代表当前控件到父控件的距离是固定的。
- 中间两条线的作用：勾选上中间的水平线，控件的宽度会随着父控件的宽度等比拉伸。勾选上垂直线，控件高度会等比拉伸。
- 父子关系的约束：Autoresizing 仅能约束父子控件之间的关系，不能约束兄弟控件。
示例代码
// 1. 创建父控件
UIView *greenView = [[UIView alloc] init];
greenView.frame = CGRectMake(0, 0, 200, 200);
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
// 2. 创建子控件
UIView *redView = [[UIView alloc] init];
redView.frame = CGRectMake(0, 0, 100, 100);
redView.backgroundColor = [UIColor redColor];
[greenView addSubview:redView];
// 3. 设置子控件的autoresizing
redView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
底层逻辑分析
- 固定距离和伸缩：根据设置，子控件与父控件的距离或尺寸可以固定，也可以等比例伸缩。
- 基于父子关系：所有约束都基于控件层次关系，不能处理兄弟控件之间的约束。
四、Autolayout简介
1. Autolayout 的背景
Autolayout 是 iOS 6 引入的一种“自动布局”技术，专门用于布局 UI 界面。随着开发工具的迭代，Autolayout 得到了广泛应用。
2. Storyboard 中的约束
2.1 约束的概念
每在 Storyboard 中添加一个设置，就相当于添加了一个约束。
2.2 约束错误
- 红色箭头：代表约束错误，开发者必须解决，这不一定影响运行，但会导致布局不正确。
- 黄色箭头：代表警告，表示控件预览位置或尺寸与约束位置不符，可以忽略但需要处理。
3. Autolayout 动画
修改约束后，使用以下代码实现动画：
[UIView animateWithDuration:1.0 animations:^{
[view layoutIfNeeded];
}];
4. NSLayoutConstraint （代码实现 Autolayout）
创建约束对象
使用 NSLayoutConstraint 类创建约束对象：
+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
示例代码
UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
[self.view addConstraints:@[widthConstraint, heightConstraint]];
底层逻辑分析
- 公式：Autolayout 的核心计算方式为：
obj1.property1 = (obj2.property2 * multiplier) + constant - 添加约束：约束添加到作用 view 的父视图上，以确保约束所需的上下文存在。
五、VFL 语言
1. 什么是 VFL 语言
VFL（Visual Format Language）是一种可视化格式语言，旨在简化 Autolayout 的代码编写。
2. VFL 示例
H:[cancelButton(72)]-12-[acceptButton(50)]
表示 cancelButton 宽度为 72，acceptButton 宽度为 50，两者间距为 12。
3. 使用 VFL 创建约束
示例代码
UIButton *cancelButton = [[UIButton alloc] init];
cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:cancelButton];
UIButton *acceptButton = [[UIButton alloc] init];
acceptButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:acceptButton];
NSDictionary *views = NSDictionaryOfVariableBindings(cancelButton, acceptButton);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[cancelButton(72)]-12-[acceptButton(50)]"
options:0
metrics:nil
views:views];
[self.view addConstraints:constraints];
底层逻辑分析
VFL 通过简单的字符串表示复杂的布局逻辑，大大简化了代码可读性和编写复杂约束的繁琐程度。
六、Masonry
1. Masonry 是什么
Masonry 是一个流行的第三方 Autolayout 框架，通过链式语法以优雅的方式编写 Autolayout 代码，提高开发效率。
2. 安装与使用
代码示例
// 添加 Masonry 到项目中
#import "Masonry.h"
// 使用 Masonry 实现一个简单的布局
UIView *superview = self.view;
UIButton *button = [[UIButton alloc] init];
[superview addSubview:button];
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(50);
make.height.mas_equalTo(50);
make.center.equalTo(superview);
}];
特性解释
- mas_equalTo 和 equalTo：
mas_equalTo具有自动包装功能，而equalTo不具有。添加宏#define MAS_SHORTHAND_GLOBALS后，两者无差别。 - mas_width 和 width：
mas_width是属性值，用于equalTo，而width是make的一个属性。添加宏#define MAS_SHORTHAND后，可简写。
3. Masonry 的可读性提升
- (MASConstraint *)with {
return self;
}
- (MASConstraint *)and {
return self;
}
这些方法是为了提高代码可读性，尽管不是必要的，但有助于理解约束关系。
结论
通过上述内容，我们详细介绍了 iOS 开发中适配、点和像素、Autoresizing、Autolayout 和 Masonry 框架的知识点和应用。这些工具和概念是编写兼容性好、布局灵活、视觉效果优美的 iOS 应用的基础。
