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];