這個(gè)第三方還是比較好用的铆隘,當(dāng)然你也可以使用XIB,但是在有些場(chǎng)景下南用,Masonry更為好用膀钠,比如說(shuō)此時(shí)你創(chuàng)建的視圖并不是全局屬性,或者是所添加的視圖是在某些情況下才會(huì)創(chuàng)建裹虫,也就是說(shuō)這個(gè)視圖是局部變量肿嘲,而此時(shí)用XIB就很牽強(qiáng)了。所以筑公,Masonry這時(shí)候就果斷的站出來(lái)了蜜徽,他可以直接進(jìn)行局部變量的布局躏救,而且布局思路和XIB的約束也是有些類似堕油,但是他是純代碼哦女气,也比較好懂,用的是鏈?zhǔn)降暮?jiǎn)單語(yǔ)言耸采。這里要注意的是 語(yǔ)句中的and 和 with 實(shí)際上時(shí)無(wú)意義的兴泥,只是便于我們?nèi)ダ斫獯a的意思。說(shuō)了這么多虾宇,直接來(lái)代碼給你們解釋Zzzz
我也是慢慢的學(xué)習(xí),所以這篇文章還會(huì)一直補(bǔ)充如绸,希望不要斷了嘱朽。。怔接。搪泳。
我就直接上代碼了,不解釋太多了扼脐,代碼里面有很多注釋岸军,還是比較詳細(xì)的。
這個(gè)代碼是直接寫(xiě)在控制器的ViewDidLoad方法里面的
說(shuō)下我遇到的大坑吧瓦侮,就是在設(shè)置布局的時(shí)候艰赞,一定要進(jìn)行添加,其實(shí)添加到哪個(gè)視圖上影響的只是視圖的層次關(guān)系肚吏,并不是他的布局方妖,具體的布局還是要看 make.edges.equalTo(view1) 這句,這里是將布局的相對(duì)對(duì)象設(shè)置成view1了
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
#pragma mark ---- 一個(gè)視圖在另一個(gè)視圖上的布局 -----
UIView *view1 = [UIView new];
view1.backgroundColor = [UIColor redColor];
// 要有一個(gè)父視圖
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 將圖形設(shè)置居中(在self.view)中
make.center.equalTo(self.view);
// 設(shè)置尺寸
make.size.mas_equalTo(CGSizeMake(350, 350));
}];
//
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor cyanColor];
// 要有一個(gè)父視圖罚攀,這個(gè)只是圖層的關(guān)系党觅,布局還是和make.edges.equalTo(view1) 對(duì)象有關(guān)
[view1 addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
// 這里的make 就相當(dāng)于調(diào)用對(duì)象view2
// equalTo(對(duì)象), 這里指的是相對(duì)布局對(duì)象
// 注意這里是with 是一種鏈?zhǔn)降淖匀徽Z(yǔ)言
// 上左下右
make.edges.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
// 可以看到 edges 其實(shí)就是top,left,bottom,right的一個(gè)簡(jiǎn)化 分開(kāi)寫(xiě)也可以 一句話更省事
// 等價(jià)于
make.top.equalTo(view1).with.offset(10);
make.left.equalTo(view1).with.offset(10);
make.bottom.equalTo(view1).with.offset(-10);
make.right.equalTo(view1).with.offset(-10);
// 那么為什么bottom和right里的offset是負(fù)數(shù)呢? 因?yàn)檫@里計(jì)算的是絕對(duì)的數(shù)值 計(jì)算的bottom需要小于view1的底部高度 所以要-10 同理用于right
// 也等價(jià)于
//make.top.left.bottom.and.right.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
// - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
// - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
// - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
//mas_makeConstraints 只負(fù)責(zé)新增約束 Autolayout不能同時(shí)存在兩條針對(duì)于同一對(duì)象的約束 否則會(huì)報(bào)錯(cuò)
//mas_updateConstraints 針對(duì)上面的情況 會(huì)更新在block中出現(xiàn)的約束 不會(huì)導(dǎo)致出現(xiàn)兩個(gè)相同約束的情況
//mas_remakeConstraints 則會(huì)清除之前的所有約束 僅保留最新的約束
// 三種函數(shù)善加利用 就可以應(yīng)對(duì)各種情況了
#pragma mark ---- 兩個(gè)視圖在另一個(gè)視圖上的布局雌澄,自動(dòng)調(diào)整適應(yīng) -----
UIView *view3 = [[UIView alloc] init];
UIView *view4 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
view4.backgroundColor = [UIColor yellowColor];
// 要有一個(gè)父視圖
[view1 addSubview:view3];
[view1 addSubview:view4];
// 設(shè)置距離的變量
int padding = 10;
// 先對(duì)view3布局
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
// 這里只是兩個(gè)視圖在同一條水平線上,所以不用center.X
make.centerY.mas_equalTo(view1.mas_centerY);
// 這里是相對(duì)布局杯瞻,不需要設(shè)置距離底端和上端的距離镐牺,直接設(shè)置高度
// make.top.equalTo(self.view.mas_top).offset(padding);
// make.bottom.equalTo(self.view.mas_bottom).with.offset(- padding);
make.left.equalTo(view1.mas_left).with.offset(padding);
make.right.equalTo(view4.mas_left).with.offset(- padding);
// 設(shè)置高度的數(shù)值
// mas_equalTo 用來(lái)設(shè)置數(shù)值
// equalTo 是直接等于某個(gè)對(duì)象的數(shù)值
make.height.mas_equalTo(150);
// 設(shè)置和view4等寬
make.width.equalTo(view4);
}];
[view4 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(view1.mas_centerY);
make.left.equalTo(view3.mas_right).with.offset(padding);
make.right.equalTo(view1.mas_right).with.offset(- padding);
make.height.mas_equalTo(150);
make.width.equalTo(view3);
}];
貼張最后效果圖,視圖從最下到上一次是view1魁莉,view2睬涧,view3 +view4
OK 就到這里,我看明天有沒(méi)有空繼續(xù)補(bǔ)充吧沛厨,不定時(shí)補(bǔ)充~~~~
未完待續(xù)~~~~~~~~~