Masonry布局框架的使用

来源：互联网发布：淘宝客不小心退出了编辑：程序博客网时间：2024/04/30 19:35

Masonry是一个轻量级的布局框架拥有自己的描述语法采用更优雅的链式语法封装自动布局简洁明了并具有高可读性。比我们使用自动布局，繁琐的约束条件，好用多了。下面我们来学学masonry的使用方法。

首先我们要下载Masonry源码。源码地址如下：

https://github.com/Masonry/Masonry

将源码下载下来后，可以直接编译过使用的。

然后将源码中的Masonry和Headers目录下的文件拷贝到我们的工程中，并添加进项目中。并在项目的编译设置中的header search paths 选项中增加$(SRCROOT)/Headers 和$(SRCROOT)/Masonry

然后在我们的项目预编译文件中增加

#import "Masonry.h"

然后我们就可以使用masonry的语句来设置我们的界面了。下面我们开始吧。

Masonry 支持的常用属性如下：

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

这些属性与NSLayoutAttrubute的对照表如下：

· 首先在Masonry中能够添加autolayout约束有三个函数

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束否则会报错
mas_updateConstraints 针对上面的情况会更新在block中出现的约束不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束仅保留最新的约束

三种函数善加利用就可以应对各种情况了

一个小例子：

//从此以后基本可以抛弃CGRectMake了

UIView *sv = [UIView new];

//在做autoLayout之前一定要先将view添加到superview上否则会报错

[self.view addSubview:sv];

//mas_makeConstraints就是Masonry的autolayout添加函数将所需的约束添加到block中行了

[sv mas_makeConstraints:^(MASConstraintMaker *make) {

//将sv居中(很容易理解吧?)

make.center.equalTo(ws.view);

//将size设置成(300,300)

make.size.mas_equalTo(CGSizeMake(300, 300));

}];

equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO,比较的是值，equalTo比较的是view。

小例子二：

UIView *sv1 = [UIView new];

sv1.backgroundColor = [UIColor redColor];

[sv addSubview:sv1];

[sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

}];

UIView *sv2 = [UIView new];

UIView *sv3 = [UIView new];

sv2.backgroundColor = [UIColor greenColor];

sv3.backgroundColor = [UIColor blueColor];

[sv addSubview:sv2];

[sv addSubview:sv3];

int padding1 = 10;

[sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv.mas_left).with.offset(padding1);

make.right.equalTo(sv3.mas_left).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv3);

}];

[sv3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv2.mas_right).with.offset(padding1);

make.right.equalTo(sv.mas_right).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv2);

}];

效果如下：

例子三：

[self.mobileView mas_makeConstraints:^(MASConstraintMaker *make){

make.left.equalTo(self.view.mas_left).with.offset(0);

make.right.equalTo(self.view.mas_right).with.offset(0);

make.top.equalTo(self.view.mas_top).with.offset(MobileView_To_Top);

make.height.mas_equalTo(@Height_of_MobileView);

make.width.equalTo(self.view);

}];

[self.tipLabel mas_makeConstraints:^(MASConstraintMaker *make){

make.left.equalTo(self.view.mas_left).with.offset(0);

make.right.equalTo(self.view.mas_right).with.offset(0);

make.top.equalTo(self.view.mas_top).with.offset(Tiplabel_To_Top);

make.height.mas_equalTo(@Height_of_TipLabel);

make.width.equalTo(self.view);

}];

[self.nextButton mas_makeConstraints:^(MASConstraintMaker *make){

make.left.equalTo(self.view.mas_left).with.offset(NextButton_To_Left);

make.right.equalTo(self.view.mas_right).with.offset(-NextButton_To_Left);

make.top.equalTo(self.view.mas_top).with.offset(NextButton_To_Top);

make.height.mas_equalTo(@Height_of_NextButton);

}];

注意在xib或者storyboard中使用masonry框架相关方法的时候要将use Auto layout选项去掉，否则会不起作用。

转载：http://my.oschina.net/u/2252309/blog/372196

0 0