iOS自动布局 -masonry

需要适配的手机的尺寸

1.iphone4 4s (320 480)
2.iphone5 5s (320 568)
3.iphone6 6s (375x667)
4.iphone6p 6sp (414x736)
适配不同的屏幕尺寸常用的有三种形式

1.xib自动布局
2.使用NSLayoutConstraint类代码创建(包括第三方类库Masonry的使用)
3.使用VFM布局

今天我们了解的是Masonry第三方布局的时候用
VFM的使用可以参考http://www.jianshu.com/p/dfc11861cc85里面有比较详细的介绍

masonry下载地址：https://github.com/SnapKit/Masonry

一 .查看mastory的属性
1.查看mastery的属性

@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;
@property (nonatomic, strong, readonly) MASViewAttribute  *mas_baseline;

和NSLayoutAttrubute对比

1418956465427751 (1).jpg

常用的3个方法
1.mas_makeConstraints 只负责添加新增约束，Autolayout中不能同时存在两条针对于同一对象的约束，否则会报错

 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

mas_updateConstraints 针对上面的情况，会更新在block中出现的约束，确保不会出现两个相同的约束

  - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

3.mas_remakeConstraints 会清除之前的所有约束，仅保留最新的约束

- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

使用方法示例

1、居中显示一个View

// 居中显示一个view
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
//在使用autolayout之前一定要先将试图添加到superview上 否则会报错
[self.view addSubview:view1];
// 用masonry约束布局
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    // 设置view1居中
    make.center.equalTo(self.view);
    // 设置view的宽 高
    make.size.mas_equalTo(CGSizeMake(200, 200));
}];

2.让一个View小于其superView（边界10）

方法一：官方文档提供方式

UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view.mas_top).with.offset(padding.top);
    make.left.equalTo(self.view.mas_left).with.offset(padding.left);
    make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(self.view.mas_right).with.offset(-padding.right);
}];

方法二：官方文档方式：

//让一个View小于其superView（边界15）
 UIView *view2 = [[UIView alloc]init];
 view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view).insets(padding);
}];

方法三：

//让一个View小于其superView（边界15）
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view).with.offset(padding.top);
    make.left.equalTo(self.view).with.offset(padding.left);
    make.bottom.equalTo(self.view).with.offset(-padding.bottom);
    make.right.equalTo(self.view).with.offset(-padding.right);
}];

方法四：

//让一个View小于其superView（边界15）
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
   make.top.left.bottom.and.right.equalTo(self.view).width.insets(padding);

}];

以上四中方法的实现效果是一样的其中要注意上面那个是with不是width如果输入错误会出现
如下错误

 Attributes should be chained before defining the constraint relation

with没有什么语法意义只是让语法好看，width是表示宽度的意思

3.实现两个视图2等分平均分配居中

// 让2个view平分

UIView *view3 = [[UIView alloc]init];
view3.backgroundColor = [UIColor redColor];
[self.view addSubview:view3];

UIView *view4 = [[UIView alloc]init];
view4.backgroundColor  = [UIColor greenColor];
[self.view addSubview:view4];

[view3  mas_makeConstraints:^(MASConstraintMaker *make) {
    
    make.centerY.mas_equalTo(self.view.mas_centerY);
    make.left.equalTo(self.view.mas_left).with.offset(10);
    make.right.equalTo(view4.mas_left).with.offset(-10);
    make.height.mas_equalTo(@150);
    make.width.equalTo(view4);
    
} ];

[view4 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.mas_equalTo(self.view.mas_centerY);
    make.left.equalTo(view3.mas_right).with.offset(10);
    make.right.equalTo(self.view.mas_right).with.offset(-10);
    make.height.equalTo(view3);
    make.width.equalTo(view3);
}];

页面效果：

Simulator Screen Shot 2016年4月14日 14.51.31.png

参考文档：

1.https://github.com/SnapKit/Masonry
2.http://www.cocoachina.com/ios/20141219/10702.html

欢迎关注我们的微信公众号，大家一起学习交流。

iOS自动布局 -masonry

你可能感兴趣的:(iOS自动布局 -masonry)