由于苹果公司不断推出新的机型,所以大家都知道iOS开发中UI布局常常需要适配,同时也应该了解到苹果设备的适配主要是4,5,6,6plus这4种设备的适配。适配的方法有代码适配和使用xib添加约束,其中代码适配是用到autolayout但是官方推出的文档和Demo实在是繁琐,个人觉得还不如笨办法使用宽高比来的实在(但是计算宽高比以及获取设备需要的方法和代码太多),直到发现Masonry这个做适配的第三方真是颇为简单好用,所以简单记录一下。
iPhone的尺寸规格
设备 | 尺寸 | 逻辑分辨率 | Scale Factor | 设备分辨率 |
3GS | 3.5inch | 320*480 | @1x | 320*480 |
4(s) | 3.5inch | 320*480 | @2x | 640*960 |
5(s) | 4inch | 320*568 | @2x | 640*1136 |
5c | 4inch | 320*568 | @2x | 640*1136 |
6(s) | 4.7inch | 375*667 | @2x | 750*1334 |
6(s)plus | 5.5inch | 414*736 | @3x | 1242*2208 |
Masonry的源码:https://github.com/SnapKit/Masonry
Masonry是一个轻量级的布局框架,它拥有自己的描述语法,采用更优雅的链式语法封装自动布局,并简洁明了,具有高可读性。
Masonry支持的属性有:
//左侧,相当于NSAutoLayout的NSLayoutAttributeLeft
@property (nonatomic, strong, readonly) MASConstraint *left;
//上侧,相当于NSAutoLayout的NSLayoutAttributeTop
@property (nonatomic, strong, readonly) MASConstraint *top;
//右侧,相当于NSAutoLayout的NSLayoutAttributeRight
@property (nonatomic, strong, readonly) MASConstraint *right;
//下册,相当于NSAutoLayout的NSLayoutAttributeBottom
@property (nonatomic, strong, readonly) MASConstraint *bottom;
//首部,相当于NSAutoLayout的NSLayoutAttributeLeading
@property (nonatomic, strong, readonly) MASConstraint *leading;
//尾部,相当于NSAutoLayout的NSLayoutAttributeTrailing
@property (nonatomic, strong, readonly) MASConstraint *trailing;
//宽,相当于NSAutoLayout的NSLayoutAttributeWidth
@property (nonatomic, strong, readonly) MASConstraint *width;
//高,相当于NSAutoLayout的NSLayoutAttributeHeight
@property (nonatomic, strong, readonly) MASConstraint *height;
//横向中点(即x轴中点),相当于NSAutoLayout的NSLayoutAttributeCenterX
@property (nonatomic, strong, readonly) MASConstraint *centerX;
//纵向中点(即y轴中点),相当于NSAutoLayout的NSLayoutAttributeCenterY
@property (nonatomic, strong, readonly) MASConstraint *centerY;
//文本基线,相当于NSAutoLayout的NSLayoutAttributeBaseline
@property (nonatomic, strong, readonly) MASConstraint *baseline;
了解了Masonry支持的属性后,我们大致也了解一下Masonry给我们提供的给控件添加约束的三个方法。
// 新增约束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
// 修改已有约束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
// 清除之前已有约束,只保留新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
简单的事例:
1.居中显示一个宽度和高度都为200的UIView
代码:
__weak typeof (self) weakSelf = self;//防止block中循环引用
UIView *centerView = [[UIView alloc] init];
centerView.backgroundColor = [UIColor redColor];
[self.view addSubview:centerView];
[centerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
效果图:
2.相框效果.即子UIView小于supview。
代码:
__weak typeof (self) weakSelf = self;//防止block中循环引用
UIView *photoView = [[UIView alloc] init];
photoView.layer.borderWidth = 1;
photoView.layer.borderColor = [UIColor blackColor].CGColor;
photoView.backgroundColor = [UIColor grayColor];
[self.view addSubview:photoView];
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"1"];
[photoView addSubview:imageView];
[photoView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
// 方式一:
// make.top.equalTo(photoView).offset(10);
// make.left.equalTo(photoView).offset(10);
// make.bottom.equalTo(photoView).offset(-10);
// make.right.equalTo(photoView).offset(-10);
// 方式二:
// make.top.left.bottom.right.equalTo(photoView).insets(UIEdgeInsetsMake(10, 10, 10, 10));
// 方式三:
make.edges.equalTo(photoView).insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
效果
使用Masonry的添加约束的之前,必须先把View添加到视图中。