华山论剑之浅谈iOS的屏幕适配(AutoLayout与Masonry)
在iPhone之初,4s的屏幕逻辑分辨率只有320*480,我们是不需要做屏幕适配的,但是到了如今,iPhone5,iPhone6s,iPhone 6s plus ,屏幕的逻辑分辨率已经大大的有所改变了.所以,作为程序猿的我们做的就是屏幕的适配工作.今天,我就重可视化和纯代码来说一下屏幕适配的问题.
| iPhone机型 | 屏幕分辨率 |
|---|---|
| iPhone4(s) | 320x480 |
| iPhone5c | 320x568 |
| iPhone5(s) | 320x568 |
| iPhone6 | 375x667 |
| iPhone6s(plus) | 375x667 |
可视化编程
可视化编程是适合独立开发,快速开发的一种形式,但是不利于后期的维护,可视化编程的屏幕适配主要是用到了AutoLayout的,当然了还有SizeClasses,今天我只谈一下我对AutoLayout的理解和认识.AutoLayout加起来比较简单,但是对于初学者而言,可能加约束加着加着就加错了,那么我们在加约束的期间要遵循什么的原则呢? 其实很简单,就是大小和位置,大小就是宽和高,位置就是x和y.下面我们看一个范例,看AutoLayout是如何实现屏幕适配的.
首先我们现在创建一个新的工程,然后在main.storyboard里面ViewController上面添加一View,并给它添加颜色
然后我们就选中这个View,我们用右下角的倒数第三个图标按钮给他添加约束.添加约束的工具栏如下.
添加约束的原则就是如何固定一个对象!(从位置和大小入手)
当我们添加完成约束之后,我们就要调整约束对象的位置.如下图使用右下角第四个图标把我们的约束添加到对象身上去.
那么当我们不需要某个约束,或者想修改某个约束的时候,我们应该从哪里找到我们的约束条件呢?这里,我们要先选中要修改的对象.然后点击右边的菜单栏中的第五个图标按钮.
纯代码屏幕适配
对于纯代码的屏幕适配,一种方法就是计算相对距离.一种是AutoLayer + UIView ,还有一种是重量级的Masonry.
在一开始的时候,程序员做屏幕适配的时候,就是纯粹的和屏幕的大小做相对距离的计算.直到iOS6的时候出现了AutoLayer +UIView.再到后来的Masonry.
对呀我来说,可视化的时候我喜欢使用AutoLayer ,但是纯代码我更倾向于Masonry自动布局.我们先看一下使用AutoLayer +UIView是如何定义两个视图的.
- (void)viewDidLoad {
[super viewDidLoad];
UIView *myview = [[UIView alloc] init];
myview.backgroundColor = [UIColor greenColor];
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[myview addSubview:redView];
[myview addSubview:blueView];
[myview setTranslatesAutoresizingMaskIntoConstraints:NO];
[redView setTranslatesAutoresizingMaskIntoConstraints:NO];
[blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
NSMutableArray *tmpConstraints = [NSMutableArray array];
//约束条件
[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"|-50-[redView(==100)]-30-[blueView(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)]];
[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];
[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[blueView(==redView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView,redView)]];
[myview addConstraints:tmpConstraints];
self.view = myview;
}
Masonry
看到AutoLayer +UIView这么麻烦,那么对比Masonry就简单了许多.Masonry其实就是对AutoLayer +UIView的封装.
首先我们先导入我们的Masonry的库.
#import <Masonry/Masonry.h>
然后,我们分情况写一下,当是一个视图扥时候,并且我们的视图要求是居中,并且视图大小是200 * 200,
MASConstraintMaker 就是我们的假约束的对象,是有如下属性的,我们可以根据这些属性给我们的目对象添加对应的约束.
@property (nonatomic, strong, readonly) MASConstraint *left;//左侧
@property (nonatomic, strong, readonly) MASConstraint *top;//上侧
@property (nonatomic, strong, readonly) MASConstraint *right;//右侧
@property (nonatomic, strong, readonly) MASConstraint *bottom;//下侧
@property (nonatomic, strong, readonly) MASConstraint *leading;//首部
@property (nonatomic, strong, readonly) MASConstraint *trailing;//尾部
@property (nonatomic, strong, readonly) MASConstraint *width;//宽
@property (nonatomic, strong, readonly) MASConstraint *height;//高
@property (nonatomic, strong, readonly) MASConstraint *centerX;//横向居中
@property (nonatomic, strong, readonly) MASConstraint *centerY;//纵向居中
@property (nonatomic, strong, readonly) MASConstraint *baseline;//文本基线
那么具体代码设置如下.
// 防止block中的循环引用
__weak typeof (self) weakSelf = self;
// 初始化一个View
UIView *bgView = [[UIView alloc]init];
bgView.backgroundColor = [UIColor redColor];
[self.view addSubview:bgView];
// 使用mas_makeConstraints添加约束
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
//设置视图中心在父视图的中心上
make.center.equalTo(weakSelf.view);
//设置视图的大小
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
当是两个视图,我们需要做的是 2个view横向居中，第二个view距离第一个view间距为10
UIView *view1 = [[UIButton alloc]init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(90, 90));
make.centerX.equalTo(weakSelf.view);
make.top.width.offset(90);
}];
UIView *view2 = [[UILabel alloc]init];
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(100, 100));
make.centerX.equalTo(view1);
make.top.equalTo(view1.mas_bottom).with.offset(20);
}];
注意: 添加约束之前必须把约束对象添加到父视图上!!!