iOS开发 - 屏幕适配之纯代码

1、简介

自从iPhone5发布之后，iPhone系列的手机就需要做屏幕的适配，本文讲解如何使用代码进行屏幕适配

这里的讲解不会贴出图片展示，还希望大家自己多多动手操练

2、概念

屏幕适配两个重要的概念：参照、约束

参照：就是控件的位置和宽高等属性相对于哪一个控件而言的

约束：就是对控件的宽高和位置等属性进行设置

3、NSLayoutConstraint

1. iOS中的约束类

2. 常用方法

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

// 参数说明
// constraintWithItem:  需要添加约束的控件
// attribute: 约束控件的属性：宽、高等，是枚举值
// relatedBy: 控件之间约束的关系
// toItem: 参照控件
// attribute: 参照控件的属性，与之前的attribute相同类型
// multiplier: 倍数
// constant: 常量值

3. 只看这个方法不是很好理解，其实iOS的控件之间的约束关系就是线性关系

控件的属性 = 参照的属性 X 倍数 + 常量值 

4、使用代码进行屏幕适配的步骤

第一步：添加控件

第二步：关闭autoresizing，这一步非常重要，如果没有这一步，控件可能不显示或出现未知的错误

第三步：添加约束

5、实例1：添加一个控件，居中显示，关键代码如下

// 1、添加控件
UIView *blue = [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];

// 2、关闭autoresizing
blue.translatesAutoresizingMaskIntoConstraints = NO;

// 3、添加约束
// 宽度约束
NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:blue
                                                         attribute:NSLayoutAttributeWidth
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:nil
                                                         attribute:NSLayoutAttributeNotAnAttribute
                                                        multiplier:1.0
                                                          constant:100];
[blue addConstraint:width];

// 高度约束
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:blue
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:NSLayoutAttributeNotAnAttribute
                                                         multiplier:1.0
                                                           constant:100];
[blue addConstraint:height];

// 中心点x约束
// 说明：中心点是参照父控件，所以添加到父控件之上
NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:blue
                                                           attribute:NSLayoutAttributeCenterX
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:self.view
                                                           attribute:NSLayoutAttributeCenterX
                                                          multiplier:1.0
                                                            constant:0.0];
[self.view addConstraint:centerX];

// 中心点y约束
// 说明：中心点是参照父控件，所以添加到父控件之上
NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:blue
                                                           attribute:NSLayoutAttributeCenterY
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:self.view
                                                           attribute:NSLayoutAttributeCenterY
                                                          multiplier:1.0
                                                            constant:0.0];
[self.view addConstraint:centerY];

6、实例2：添加两个控件

蓝色控件距离上左右和下面青色控件的间距均为20,高度40，青色控件和蓝色控件等高，右对齐，宽度为蓝色控件的一半

// 1：添加控件
UIView *blue = [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];

UIView *cyan = [[UIView alloc] init];
cyan.backgroundColor = [UIColor cyanColor];
[self.view addSubview:cyan];

// 2：关闭autoresizing
blue.translatesAutoresizingMaskIntoConstraints = NO;
cyan.translatesAutoresizingMaskIntoConstraints = NO;

// 3：添加约束
// 蓝色控件：高度
NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blue
                                                              attribute:NSLayoutAttributeHeight
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:nil
                                                              attribute:NSLayoutAttributeNotAnAttribute
                                                             multiplier:1.0
                                                               constant:40];
[blue addConstraint:blueHeight];

// 蓝色控件：左边间距
NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blue
                                                            attribute:NSLayoutAttributeLeft
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:self.view
                                                            attribute:NSLayoutAttributeLeft
                                                           multiplier:1.0
                                                             constant:20];
[self.view addConstraint:blueLeft];

// 蓝色控件：顶部间距
NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blue
                                                           attribute:NSLayoutAttributeTop
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:self.view
                                                           attribute:NSLayoutAttributeTop
                                                          multiplier:1.0
                                                            constant:20];
[self.view addConstraint:blueTop];

// 蓝色控件：右边间距
NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blue
                                                             attribute:NSLayoutAttributeRight
                                                             relatedBy:NSLayoutRelationEqual
                                                                toItem:self.view
                                                             attribute:NSLayoutAttributeRight
                                                            multiplier:1.0
                                                              constant:-20];
[self.view addConstraint:blueRight];

// 青色控件：右边 = 蓝色控件：右边
NSLayoutConstraint *cyanRight = [NSLayoutConstraint constraintWithItem:cyan
                                                             attribute:NSLayoutAttributeRight
                                                             relatedBy:NSLayoutRelationEqual
                                                                toItem:blue
                                                             attribute:NSLayoutAttributeRight
                                                            multiplier:1.0
                                                              constant:0];
[self.view addConstraint:cyanRight];


// 青色控件：高度 = 蓝色控件：高度
NSLayoutConstraint *cyanHeight = [NSLayoutConstraint constraintWithItem:cyan
                                                              attribute:NSLayoutAttributeHeight
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:blue
                                                              attribute:NSLayoutAttributeHeight
                                                             multiplier:1.0
                                                               constant:0];
[self.view addConstraint:cyanHeight];

// 青色控件：顶部 = 蓝色控件底部 + 间距
NSLayoutConstraint *cyanTop = [NSLayoutConstraint constraintWithItem:cyan
                                                           attribute:NSLayoutAttributeTop
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:blue
                                                           attribute:NSLayoutAttributeBottom
                                                          multiplier:1.0
                                                            constant:20];
[self.view addConstraint:cyanTop];

// 青色控件：宽度 = 蓝色控件：宽度 * 0.5
NSLayoutConstraint *cyanWeight = [NSLayoutConstraint constraintWithItem:cyan
                                                              attribute:NSLayoutAttributeWidth
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:blue
                                                              attribute:NSLayoutAttributeWidth
                                                             multiplier:0.5
                                                               constant:0];
[self.view addConstraint:cyanWeight];