以前写TimeLine中照片九宫格布局是直接计算frame，今天想用自动布局实现。
九宫格布局
使用自动布局，首先就必须知道给出了哪些条件。一般在TimeLine中照片九宫格布局给出的已知条件为：
每个单元的宽cellWidth；
每个单元的高cellHeight；
每行有几个单元numPerRow；
总共单元个数totalNum；
每个单元与边界间距viewPadding；
每个单元之间的间距viewPaddingCell。
图 1
图 1是一个九宫格，黄色区域为父视图，由已知条件可知，它的大小是由里面的单元格布局决定的，所以，只要固定住里面的单元格，父视图就会自动固定住。
下面我们来添加约束：
1.所有单元格添加高度（height）和宽度（width）约束，如图 2所示，
图 2
2.第一行相对父视图，添加top约束，如图三中紫色箭头所示，
图 3
3.非第一行添加对上一行单元的top约束，如图四红色箭头所示，
图 4
4.第一列添加对父视图的left约束，如图五墨绿色箭头所示
图 5
5.非第一列添加对上一个view的left约束，如图6深蓝色箭头所示
图 6
这时候你会发现所有单元格都固定了，但是父视图的大小却不能固定，因为还不能得出父视图的宽和高
6.右上角（第一行&最后一列）添加对父视图right约束，如图7所示，2号单元格右侧绿色箭头
图 7
7.左下角（最后一行&第一列）添加对父视图的bottom约束，如图8所示，6号单元格底部紫色箭头
图 8
talk is cheap show me the code.
doge.gif
/**
九宫格布局（不限于九宫格，可以是N个格子），每个格子给定高（cellHeight）宽（cellWidth），
每行格子数量（numPerRow），格子总数量（totalNum），格子与边界距离（viewPadding），格
子之间的距离（viewPaddingCell）。
@param cellWidth 格子宽度
@param cellHeight 格子高度
@param numPerRow 每行格子数量
@param totalNum 格子总数量
@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;// 创建一个空view 代表上一个view
__block UILabel *lastRowView;// 创建一个空view 代表上一行view
__block NSInteger lastRowNo = 0;//上一行的行号
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];
}
// 循环创建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)
{//如果当前行与上一个view行不等，说明换行了
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);
}
}];
// 每次循环结束 此次的View为下次约束的基准
lastView = lb;
}
}代码中有一些判断，比如是否为第一行，
/**
是否第一行
@param index 当前下标
@param numOfRow 每行个数
@return YES OR NO
*/- (BOOL)isFirstRowWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow
{ if (numOfRow != 0)
{ return index/numOfRow == 0;
} return NO;
}是否为第一列，
/**
是否第一列
@param index 当前下标
@param numOfRow 每行个数
@return YES OR NO
*/- (BOOL)isFirstColumnWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow
{ if (numOfRow != 0)
{ return index%numOfRow == 0;
} return NO;
}是否为最后一行，
/**
是否最后一行
@param index 当前下标
@param numOfRow 每行个数
@return YES OR NO
*/- (BOOL)isLastRowWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow totalNum:(NSInteger)totalNum
{ NSInteger totalRow = ceil(totalNum/((CGFloat)numOfRow));//总行数
if (numOfRow != 0)
{ return index/numOfRow == totalRow - 1;
} return NO;
}是否为最后一列
/**
是否最后一列
@param index 当前下标
@param numOfRow 每行个数
@return YES OR NO
*/- (BOOL)isLastColumnWithIndex:(NSInteger)index numOfRow:(NSInteger)numOfRow totalNum:(NSInteger)totalNum
{ if (numOfRow != 0)
{ if (totalNum < numOfRow)
{//总数小于每行最大个数时，如果index是最后一个，那么也是最后一列
return index == totalNum-1;
} return index%numOfRow == numOfRow - 1;
} return NO;
}注意：这里有个地方要注意，当你的单元格总数（totalNum ）小于每行个数 （numOfRow），比如总共有2个单元格，每行排三个，那么最后一个即为最后一列。
上面这四个判断在很多地方都可以用到，可以记下备用。
然后是上一行的view判断也需要注意。
其实这不单单只是九宫格布局，N个单元格布局也是可以的，感兴趣的小伙胖可以自行测试（好吧，估计你从我写的方法名已经看出来了，每行个数和总个数我都没有写死）。
另一种九宫格
这里的九宫格布局是子视图固定，而父视图由子视图决定，还有另一种情况：父视图高宽固定，子视图与父视图边界距离给定，子视图间距给定。
知道怎么布局吗？可以先思考一下。
|
|
|
|
|
|
好吧，揭晓答案：只要按照第一种九宫格前5个步骤来添加约束即可，去掉最后两步。
总结
一开始我只是想布局一个九宫格，但是后来又想，如果需求扩展到了N个单元，该如何实现呢，我的办法是从九宫格开始，由小及大来推导，然后就是要知道自动布局需要添加哪些约束，能够完整的固定视图，不能多，也不要少，这是很重要的。
作者：0o冻僵的企鹅o0
链接：https://www.jianshu.com/p/bf0333c47f9d
共同学习，写下你的评论
评论加载中...
作者其他优质文章
