- 九宮格
類似九宮格效果：
意思就是一排3個(gè)一共三排 寬度自適應(yīng)
本文Demo
以及@劉棟 棟神的Demo Demo
效果如下：
豎屏
代碼實(shí)現(xiàn)：
// 創(chuàng)建一個(gè)空view 代表上一個(gè)view
__block UIView *lastView = nil;
// 間距為10
int intes = 10;
// 每行3個(gè)
int num = 3;
// 循環(huán)創(chuàng)建view
for (int i = 0; i < 12; i++) {
UIView *view = [UIView new];
[self.view addSubview:view];
view.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0 ) saturation:( arc4random() % 128 / 256.0 ) + 0.5
brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:0.2];
// 添加約束
[view mas_makeConstraints:^(MASConstraintMaker *make) {
// 給個(gè)高度約束
make.height.mas_equalTo(80);
// 1. 判斷是否存在上一個(gè)view
if (lastView) {
// 存在的話寬度與上一個(gè)寬度相同
make.width.equalTo(lastView);
} else {
// 否則計(jì)算寬度 ０妗！孕荠！此處的判斷條件是為了避免 最后一列約束沖突
/**
* 這里可能大家會(huì)問 為什么上面我說最后一列會(huì)有沖突灰羽？
* 如果不添加判斷的話會(huì)造成：
* 1添加了寬度約束 2所有列加了左側(cè)約束 第3步給 最后一列添加了右側(cè)約束
* 這里最后一列既有左側(cè)約束又有右側(cè)約束還有寬度約束 會(huì)造成約束沖突
* 所以這里添加寬度時(shí)將最后一列剔除
*/
if (i % num != 0) {
make.width.mas_equalTo((view.superview.frame.size.width - (num + 1)* intes)/4);
}
}
// 2. 判斷是否是第一列
if (i % num == 0) {
// 一：是第一列時(shí) 添加左側(cè)與父視圖左側(cè)約束
make.left.mas_equalTo(view.superview).offset(intes);
} else {
// 二： 不是第一列時(shí) 添加左側(cè)與上個(gè)view左側(cè)約束
make.left.mas_equalTo(lastView.mas_right).offset(intes);
}
// 3. 判斷是否是最后一列 給最后一列添加與父視圖右邊約束
if (i % num == (num - 1)) {
make.right.mas_equalTo(view.superview).offset(-intes);
}
// 4. 判斷是否為第一列
if (i / num == 0) {
// 第一列添加頂部約束
make.top.mas_equalTo(view.superview).offset(intes*10);
} else {
// 其余添加頂部約束 intes*10 是我留出的距頂部高度
make.top.mas_equalTo(intes * 10 + ( i / num )* (80 + intes));
}
}];
// 每次循環(huán)結(jié)束 此次的View為下次約束的基準(zhǔn)
lastView = view;
}
下面文章的參考來自 iOS122 非常感謝 地址
上面說明了Masonry不僅僅可以表達(dá)相等關(guān)系
看圖：
由上圖可以看出一些等價(jià)關(guān)系
equalTo == NSLayoutRelationEqual
mas_equalTo == NSLayoutRelationEqual
- 并且Masonry不止可以表達(dá)相等關(guān)系
greaterThanOrEqualTo == NSLayoutRelationGreaterThanOrEqual
mas_greaterThanOrEqualTo == NSLayoutRelationGreaterThanOrEqual
lessThanOrEqualTo == NSLayoutRelationLessThanOrEqual
mas_lessThanOrEqualTo == NSLayoutRelationLessThanOrEqual
所以如果你需要view的寬度在一定范圍內(nèi)：
make.width.greaterThanOrEqualTo(@100);
make.width.lessThanOrEqualTo(@150);
或者：
make.width.mas_greaterThanOrEqualTo(100);
make.width.mas_lessThanOrEqualTo(150);
如果你希望view.left大于或等于button.left
make.left.greaterThanOrEqualTo(button);
make.left.greaterThanOrEqualTo(button.mas_left);
make.left.mas_greaterThanOrEqualTo(button);
make.left.mas_greaterThanOrEqualTo(button.mas_left);
-
此外上面的文章還提到了利用數(shù)組表達(dá)三個(gè)view等高的情況
// 表達(dá)三個(gè)視圖等高的約束. make.height.equalTo(@[view1.mas_height, view2.mas_height]); make.height.equalTo(@[view1, view2]); 以及定義約束的優(yōu)先級(jí)
.priority 允許你指定一個(gè)精確的優(yōu)先級(jí),數(shù)值越大優(yōu)先級(jí)越高.最高1000.
.priorityHigh 等價(jià)于 UILayoutPriorityDefaultHigh.優(yōu)先級(jí)值為 750.
.priorityMedium 介于高優(yōu)先級(jí)和低優(yōu)先級(jí)之間,優(yōu)先級(jí)值在 250~750之間.
.priorityLow 等價(jià)于 UILayoutPriorityDefaultLow, 優(yōu)先級(jí)值為 250.
優(yōu)先級(jí)可以在約束尾部添加：
make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);
- Masonry還可以支持兩個(gè)View等比例變化
multipliedBy允許你指定一個(gè)兩個(gè)視圖的某個(gè)屬性等比例變化item1.attribute1 = multiplier × item2.attribute2 + constant,此為約束的計(jì)算公式,.multipliedBy本質(zhì)上是用來限定multiplier的.
但是因?yàn)樽鴺?biāo)系的原點(diǎn)是左上角開始的暖眼，所以指定基于父視圖的left或者top的multiplier是沒有意義的,因?yàn)楦敢晥D的left和top總為0.
如果你需要一個(gè)視圖隨著父視圖的寬度和高度,位置自動(dòng)變化,你應(yīng)該同時(shí)指定 right,bottom,width,height與父視圖對(duì)應(yīng)屬性的比例(基于某個(gè)尺寸下的相對(duì)位置計(jì)算出的比例),并且constant必須為0.
// 寬度為父視圖的一半
make.width.equalTo(superview).multipliedBy(0.5);
-
此外除了上一篇Masonry初探提到的edges
還有其他比較方便的寫法：// width = superview.width + 100, height = superview.height - 50 make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))
比如之前對(duì)于center的偏移量一般會(huì)寫：
make.centerX.equalTo(self.view.mas_centerX).offset(-10);
make.centerY.equalTo(self.view.mas_centerY).offset(50);
其實(shí)可以這么寫：
make.center.equalTo(self.view).centerOffset(CGPointMake(-10, 50));
-
并且返回的約束和約束數(shù)組我們可以用屬性接收 方便操作
self.widthConstraint = make.width.equalTo(lastV.mas_width); [self.widthConstraint uninstall];
感謝@劉棟 同學(xué)以及@暮落晨曦 小僵尸同學(xué)的幫助
未完待續(xù)......
