Masonry简介

介绍

Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。可以通过cocoapods将其导入。

使用

Masonry属性及其说明

//左侧

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

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了

首先，宏定义一个self用于Block内部，防止循环引用

#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self;

下面通过实例进行介绍

1.居中显示一个View

WS(ws);

UIView *sv = [UIView new];

sv.backgroundColor = [UIColor blackColor];

[self.view addSubview:sv];

[sv mas_makeConstraints:^(MASConstraintMaker *make) {

make.center.equalTo(ws.view);

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

}];

代码效果：

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

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

/**

*  Creates a MASConstraintMaker with the callee view.

*  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.

*  If an existing constraint exists then it will be updated instead.

*

*  @param block scope within which you can build up the constraints which you wish to apply to the view.

*

*  @return Array of created/updated MASConstraints

*/

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

/**

*  Creates a MASConstraintMaker with the callee view.

*  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.

*  All constraints previously installed for the view will be removed.

*

*  @param block scope within which you can build up the constraints which you wish to apply to the view.

*

*  @return Array of created/updated MASConstraints

*/

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

mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错

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

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

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

其次 equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO

#define mas_equalTo(...)                equalTo(MASBoxValue((__VA_ARGS__)))

#define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define mas_lessThanOrEqualTo(...)      lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))

#ifdef MAS_SHORTHAND_GLOBALS

#define equalTo(...)                    mas_equalTo(__VA_ARGS__)

#define greaterThanOrEqualTo(...)        mas_greaterThanOrEqualTo(__VA_ARGS__)

#define lessThanOrEqualTo(...)          mas_lessThanOrEqualTo(__VA_ARGS__)

#define offset(...)                      mas_offset(__VA_ARGS__)

#endif

可以看到 mas_equalTo只是对其参数进行了一个BOX操作(装箱) MASBoxValue的定义具体可以看看源代码 太长就不贴出来了

所支持的类型 除了NSNumber支持的那些数值类型之外 就只支持CGPoint CGSize UIEdgeInsets

2.让一个View略小于其SuperView（边距10）

UIView *sv1 = [UIView new];

sv1.backgroundColor = [UIColor redColor];

[sv addSubview:sv1];

[sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

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

/*等价于

make.top.equalTo(sv).with.offset(10);

make.left.equalTo(sv).with.offset(10);

make.bottom.equalTo(sv).with.offset(-10);

make.right.equalTo(sv).with.offset(-10);

*/

/*也等价于

make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

*/

}];

代码效果

可以看到 edges 其实就是top,left,bottom,right的一个简化 分开写也可以 一句话更省事

那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值 计算的bottom需要小鱼sv的底部高度 所以要-10 同理用于right

3.让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10（自动计算其宽度）

int padding1 = 10;

UIView *sv2 = [UIView new];

sv2.backgroundColor = [UIColor yellowColor];

[sv addSubview:sv2];

UIView *sv3 = [UIView new];

sv3.backgroundColor = [UIColor yellowColor];

[sv addSubview:sv3];

[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);

}];

代码效果

这里我们在两个子view之间互相设置的约束 可以看到他们的宽度在约束下自动的被计算出来了

4.在UIScrollView顺序排列一些View并自动计算contentSize

UIScrollView *scrollView = [UIScrollView new];

scrollView.backgroundColor = [UIColor whiteColor];

[sv addSubview:scrollView];

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(sv).width.insets(UIEdgeInsetsMake(5, 5, 5, 5));

}];

UIView *container = [UIView new];

[scrollView addSubview:container];

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(scrollView);

make.width.equalTo(scrollView);

}];

int count = 10;

UIView *lastView = nil;

for (int i = 1; i <= count; ++i) {

UIView *subv = [UIView new];

[container addSubview:subv];

subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )

saturation:( arc4random() % 128 / 256.0 ) + 0.5

brightness:( arc4random() % 128 / 256.0 ) + 0.5

alpha:1];

[subv mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.and.right.equalTo(container);

make.height.mas_equalTo(@(20 * i));

if (lastView) {

make.top.mas_equalTo(lastView.mas_bottom);

}else{

make.top.mas_equalTo(container.mas_top);

}

}];

lastView = subv;

}

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.bottom.equalTo(lastView.mas_bottom);

}];

头部效果

尾部效果

从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了

这里的关键就在于container这个view起到了一个中间层的作用 能够自动的计算uiscrollView的contentSize

Masonry的基本介绍就是这样