Masonry
1.
Masonry
基本概念
》 Masonry , “ 一个轻量级的布局框架,采用更 " 优雅 " 的语法封装自动布局 ” ,不需要使用 XIB 和 Storyboard , 并具有高可读性 而且同时支持 iOS 和 Max OS X
Masonry 尤其适合习惯纯代码开发的开发者 ,在 iPhone6 发布后引发的适配潮中 Masonry 一定可以助你一臂之力
》框架下载地址
https: //github.com/Masonry/Masonry
》常用属性含义( View+MASShorthandAdditions.h )
/*
View+MASShorthandAdditions 中属性与 NSLayoutAttrubute 的对照表如下
Masonry NSAutoLayout 说明
left NSLayoutAttributeLeft 左侧
top NSLayoutAttributeTop 上侧
right NSLayoutAttributeRight 右侧
bottom NSLayoutAttributeBottom 下侧
leading NSLayoutAttributeLeading 首部
trailing NSLayoutAttributeTrailing 尾部
width NSLayoutAttributeWidth 宽
height NSLayoutAttributeHeight 高
centerX NSLayoutAttributeCenterX 横向中点
centerY NSLayoutAttributeCenterY 纵向中点
baseline NSLayoutAttributeBaseline 文本基线
注意: iOS8 中新增的属性 Masonry 暂时还不支持 ( 江哥提示:现阶段我们开发的 APP 要支持 ios6,ios7 所以可以忽略 )
*/
2. Masonry 基本使用
》利用代码实现在控制器上添加一个控件, 宽高等于 200 并且永远在屏幕中间
》利用 VFL 实现如上
》用 Masonry 实现如上
3. Masonry 常用方法
》三个添加约束方法区别
/*
mas_makeConstraints 只负责新增约束 Autolayout 不能同时存在两条针对于同一对象的约束 否则会报错
mas_updateConstraints 针对上面的情况 会更新在 block 中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
三种函数善加利用 就可以应对各种情况了
*/
》两个赋值方法区别( equalTo 和 mas_equalTo )
/*
#define equalTo(...) mas_equalTo(__VA_ARGS__)
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
mas_equalTo 对其参数进行了一个自动装箱操作, 除了支持 NSNumber 数值类型之外还支持 CGPoint CGSize UIEdgeInsets
*/
http: //adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/
iOS8 新特性介绍:
》 Masonry , “ 一个轻量级的布局框架,采用更 " 优雅 " 的语法封装自动布局 ” ,不需要使用 XIB 和 Storyboard , 并具有高可读性 而且同时支持 iOS 和 Max OS X
Masonry 尤其适合习惯纯代码开发的开发者 ,在 iPhone6 发布后引发的适配潮中 Masonry 一定可以助你一臂之力
》框架下载地址
https: //github.com/Masonry/Masonry
》常用属性含义( View+MASShorthandAdditions.h )
/*
View+MASShorthandAdditions 中属性与 NSLayoutAttrubute 的对照表如下
Masonry NSAutoLayout 说明
left NSLayoutAttributeLeft 左侧
top NSLayoutAttributeTop 上侧
right NSLayoutAttributeRight 右侧
bottom NSLayoutAttributeBottom 下侧
leading NSLayoutAttributeLeading 首部
trailing NSLayoutAttributeTrailing 尾部
width NSLayoutAttributeWidth 宽
height NSLayoutAttributeHeight 高
centerX NSLayoutAttributeCenterX 横向中点
centerY NSLayoutAttributeCenterY 纵向中点
baseline NSLayoutAttributeBaseline 文本基线
注意: iOS8 中新增的属性 Masonry 暂时还不支持 ( 江哥提示:现阶段我们开发的 APP 要支持 ios6,ios7 所以可以忽略 )
*/
2. Masonry 基本使用
》利用代码实现在控制器上添加一个控件, 宽高等于 200 并且永远在屏幕中间
》利用 VFL 实现如上
》用 Masonry 实现如上
3. Masonry 常用方法
》三个添加约束方法区别
/*
mas_makeConstraints 只负责新增约束 Autolayout 不能同时存在两条针对于同一对象的约束 否则会报错
mas_updateConstraints 针对上面的情况 会更新在 block 中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
三种函数善加利用 就可以应对各种情况了
*/
》两个赋值方法区别( equalTo 和 mas_equalTo )
/*
#define equalTo(...) mas_equalTo(__VA_ARGS__)
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
mas_equalTo 对其参数进行了一个自动装箱操作, 除了支持 NSNumber 数值类型之外还支持 CGPoint CGSize UIEdgeInsets
*/
http: //adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/
iOS8 新特性介绍:
https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewIniOS/Articles/iOS8.html#//apple_ref/doc/uid/TP40014205-SW1
masonry 的几种创建方法:
//
如果你想要用
masonry,
但是不想使用
mas
前缀,我们就可以定义这个宏
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
// 使用框架的第一件事情,把头文件导入我们新建的工程中
@end
@implementation ViewController
- ( void )viewDidLoad {
[ super viewDidLoad ];
// Do any additional setup after loading the view, typically from a nib.
// 1. 创建一个红色的 view
UIView *redView = [[ UIView alloc ] init ];
redView. backgroundColor = [ UIColor redColor ];
[ self . view addSubview :redView];
// [redView mas_makeConstraints:^(MASConstraintMaker *make) {
1. 第一种写法
make.top.equalTo(self.view.mas_top).offset(20);
make.left.equalTo(self.view.mas_left).offset(20);
make.right.equalTo(self.view.mas_right).offset(-20);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);
2. 第二种写法
make.top.equalTo(self.view).offset(20);
make.left.equalTo(self.view).offset(20);
make.right.equalTo(self.view).offset(-20);
make.bottom.equalTo(self.view).offset(-20);
3. 第三种写法
// make.top.left.equalTo(self.view).offset(20);
// make.right.bottom.equalTo(self.view).offset(-20);
//
4. 第四种写法
// make.edges = UIEdgeInsetsMake(20, 20, 20, 20);\
[redView mas_makeConstraints :^( MASConstraintMaker *make) {
// make.top.equalTo(self.view.mas_top).offset(20);
// make.left.equalTo(self.view.mas_left).offset(20);
// make.right.equalTo(self.view.mas_right).offset(-20);
// make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//
// make.top.equalTo(self.view).offset(20);
// make.left.equalTo(self.view).offset(20);
// make.right.equalTo(self.view).offset(-20);
// make.bottom.equalTo(self.view).offset(-20);
make. top . left . equalTo ( self . view ). offset ( 20 );
make. right . bottom . equalTo ( self . view ). offset (- 20 );
}];
// 更新约束
[redView updateConstraints :^( MASConstraintMaker *make) {
make. top . left . equalTo ( self . view ). offset ( 80 );
}];
// 新建新的约束
[redView remakeConstraints :^( MASConstraintMaker *make) {
make. top . left . equalTo ( self . view ). offset ( 150 );
make. right . bottom . equalTo ( self . view ). offset (- 150 );
}];
//
//
// }];
// [redView makeConstraints:^(MASConstraintMaker *make) {
// 1. 第一种写法
// make.top.equalTo(self.view.mas_top).offset(20);
// make.left.equalTo(self.view.mas_left).offset(20);
// make.right.equalTo(self.view.mas_right).offset(-20);
// make.bottom.equalTo(self.view.mas_bottom).offset(-20);
// make.edges.mas_equalTo(20,20,20,20);/\
// 4. 第四种写法
// make.edges.insets = UIEdgeInsetsMake(20, 20, 20, 20);
// }];
// [redView makeConstraints:^(MASConstraintMaker *make) {
// // }];
// 5. 更新约束
// [redView updateConstraints:^(MASConstraintMaker *make) {
// make.top.equalTo(self.view.mas_top).offset(100);
//
// }];
// 删除旧的约束,新建新的约束
// [redView remakeConstraints:^(MASConstraintMaker *make) {
// make.top.equalTo(self.view.mas_top).offset(50);
// make.left.equalTo(self.view.mas_left).offset(50);
// make.right.equalTo(self.view.mas_right).offset(-20);
// make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//
// }];
#define MAS_SHORTHAND
#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
// 使用框架的第一件事情,把头文件导入我们新建的工程中
@end
@implementation ViewController
- ( void )viewDidLoad {
[ super viewDidLoad ];
// Do any additional setup after loading the view, typically from a nib.
// 1. 创建一个红色的 view
UIView *redView = [[ UIView alloc ] init ];
redView. backgroundColor = [ UIColor redColor ];
[ self . view addSubview :redView];
// [redView mas_makeConstraints:^(MASConstraintMaker *make) {
1. 第一种写法
make.top.equalTo(self.view.mas_top).offset(20);
make.left.equalTo(self.view.mas_left).offset(20);
make.right.equalTo(self.view.mas_right).offset(-20);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);
2. 第二种写法
make.top.equalTo(self.view).offset(20);
make.left.equalTo(self.view).offset(20);
make.right.equalTo(self.view).offset(-20);
make.bottom.equalTo(self.view).offset(-20);
3. 第三种写法
// make.top.left.equalTo(self.view).offset(20);
// make.right.bottom.equalTo(self.view).offset(-20);
//
4. 第四种写法
// make.edges = UIEdgeInsetsMake(20, 20, 20, 20);\
[redView mas_makeConstraints :^( MASConstraintMaker *make) {
// make.top.equalTo(self.view.mas_top).offset(20);
// make.left.equalTo(self.view.mas_left).offset(20);
// make.right.equalTo(self.view.mas_right).offset(-20);
// make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//
// make.top.equalTo(self.view).offset(20);
// make.left.equalTo(self.view).offset(20);
// make.right.equalTo(self.view).offset(-20);
// make.bottom.equalTo(self.view).offset(-20);
make. top . left . equalTo ( self . view ). offset ( 20 );
make. right . bottom . equalTo ( self . view ). offset (- 20 );
}];
// 更新约束
[redView updateConstraints :^( MASConstraintMaker *make) {
make. top . left . equalTo ( self . view ). offset ( 80 );
}];
// 新建新的约束
[redView remakeConstraints :^( MASConstraintMaker *make) {
make. top . left . equalTo ( self . view ). offset ( 150 );
make. right . bottom . equalTo ( self . view ). offset (- 150 );
}];
//
//
// }];
// [redView makeConstraints:^(MASConstraintMaker *make) {
// 1. 第一种写法
// make.top.equalTo(self.view.mas_top).offset(20);
// make.left.equalTo(self.view.mas_left).offset(20);
// make.right.equalTo(self.view.mas_right).offset(-20);
// make.bottom.equalTo(self.view.mas_bottom).offset(-20);
// make.edges.mas_equalTo(20,20,20,20);/\
// 4. 第四种写法
// make.edges.insets = UIEdgeInsetsMake(20, 20, 20, 20);
// }];
// [redView makeConstraints:^(MASConstraintMaker *make) {
// // }];
// 5. 更新约束
// [redView updateConstraints:^(MASConstraintMaker *make) {
// make.top.equalTo(self.view.mas_top).offset(100);
//
// }];
// 删除旧的约束,新建新的约束
// [redView remakeConstraints:^(MASConstraintMaker *make) {
// make.top.equalTo(self.view.mas_top).offset(50);
// make.left.equalTo(self.view.mas_left).offset(50);
// make.right.equalTo(self.view.mas_right).offset(-20);
// make.bottom.equalTo(self.view.mas_bottom).offset(-20);
//
// }];
}