直接復(fù)制下面代碼看效果
一济竹、常規(guī)布局方式
517349-20160819194720781-2023804629.png
517349-20160819194712937-1138283651.png
517349-20160819194657703-1828190789.png
- (void)viewDidLoad {
[super viewDidLoad];
// TODO: 創(chuàng)建一個裝載九宮格的容器
UIView *containerView = [[UIView alloc] init];
[self.view addSubview:containerView];
containerView.backgroundColor = [UIColor whiteColor];
containerView.layer.borderWidth = 1;
containerView.layer.borderColor = [UIColor grayColor].CGColor;
// TODO:給該容器添加布局代碼
[containerView makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(15);
make.top.equalTo(66);
make.right.equalTo(-15);
make.height.equalTo(300);
}];
// TODO: 為該容器添加宮格View
for (int i = 0; i < 10; i++) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor randomColor];
[containerView addSubview:view];
}
// TODO: 執(zhí)行九宮格布局
/*
一行代碼梦谜，就可以實(shí)現(xiàn)九宮格布局
-[NSArray mas_distributeSudokuViewsWithFixedItemWidth:fixedItemHeight:fixedLineSpacing:fixedInteritemSpacing:warpCount:topSpacing:bottomSpacing:leadSpacing:tailSpacing:]
參數(shù)介紹：
fixedItemWidth: 宮格的寬度袭景，如果設(shè)置為0的話耸棒，則由父容器控制寬度报辱，如果不為零，則可以控制父容器的寬度
fixedItemHeight：與fixedItemWidth同理
fixedLineSpacing：宮格之間行的間距幅疼，如果宮格只有一行昼接，則不生效
fixedInteritemSpacing：宮格之間列的間距慢睡，如果只有一列漂辐，則不生效
warpCount：折行的位置，如果設(shè)置為3瘤泪，則表示該九宮格需要布局3列膳犹，值得一提的是，如果NSArray本身的count如果小于warpCount豺旬，則該函數(shù)會用空的UIView填充到缺失區(qū)域篓跛。
topSpacing：bottomSpacing：leadSpacing：tailSpacing：九宮格頂邊距愧沟，底邊距，左邊距以及右邊距
*/
[containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:0
fixedItemHeight:0
fixedLineSpacing:10
fixedInteritemSpacing:20
warpCount:3
topSpacing:10
bottomSpacing:10
leadSpacing:10
tailSpacing:10];
}
二、另外一種布局方式
517349-20160819200905937-430060348.png
view創(chuàng)建代碼不變 masnory實(shí)現(xiàn)代碼如下
/**
* 九宮格布局 固定ItemSize 可變ItemSpacing
*
* @param fixedItemWidth 固定寬度
* @param fixedItemHeight 固定高度
* @param warpCount 折行點(diǎn)
* @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;
*/
[containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:50
fixedItemHeight:50
warpCount:3
topSpacing:10
bottomSpacing:10
leadSpacing:10
tailSpacing:10];
// !!!: 實(shí)現(xiàn)如下 給數(shù)組加一個擴(kuò)展
.h
#import "MASUtilities.h"
#import "MASConstraintMaker.h"
#import "MASViewAttribute.h"
@interface NSArray (Sudoku)
/**
* 九宮格布局 固定ItemSize 可變ItemSpacing
*
* @param fixedItemWidth 固定寬度
* @param fixedItemHeight 固定高度
* @param warpCount 折行點(diǎn)
* @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;
/**
* 九宮格布局 可變ItemSize 固定ItemSpacing
*
* @param fixedLineSpacing 行間距
* @param fixedInteritemSpacing 列間距
* @param warpCount 折行點(diǎn)
* @param topSpacing 頂間距
* @param bottomSpacing 底間距
* @param leadSpacing 左間距
* @param tailSpacing 右間距
*/
- (void)mas_distributeSudokuViewsWithFixedLineSpacing:(CGFloat)fixedLineSpacing
fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing
warpCount:(NSInteger)warpCount
topSpacing:(CGFloat)topSpacing
bottomSpacing:(CGFloat)bottomSpacing
leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailSpacing;
/**
* 九宮格布局 固定ItemSize 固定ItemSpacing
* 可由九宮格的內(nèi)容控制SuperView的大小
* 如果warpCount大于[self count]，該方法將會用空白的View填充到superview中
*
* Sudoku Layout, has fixed item size, and fix item space
* If warp count greater than self.count, It's fill empty view to superview
*
* @param fixedItemWidth 固定寬度，如果設(shè)置成0，則表示自適應(yīng)闲坎，If set it to zero, indicates the adaptive.
* @param fixedItemHeight 固定高度，如果設(shè)置成0慷彤，則表示自適應(yīng)瞬欧，If set it to zero, indicates the adaptive.
* @param fixedLineSpacing 行間距
* @param fixedInteritemSpacing 列間距
* @param warpCount 折行點(diǎn)
* @param topSpacing 頂間距
* @param bottomSpacing 底間距
* @param leadSpacing 左間距
* @param tailSpacing 右間距
*
* @return 一般情況下會返回[self copy], 如果warpCount大于[self count]咒吐，則會返回一個被空白view填充過的數(shù)組恬叹，可以讓你循環(huán)調(diào)用removeFromSuperview或者干一些其他的事情;
* @return Normal will return [self copy], If warpCount bigger than [self count] , It will return a empty views filled array, you could enumerate [subview removeFromSuperview] or do other things;
*/
- (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;
@end
.m
#import "NSArray+Sudoku.h"
#import "View+MASAdditions.h"
@implementation NSArray (Sudoku)
- (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;
}
- (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];
// 當(dāng)前行
NSInteger currentRow = i / warpCount;
// 當(dāng)前列
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;
}
}
- (void)mas_distributeSudokuViewsWithFixedLineSpacing:(CGFloat)fixedLineSpacing
fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing
warpCount:(NSInteger)warpCount
topSpacing:(CGFloat)topSpacing
bottomSpacing:(CGFloat)bottomSpacing
leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailSpacing {
[self mas_distributeSudokuViewsWithFixedItemWidth:0 fixedItemHeight:0 fixedLineSpacing:fixedLineSpacing fixedInteritemSpacing:fixedInteritemSpacing warpCount:warpCount topSpacing:topSpacing bottomSpacing:bottomSpacing leadSpacing:leadSpacing tailSpacing:tailSpacing];
}
- (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循未，則表示自適應(yīng)
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;
}
@end
