以前寫TimeLine中照片九宮格布局是直接計(jì)算frame购桑，今天想用自動(dòng)布局實(shí)現(xiàn)。
九宮格布局
使用自動(dòng)布局，首先就必須知道給出了哪些條件。一般在TimeLine中照片九宮格布局給出的已知條件為：
- 每個(gè)單元的寬cellWidth午磁；
- 每個(gè)單元的高cellHeight；
- 每行有幾個(gè)單元numPerRow毡们；
- 總共單元個(gè)數(shù)totalNum迅皇；
- 每個(gè)單元與邊界間距viewPadding；
- 每個(gè)單元之間的間距viewPaddingCell衙熔。
圖 1是一個(gè)九宮格登颓，黃色區(qū)域?yàn)楦敢晥D，由已知條件可知红氯，它的大小是由里面的單元格布局決定的框咙，所以，只要固定住里面的單元格痢甘，父視圖就會(huì)自動(dòng)固定住扁耐。
下面我們來(lái)添加約束：
1.所有單元格添加高度（height）和寬度（width）約束，如圖 2所示产阱，
2.第一行相對(duì)父視圖，添加top約束块仆，如圖三中紫色箭頭所示构蹬，
3.非第一行添加對(duì)上一行單元的top約束，如圖四紅色箭頭所示悔据，
4.第一列添加對(duì)父視圖的left約束庄敛，如圖五墨綠色箭頭所示
5.非第一列添加對(duì)上一個(gè)view的left約束，如圖6深藍(lán)色箭頭所示
這時(shí)候你會(huì)發(fā)現(xiàn)所有單元格都固定了科汗，但是父視圖的大小卻不能固定藻烤，因?yàn)檫€不能得出父視圖的寬和高
6.右上角（第一行&最后一列）添加對(duì)父視圖right約束，如圖7所示头滔，2號(hào)單元格右側(cè)綠色箭頭
7.左下角（最后一行&第一列）添加對(duì)父視圖的bottom約束怖亭，如圖8所示，6號(hào)單元格底部紫色箭頭
talk is cheap show me the code.
/**
九宮格布局（不限于九宮格坤检，可以是N個(gè)格子）兴猩，每個(gè)格子給定高（cellHeight）寬（cellWidth），
每行格子數(shù)量（numPerRow）早歇，格子總數(shù)量（totalNum）倾芝，格子與邊界距離（viewPadding）讨勤，格
子之間的距離（viewPaddingCell）。
@param cellWidth 格子寬度
@param cellHeight 格子高度
@param numPerRow 每行格子數(shù)量
@param totalNum 格子總數(shù)量
@param viewPadding 格子與邊界距離
@param viewPaddingCell 格子之間的距離
@param superView 父視圖
*/
- (void)gridWithCellWidth:(CGFloat)cellWidth
cellHeight:(CGFloat)cellHeight
numPerRow:(NSInteger)numPerRow
totalNum:(NSInteger)totalNum
viewPadding:(CGFloat)viewPadding
viewPaddingCell:(CGFloat)viewPaddingCell
superView:(UIView *)superView
{
__block UILabel *lastView = nil;// 創(chuàng)建一個(gè)空view 代表上一個(gè)view
__block UILabel *lastRowView;// 創(chuàng)建一個(gè)空view 代表上一行view
__block NSInteger lastRowNo = 0;//上一行的行號(hào)
NSMutableArray *cells = [[NSMutableArray alloc] init];
for (int i = 0; i < totalNum; i++) {
UILabel *aLabel = [UILabel new];
aLabel.text = [NSString stringWithFormat:@"%d",i];
[superView addSubview:aLabel];
aLabel.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0 ) saturation:( arc4random() % 128 / 256.0 ) + 0.5
brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:1.0];
[cells addObject:aLabel];
}
// 循環(huán)創(chuàng)建view
for (int i = 0; i < cells.count; i++)
{
UILabel *lb = cells[i];
BOOL isFirstRow = [self isFirstRowWithIndex:i numOfRow:numPerRow];
BOOL isFirstCol = [self isFirstColumnWithIndex:i numOfRow:numPerRow];
BOOL isLastCol = [self isLastColumnWithIndex:i numOfRow:numPerRow totalNum:totalNum];
BOOL isLastRow = [self isLastRowWithIndex:i numOfRow:numPerRow totalNum:totalNum];
NSInteger curRowNo = i/numPerRow;
if (curRowNo != lastRowNo)
{//如果當(dāng)前行與上一個(gè)view行不等晨另，說(shuō)明換行了
lastRowView = lastView;
lastRowNo = curRowNo;
}
// 添加約束
[lb mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@(cellWidth));
make.height.equalTo(@(cellHeight));
if (isFirstRow)
{
make.top.equalTo(superView.mas_top).with.offset(viewPadding);
}
else
{
if (lastRowView)
{
make.top.equalTo(lastRowView.mas_bottom).with.offset(viewPaddingCell);
}
}
if (isFirstCol)
{
make.left.equalTo(superView.mas_left).with.offset(viewPadding);
}
else
{
if (lastView)
{
make.left.equalTo(lastView.mas_right).with.offset(viewPaddingCell);
}
}
if (isFirstRow && isLastCol)
{
make.right.equalTo(superView.mas_right).with.offset(-viewPadding);
}
if (isLastRow && isFirstCol)
{
make.bottom.equalTo(superView.mas_bottom).with.offset(-viewPadding);
}
}];
// 每次循環(huán)結(jié)束 此次的View為下次約束的基準(zhǔn)
lastView = lb;
}
}
代碼中有一些判斷潭千，比如是否為第一行，
/**
是否第一行
@param index 當(dāng)前下標(biāo)
@param numOfRow 每行個(gè)數(shù)
@return YES OR NO
*/
- (BOOL)isFirstRowWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow
{
if (numOfRow != 0)
{
return index/numOfRow == 0;
}
return NO;
}
是否為第一列借尿，
/**
是否第一列
@param index 當(dāng)前下標(biāo)
@param numOfRow 每行個(gè)數(shù)
@return YES OR NO
*/
- (BOOL)isFirstColumnWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow
{
if (numOfRow != 0)
{
return index%numOfRow == 0;
}
return NO;
}
是否為最后一行刨晴，
/**
是否最后一行
@param index 當(dāng)前下標(biāo)
@param numOfRow 每行個(gè)數(shù)
@return YES OR NO
*/
- (BOOL)isLastRowWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow totalNum:(NSInteger)totalNum
{
NSInteger totalRow = ceil(totalNum/((CGFloat)numOfRow));//總行數(shù)
if (numOfRow != 0)
{
return index/numOfRow == totalRow - 1;
}
return NO;
}
是否為最后一列
/**
是否最后一列
@param index 當(dāng)前下標(biāo)
@param numOfRow 每行個(gè)數(shù)
@return YES OR NO
*/
- (BOOL)isLastColumnWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow totalNum:(NSInteger)totalNum
{
if (numOfRow != 0)
{
if (totalNum < numOfRow)
{//總數(shù)小于每行最大個(gè)數(shù)時(shí)，如果index是最后一個(gè)垛玻，那么也是最后一列
return index == totalNum-1;
}
return index%numOfRow == numOfRow - 1;
}
return NO;
}
注意：這里有個(gè)地方要注意割捅，當(dāng)你的單元格總數(shù)（totalNum ）小于每行個(gè)數(shù) （numOfRow），比如總共有2個(gè)單元格帚桩，每行排三個(gè)亿驾，那么最后一個(gè)即為最后一列。
上面這四個(gè)判斷在很多地方都可以用到账嚎，可以記下備用??莫瞬。
然后是上一行的view判斷也需要注意。
其實(shí)這不單單只是九宮格布局郭蕉，N個(gè)單元格布局也是可以的疼邀，感興趣的小伙胖可以自行測(cè)試（好吧，估計(jì)你從我寫的方法名已經(jīng)看出來(lái)了召锈，每行個(gè)數(shù)和總個(gè)數(shù)我都沒有寫死??）旁振。
另一種九宮格
這里的九宮格布局是子視圖固定，而父視圖由子視圖決定涨岁，還有另一種情況：父視圖高寬固定拐袜，子視圖與父視圖邊界距離給定，子視圖間距給定梢薪。
知道怎么布局嗎蹬铺？可以先思考一下。
|
|
|
|
|
|
好吧秉撇，揭曉答案：只要按照第一種九宮格前5個(gè)步驟來(lái)添加約束即可甜攀，去掉最后兩步。
總結(jié)
一開始我只是想布局一個(gè)九宮格琐馆，但是后來(lái)又想规阀，如果需求擴(kuò)展到了N個(gè)單元，該如何實(shí)現(xiàn)呢瘦麸，我的辦法是從九宮格開始姥敛，由小及大來(lái)推導(dǎo)，然后就是要知道自動(dòng)布局需要添加哪些約束瞎暑，能夠完整的固定視圖彤敛，不能多与帆，也不要少，這是很重要的墨榄。
