Masonry
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 文本基线
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 所以可以忽略)
*/
/*
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
*/
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/
//如果你想要用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);
}];
#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);
//
// }];
VFL:在swift中
自动布局
// 默认情况下,translatesAutoresizingMaskIntoConstraints = true,表示用 frame 去设置控件位置,设置为false 为用VFL自动布局 snapKit 也是这样的
nameText.translatesAutoresizingMaskIntoConstraints = false
phoneText.translatesAutoresizingMaskIntoConstraints = false
//自动布局
// 使用 VFL 可视化布局语言
// H 水平
// V 垂直
// | 表示边界
// views 字典: 用处关联 VFL 和界面控件的 H:|-20-[name]-20- 表示水平距离左右两边的边界各20,
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-20-[name]-20-|",
options: [],
metrics: nil,
views: ["name": nameText]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-20-[phone]-20-|",
options: [],
metrics: nil,
views: ["phone": phoneText]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"V:|-100-[name]-20-[phone]",
options: [],
metrics: nil,
views: ["name": nameText, "phone": phoneText]))
// 使用 VFL 可视化布局语言
// H 水平
// V 垂直
// | 表示边界
// views 字典: 用处关联 VFL 和界面控件的 H:|-20-[name]-20- 表示水平距离左右两边的边界各20,
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-20-[name]-20-|",
options: [],
metrics: nil,
views: ["name": nameText]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-20-[phone]-20-|",
options: [],
metrics: nil,
views: ["phone": phoneText]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"V:|-100-[name]-20-[phone]",
options: [],
metrics: nil,
views: ["name": nameText, "phone": phoneText]))
snapKit :自动布局 在swift中
// 2. 自动布局
// 1> 参照属性一致,可以省略
// 2> 参照属性不一致,使用 snp_参照属性的格式
例子:
// 图标视图
iconView.snp_makeConstraints { (make) -> Voidin
make.centerX.equalTo(self)
make.centerY.equalTo(self).offset(-60)
}
// 小房子视图
homeIconView.snp_makeConstraints { (make) -> Voidin
make.center.equalTo(iconView)
make.centerX.equalTo(self)
make.centerY.equalTo(self).offset(-60)
}
// 小房子视图
homeIconView.snp_makeConstraints { (make) -> Voidin
make.center.equalTo(iconView)
}
// 提示文字
messageLabel.snp_makeConstraints { (make) -> Voidin
make.centerX.equalTo(iconView)
make.top.equalTo(iconView.snp_bottom).offset(20)
make.size.equalTo(CGSize(width: 224, height: 36))
}
// 注册按钮
registerButton.snp_makeConstraints { (make) -> Voidin
make.top.equalTo(messageLabel.snp_bottom).offset(20)
make.left.equalTo(messageLabel)
make.size.equalTo(CGSize(width: 100, height: 36))
}
// 登录按钮
loginButton.snp_makeConstraints { (make) -> Voidin
make.right.equalTo(messageLabel)
make.top.equalTo(registerButton)
make.size.equalTo(registerButton)
}
// 遮罩视图
maskIconView.snp_makeConstraints { (make) -> Voidin
make.left.equalTo(self)
make.right.equalTo(self)
make.top.equalTo(self)
make.bottom.equalTo(registerButton)
make.centerX.equalTo(iconView)
make.top.equalTo(iconView.snp_bottom).offset(20)
make.size.equalTo(CGSize(width: 224, height: 36))
}
// 注册按钮
registerButton.snp_makeConstraints { (make) -> Voidin
make.top.equalTo(messageLabel.snp_bottom).offset(20)
make.left.equalTo(messageLabel)
make.size.equalTo(CGSize(width: 100, height: 36))
}
// 登录按钮
loginButton.snp_makeConstraints { (make) -> Voidin
make.right.equalTo(messageLabel)
make.top.equalTo(registerButton)
make.size.equalTo(registerButton)
}
// 遮罩视图
maskIconView.snp_makeConstraints { (make) -> Voidin
make.left.equalTo(self)
make.right.equalTo(self)
make.top.equalTo(self)
make.bottom.equalTo(registerButton)
}