已經有一年多沒有發過博客了，時隔一年的第一篇博客，上點有用的東西。
如何使用Masonry實現的九宮格布局函數？怎么才能一句代碼就搞定九宮格布局？
跟隨這篇文章走出九宮格的困境，讓你不再為九宮格布局的代碼感到煩心，讓你拋棄使用CollectionView。
直接上效果圖：
以上三張圖片的九宮格布局，皆由一句代碼完成:
#import "Masonry.h" @implementation UIColor (Extensions) + (instancetype)randomColor { CGFloat red = arc4random_uniform(255) / 255.0; CGFloat green = arc4random_uniform(255) / 255.0; CGFloat blue = arc4random_uniform(255) / 255.0; return [self colorWithRed:red green:green blue:blue alpha:1.0]; } @end @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 創建一個裝載九宮格的容器 UIView *containerView = [[UIView alloc] init]; [self.view addSubview:containerView]; containerView.backgroundColor = [UIColor whiteColor]; containerView.layer.borderWidth = 1; containerView.layer.borderColor = [UIColor grayColor].CGColor;
// 給該容器添加布局代碼 [containerView makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(15); make.top.equalTo(66); make.right.equalTo(-15); make.height.equalTo(300); }]; // 為該容器添加宮格View for (int i = 0; i < 10; i++) { UIView *view = [[UIView alloc] init]; view.backgroundColor = [UIColor randomColor]; [containerView addSubview:view]; } // 執行九宮格布局 [containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:0 fixedItemHeight:0 fixedLineSpacing:10 fixedInteritemSpacing:20 warpCount:3 topSpacing:10 bottomSpacing:10 leadSpacing:10 tailSpacing:10]; } @end
該方法追求極簡的方式實現九宮格布局，只需要一行代碼，就能讓你實現上圖的九宮格布局
-[NSArray mas_distributeSudokuViewsWithFixedItemWidth:fixedItemHeight:fixedLineSpacing:fixedInteritemSpacing:warpCount:topSpacing:bottomSpacing:leadSpacing:tailSpacing:]
首先我來說說該方法的介個參數：
fixedItemWidth: 宮格的寬度，如果設置為0的話，則由父容器控制寬度，如果不為零，則可以控制父容器的寬度
fixedItemHeight：與fixedItemWidth同理
fixedLineSpacing：宮格之間行的間距，如果宮格只有一行，則不生效
fixedInteritemSpacing：宮格之間列的間距，如果只有一列，則不生效
warpCount：折行的位置，如果設置為3，則表示該九宮格需要布局3列，值得一提的是，如果NSArray本身的count如果小於warpCount，則該函數會用空的UIView填充到缺失區域。
topSpacing：bottomSpacing：leadSpacing：tailSpacing：九宮格頂邊距，底邊距，左邊距以及右邊距，不多說
接下來上實現代碼：
- (MAS_VIEW *)star_commonSuperviewOfViews {
if (self.count == 1) {
return ((MAS_VIEW *)self.firstObject).superview;
}
MAS_VIEW *commonSuperview = nil;
MAS_VIEW *previousView = nil;
for (id object in self) {
if ([object isKindOfClass:[MAS_VIEW class]]) {
MAS_VIEW *view = (MAS_VIEW *)object;
if (previousView) {
commonSuperview = [view mas_closestCommonSuperview:commonSuperview];
} else {
commonSuperview = view;
}
previousView = view;
}
}
NSAssert(commonSuperview, @"Can't constrain views that do not share a common superview. Make sure that all the views in this array have been added into the same view hierarchy.");
return commonSuperview;
}
/**
* 九宮格布局 固定ItemSize 固定ItemSpacing
* 可由九宮格的內容控制SuperView的大小
* 如果warpCount大於[self count]，該方法將會用空白的View填充到superview中
*
* @param fixedItemWidth 固定寬度，如果設置成0，則表示自適應
* @param fixedItemHeight 固定高度，如果設置成0，則表示自適應
* @param fixedLineSpacing 行間距
* @param fixedInteritemSpacing 列間距
* @param warpCount 折行點
* @param topSpacing 頂間距
* @param bottomSpacing 底間距
* @param leadSpacing 左間距
* @param tailSpacing 右間距
*
* @return 一般情況下會返回[self copy], 如果warpCount大於[self count]，則會返回一個被空白view填充過的數組，可以讓你循環調用removeFromSuperview或者干一些其他的事情;
*/
- (NSArray *)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth fixedItemHeight:(CGFloat)fixedItemHeight fixedLineSpacing:(CGFloat)fixedLineSpacing fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing warpCount:(NSInteger)warpCount topSpacing:(CGFloat)topSpacing bottomSpacing:(CGFloat)bottomSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing { if (self.count < 1) { return self.copy; } if (warpCount < 1) { NSAssert(false, @"warp count need to bigger than zero"); return self.copy; } MAS_VIEW *tempSuperView = [self star_commonSuperviewOfViews]; NSArray *tempViews = self.copy; if (warpCount > self.count) { for (int i = 0; i < warpCount - self.count; i++) { MAS_VIEW *tempView = [[MAS_VIEW alloc] init]; [tempSuperView addSubview:tempView]; tempViews = [tempViews arrayByAddingObject:tempView]; } } NSInteger columnCount = warpCount; NSInteger rowCount = tempViews.count % columnCount == 0 ? tempViews.count / columnCount : tempViews.count / columnCount + 1; MAS_VIEW *prev; for (int i = 0; i < tempViews.count; i++) { MAS_VIEW *v = tempViews[i]; NSInteger currentRow = i / columnCount; NSInteger currentColumn = i % columnCount; [v mas_makeConstraints:^(MASConstraintMaker *make) { if (prev) { // 固定寬度 make.width.equalTo(prev); make.height.equalTo(prev); } else { // 如果寫的item高寬分別是0，則表示自適應 if (fixedItemWidth) { make.width.equalTo(@(fixedItemWidth)); } if (fixedItemHeight) { make.height.equalTo(@(fixedItemHeight)); } } // 第一行 if (currentRow == 0) { make.top.equalTo(tempSuperView).offset(topSpacing); } // 最后一行 if (currentRow == rowCount - 1) { // 如果只有一行 if (currentRow != 0 && i-columnCount >= 0) { make.top.equalTo(((MAS_VIEW *)tempViews[i-columnCount]).mas_bottom).offset(fixedLineSpacing); } make.bottom.equalTo(tempSuperView).offset(-bottomSpacing); } // 中間的若干行 if (currentRow != 0 && currentRow != rowCount - 1) { make.top.equalTo(((MAS_VIEW *)tempViews[i-columnCount]).mas_bottom).offset(fixedLineSpacing); } // 第一列 if (currentColumn == 0) { make.left.equalTo(tempSuperView).offset(leadSpacing); } // 最后一列 if (currentColumn == columnCount - 1) { // 如果只有一列 if (currentColumn != 0) { make.left.equalTo(prev.mas_right).offset(fixedInteritemSpacing); } make.right.equalTo(tempSuperView).offset(-tailSpacing); } // 中間若干列 if (currentColumn != 0 && currentColumn != warpCount - 1) { make.left.equalTo(prev.mas_right).offset(fixedInteritemSpacing); } }]; prev = v; } return tempViews; }
當然這種九宮格布局的方式還是不能夠滿足你們
接下來看另外一種布局方式：
這種布局方法以父容器的大小為基准，宮格大小固定不變，宮格之間互相間距無約束，使用方法和上圖類似
[containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:50 fixedItemHeight:50 warpCount:3 topSpacing:10 bottomSpacing:10 leadSpacing:10 tailSpacing:10];
上實現代碼：
/** * 九宮格布局 固定ItemSize 可變ItemSpacing * * @param fixedItemWidth 固定寬度 * @param fixedItemHeight 固定高度 * @param warpCount 折行點 * @param topSpacing 頂間距 * @param bottomSpacing 底間距 * @param leadSpacing 左間距 * @param tailSpacing 右間距 */ - (void)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth fixedItemHeight:(CGFloat)fixedItemHeight warpCount:(NSInteger)warpCount topSpacing:(CGFloat)topSpacing bottomSpacing:(CGFloat)bottomSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing { if (self.count < 2) { NSAssert(self.count>1,@"views to distribute need to bigger than one"); return; } if (warpCount < 1) { NSAssert(false, @"warp count need to bigger than zero"); return; } MAS_VIEW *tempSuperView = [self star_commonSuperviewOfViews]; NSInteger rowCount = self.count % warpCount == 0 ? self.count / warpCount : self.count / warpCount + 1; MAS_VIEW *prev; for (int i = 0; i < self.count; i++) { MAS_VIEW *v = self[i]; // 當前行 NSInteger currentRow = i / warpCount; // 當前列 NSInteger currentColumn = i % warpCount; [v mas_makeConstraints:^(MASConstraintMaker *make) { // 固定寬度 make.width.equalTo(@(fixedItemWidth)); make.height.equalTo(@(fixedItemHeight)); // 第一行 if (currentRow == 0) { make.top.equalTo(tempSuperView).offset(topSpacing); } // 最后一行 if (currentRow == rowCount - 1) { make.bottom.equalTo(tempSuperView).offset(-bottomSpacing); } // 中間的若干行 if (currentRow != 0 && currentRow != rowCount - 1){ CGFloat offset = (1-(currentRow/((CGFloat)rowCount-1)))*(fixedItemHeight+topSpacing)-currentRow*bottomSpacing/(((CGFloat)rowCount-1)); make.bottom.equalTo(tempSuperView).multipliedBy(currentRow/((CGFloat)rowCount-1)).offset(offset); } // 第一列 if (currentColumn == 0) { make.left.equalTo(tempSuperView).offset(leadSpacing); } // 最后一列 if (currentColumn == warpCount - 1) { make.right.equalTo(tempSuperView).offset(-tailSpacing); } // 中間若干列 if (currentColumn != 0 && currentColumn != warpCount - 1) { CGFloat offset = (1-(currentColumn/((CGFloat)warpCount-1)))*(fixedItemWidth+leadSpacing)-currentColumn*tailSpacing/(((CGFloat)warpCount-1)); make.right.equalTo(tempSuperView).multipliedBy(currentColumn/((CGFloat)warpCount-1)).offset(offset); } }]; prev = v; } }