1、简介
自从iPhone5发布之后,iPhone系列的手机就需要做屏幕的适配,本文讲解如何使用代码进行屏幕适配
这里的讲解不会贴出图片展示,还希望大家自己多多动手操练
2、概念
屏幕适配两个重要的概念:参照、约束
参照:就是控件的位置和宽高等属性相对于哪一个控件而言的
约束:就是对控件的宽高和位置等属性进行设置
3、NSLayoutConstraint
1. iOS中的约束类
2. 常用方法
3. 只看这个方法不是很好理解,其实iOS的控件之间的约束关系就是线性关系+(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: 常量值
控件的属性 = 参照的属性 X 倍数 + 常量值
4、使用代码进行屏幕适配的步骤
第一步:添加控件
第二步:关闭autoresizing,这一步非常重要,如果没有这一步,控件可能不显示或出现未知的错误
第三步:添加约束
5、实例1:添加一个控件,居中显示,关键代码如下
6、实例2:添加两个控件// 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];
蓝色控件距离上左右和下面青色控件的间距均为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];