|
首先，在正式使用Masonry之前,我們先來(lái)看看在xib中我們是如何使用AutoLayout 從圖中我們可以看出,只要設(shè)置相應(yīng)得局限，控制好父視圖與子視圖之間的關(guān)系就應(yīng)該很ok的拖出你需要的需求。這里就不詳細(xì)講解具體拖拽的方法..... 然后,我們按著上圖的屬性來(lái)看看如何簡(jiǎn)單得使用Masonry 這里是Masonry給我們的屬性
@property (nonatomic, strong, readonly) MASConstraint *left; //左側(cè)
@property (nonatomic, strong, readonly) MASConstraint *top; //上側(cè)
@property (nonatomic, strong, readonly) MASConstraint *right; //右側(cè)
@property (nonatomic, strong, readonly) MASConstraint *bottom; //下側(cè)
@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; //文本基線
屬性有了,接著我們應(yīng)該怎么在視圖中添加約束呢，Masonry給我們提供了3個(gè)方法
//新增約束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//更新約束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//清楚之前的所有約束,只會(huì)保留最新的約束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
合理的利用這個(gè)3個(gè)函數(shù)，基本上可以應(yīng)對(duì)任何情況了
準(zhǔn)備工作已經(jīng)完成，我們來(lái)看幾個(gè)小demo 1.居中一個(gè)view // 防止block中的循環(huán)引用
__weak typeof (self) weakSelf = self;
// 初始化一個(gè)View
UIView *bgView = [[UIView alloc]init];
bgView.backgroundColor = [UIColor redColor];
[self.view addSubview:bgView];
// 使用mas_makeConstraints添加約束
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.size.mas_equalTo(CGSizeMake(200, 200));
}]；
 效果圖1
是不是很簡(jiǎn)單，這里有一點(diǎn)要必須注意下，添加約束前必須要把view添加到視圖上。 那我要是不想固定他得寬高呢，讓view的大小根據(jù)間距來(lái)控制怎么做 我們來(lái)設(shè)置一個(gè)基于父視圖間距為10的view
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
}]；
這樣就ok了?。?！ make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
等同于
make.top.equalTo(weakSelf.view).with.offset(10);
make.left.equalTo(weakSelf.view).with.offset(10);
make.bottom.equalTo(weakSelf.view).with.offset(-10);
make.right.equalTo(weakSelf.view).with.offset(-10);
2.多個(gè)view 2個(gè)view橫向居中，第二個(gè)view距離第一個(gè)view間距為10 UIView *view1 = [[UIButton alloc]init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(90, 90));
make.centerX.equalTo(weakSelf.view);
make.top.width.offset(90);
}];
UIView *view2 = [[UILabel alloc]init];
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(100, 100));
make.centerX.equalTo(view1);
make.top.equalTo(view1.mas_bottom).with.offset(20);
}];
 效果圖2
大家有沒(méi)有看到第二個(gè)view代碼中 make.top.equalTo(view1.mas_bottom).with.offset(20); view1.mas_bottom 是什么意思呢？如果只寫view1，Masonry會(huì)默認(rèn)是view1中最上面開(kāi)始算起，也就是view2 間距view1 Y軸開(kāi)始20的間距 通過(guò)這個(gè)也就可以很方便的設(shè)置view同另一個(gè)view之間上下左右的間距了 大家不妨試試view.mas_top view.mas_left view.mas_right 的效果是什么樣得了
下面我附上一個(gè)完整的界面demo,大家可以看看
 效果圖3
代碼如下： - (void)setupFrame {
__weak typeof(self) weakSelf = self;
//上傳頭像
UIButton *iconBtn = [[UIButton alloc]init];
[iconBtn setCornerRadius:45];
[iconBtn setBackgroundImage:[UIImage imageNamed:@"huantouxiang"] forState:UIControlStateNormal];
[iconBtn addTarget:self action:@selector(iconButton) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:iconBtn];
self.iconBtn = iconBtn;
[self.iconBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(90, 90));
make.centerX.equalTo(weakSelf.view);
make.top.width.offset(90);
}];
//上傳社區(qū)頭像文字提醒
UILabel *iconLabel = [[UILabel alloc]init];
iconLabel.textColor = c3;
iconLabel.text = @"上傳社團(tuán)頭像";
iconLabel.font = [UIFont systemFontOfSize:15];
[self.view addSubview:iconLabel];
[iconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(iconBtn);
make.top.equalTo(iconBtn.mas_bottom).with.offset(20);
}];
//社團(tuán)編輯圖標(biāo)
UIImageView *editIcon = [[UIImageView alloc]init];
editIcon.image = [UIImage imageNamed:@"bianxie"];
[self.view addSubview:editIcon];
[editIcon mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(25, 20));
make.left.equalTo(weakSelf.view).with.offset(10);
make.top.equalTo(iconLabel.mas_bottom).with.offset(30);
}];
//社團(tuán)名
UITextField *nameText = [[UITextField alloc]init];
nameText.placeholder = @"請(qǐng)?zhí)顚懮鐓^(qū)名(社團(tuán)名最多6個(gè)字)";
[self.view addSubview:nameText];
self.nameText = nameText;
[nameText mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@20);
make.centerY.equalTo(editIcon);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.left.equalTo(editIcon.mas_right).with.offset(5);
}];
//分割線
UIImageView *xian = [[UIImageView alloc]init];
xian.backgroundColor = DBColor(226, 226, 226);
[self.view addSubview:xian];
[xian mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@1);
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(editIcon.mas_bottom).with.offset(5);
}];
//選擇標(biāo)簽
UILabel *tagLabel = [[UILabel alloc]init];
tagLabel.text = @"選擇標(biāo)簽";
tagLabel.textColor = c3;
tagLabel.font = [UIFont systemFontOfSize:15];
[self.view addSubview:tagLabel];
[tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@20);
make.width.mas_equalTo(@60);
make.left.equalTo(weakSelf.view).with.offset(10);
make.top.equalTo(xian).with.offset(35);
}];
//跳轉(zhuǎn)標(biāo)簽選擇
UITextField *tagText = [[UITextField alloc]init];
tagText.placeholder = @"美容顏";
tagText.borderStyle=UITextBorderStyleRoundedRect;
tagText.delegate = self;
[tagText addTarget:self action:@selector(textTag) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:tagText];
[tagText mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(tagLabel);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.left.equalTo(tagLabel.mas_right).with.offset(5);
}];
//tagView
self.tagView = ({
SKTagView *view = [SKTagView new];
view.backgroundColor = [UIColor clearColor];
view.padding = UIEdgeInsetsMake(0, 0, 0, 0);
view.insets = 15;
view.lineSpace = 10;
__weak SKTagView *weakView = view;
view.didClickTagAtIndex = ^(NSUInteger index){
//Remove tag
[weakView removeTagAtIndex:index];
};
view;
});
[self.view addSubview:self.tagView];
[self.tagView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(tagText.mas_bottom).with.offset(10);
}];
//label標(biāo)識(shí)語(yǔ)
UILabel *label = [[UILabel alloc]init];
label.font = [UIFont systemFontOfSize:13];
label.textColor = [UIColor redColor];
label.text = @"PS:成員和視頻越多得社團(tuán)越容易被發(fā)現(xiàn)!";
[self.view addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(self.tagView.mas_bottom).with.offset(20);
}];
UIButton *commitBtn = [[UIButton alloc]init];
[commitBtn setCornerRadius:5];
[commitBtn setBorderWidth:1 color:DBTextThemeColor];
[commitBtn setTitleColor:DBTextThemeColor forState:UIControlStateNormal];
commitBtn.titleLabel.font = [UIFont systemFontOfSize:15];
[commitBtn setTitle:@"確認(rèn)發(fā)布" forState:UIControlStateNormal];
[commitBtn addTarget:self action:@selector(commitButton) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:commitBtn];
[commitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@30);
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(label.mas_bottom).with.offset(50);
}];
}
第一次寫博客，寫的比較亂 。 希望大家多多提意見(jiàn)......
|
