一、Masonry简介
Masonry是一个轻量级的布局框架,它拥有自己的描述语法(采用更优雅的链式语法封装)来自动布局,具有很好可读性且同时支持iOS和Max OS X等。
二、Masonry的基本使用方法
- [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
- //这个方法只会添加新的约束
- }];
-
- [控件 mas_remakeConstraints:^(MASConstraintMaker *make) {
- //这个方法会将以前的约束全部删除,添加新的约束
- }];
-
- [控件 mas_updateConstraints:^(MASConstraintMaker *make) {
- //这个方法将会覆盖以前的某些特定的约束
- }];
三、约束的基本属性
- @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;
四、约束的特殊属性
- //(top, left, bottom, right)
-
- @property (nonatomic, strong, readonly) MASConstraint *edges;
-
- //(width, height)
-
- @property (nonatomic, strong, readonly) MASConstraint *size;
-
- //(centerX, centerY)
-
- @property (nonatomic, strong, readonly) MASConstraint *center;
五、基本使用
//加入这个宏,可以省略所有 mas_ (除了mas_equalTo)
#define MAS_SHORTHAND
//加入这个宏,那么mas_equalTo就和equalTo一样的了
#define MAS_SHORTHAND_GLOBALS
//上面的两个宏一定要在这句之前
#import
//创建发起会话弹框
UIView *tipView = [[UIView alloc]init];
tipView.backgroundColor=[UIColor greenColor];
//self.tipView.frame=CGRectMake(0, 0, K_CC_SCREEN_WIDTH, 35);
//先添加,再设置约束,否则报错
[self.view addSubview:tipView];
[tipView mas_makeConstraints:^(MASConstraintMaker *make) {
//1、设置tipView的中心点x等于self.view的中心点的x
//make.centerX.equalTo(self.view);
//设置tipView等顶部等于self.view的顶部,同时偏移30
//make.top.equalTo(self.view).offset(30);
//设置宽和高
//make.size.mas_equalTo(CGSizeMake(300, 200));
//2、设置tipView的中心点等于self.view的中心点
//make.center.equalTo(self.view);
//等同于下面
//make.centerX.mas_equalTo(self.view.mas_centerX);
//make.centerY.mas_equalTo(self.view.mas_centerY);
//设置宽和高
//make.size.mas_equalTo(CGSizeMake(300, 200));
//3、注意mas_equalTo后面对应的是数值,equalTo后面跟的是一个对象
//4、设置tipView的宽和高
//make.size.mas_equalTo(CGSizeMake(300, 200));
//make.width.mas_equalTo(300);
//make.height.mas_equalTo(200);
//右边距20,x轴向左是正数,向右是负数
//make.right.equalTo(self.view).offset(-20);
//底部边距20
//make.bottom.equalTo(self.view).offset(-20);
//5、tipView的宽和高等于父控件的一半
/*make.size.equalTo(self.view).multipliedBy(0.5);
make.right.mas_equalTo(self.view.mas_right).offset(-20);
make.bottom.mas_equalTo(self.view.mas_bottom).offset(-20);*/
//6、距离各个边距50
/*make.left.mas_equalTo(self.view.mas_left).offset(50);
make.top.mas_equalTo(self.view.mas_top).offset(50);
make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);
make.right.mas_equalTo(self.view.mas_right).offset(-50);*/
/*make.left.mas_equalTo(50);
make.top.mas_equalTo(50);
make.bottom.mas_equalTo(-50);
make.right.mas_equalTo(-50);*/
//此时设置的是数值,不用算正负
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
}];
//警告内容
UILabel *lblTip = [[UILabel alloc]init];
lblTip.backgroundColor = [UIColor clearColor];
lblTip.textColor=[UIColor blackColor];
lblTip.textAlignment = NSTextAlignmentCenter;
lblTip.font = [UIFont systemFontOfSize:15];
lblTip.adjustsFontSizeToFitWidth = YES;
//lblTip.frame = CGRectMake(0, 0, K_CC_SCREEN_WIDTH, 35);
lblTip.text = @"只能选择使用群策的用户进行聊天";
[tipView addSubview:lblTip];
// [lblTip mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(390);
// make.height.mas_equalTo(18);
// make.centerX.mas_equalTo(self.tipView.mas_centerX);
// make.centerY.mas_equalTo(self.tipView.mas_centerY);
// }];
[lblTip mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(tipView);
make.width.mas_equalTo(200);
make.height.mas_equalTo(18);
}];
//警告图标
UIImageView *imageTip = [[UIImageView alloc]init];
[imageTip setImage:[UIImage imageNamed:@"群策警告"]];
[tipView addSubview:imageTip];
// [imageTip mas_makeConstraints:^(MASConstraintMaker *make) {
// make.width.mas_equalTo(15);
// make.height.mas_equalTo(15);
// make.right.mas_equalTo(lblTip.mas_left).offset(-5);
// make.top.mas_equalTo(10);
// }];
[imageTip mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(15);
make.height.mas_equalTo(15);
make.right.mas_equalTo(lblTip.mas_left).offset(-5);
make.centerY.equalTo(tipView.mas_centerY);
}];