今天有点时间，整理了一下以前公司老大写的一个实现九宫格的类。在此分享给大家，小弟只是个小小的程序员，写的不好，望大家见谅。。。。。
第一步：建一个UIView的类(LWGridView)。先定义一个结构体，这样可以让传进来的参数更加清晰明了。
/**
* 定义九宫格基本属性结构体
*/
struct CGGrid {
float x; //九宫格起始元素x坐标
float y; //九宫格起始元素y坐标
float horizontal; //元素列之间间距
float vertical; //元素行之间间距
NSInteger column; //九宫格的列数
float cellHeight; //元素的高度
};
typedef struct CGGrid CGGrid;
CG_INLINE CGGrid
CGGridMake(float x ,float y,float horizontal,float vertical,NSInteger cols,float cellHeight)
{
CGGrid grid;
grid.x = x;
grid.y = y;
grid.vertical = vertical;
grid.horizontal = horizontal;
grid.column = cols;
grid.cellHeight = cellHeight;
return grid;
}
然后再用代理来处理九宫格的每个item的选中或者未选中的显示效果，以及默认选中某个item的问题。
@protocol LWGridViewDelegate <NSObject>
@required
/**
* 总共有多少个cell
*
* @return 返回cell的总个数
*/
- (NSInteger)getCridCellCount;
@optional
/**
* 循环创建每个cell的view
*
* @param index 给cell填充数据使用的index
*/
- (UIView *)createGridCellView:(NSInteger)index;
/**
* 自定义gridCell的选中效果
*
* @param view 被点击gridCell的view
*/
- (void)gridCellViewSelect:(UIView *)view;
/**
* 自定义gridCell的未选中效果
*
* @param view 未被点击gridCell的view
*/
- (void)gridCellViewUnselect:(UIView *)view;
/**
* 设置默认选中的gridCell
*
* @param index 选中第index个gridCell
*/
- (void)selectGridViewCellItem:(NSInteger)index;
@end
最后就是实现该类的初始化方法以及使用块来把每个item的点击事件传出去。
最主要的实现方法代码如下：
- (void)setDelegate:(id<LWGridViewDelegate>)delegate
{
_delegate = delegate;
//cell的个数
NSInteger numCell = [delegate getCridCellCount];
//起始元素的偏移坐标x、y
float hPadding = _grid.x;
float vPadding = _grid.y;
//计算每个cellItem的宽度
float itemWidth = (self.frame.size.width - hPadding * 2 - (_grid.column - 1) * _grid.horizontal) / _grid.column;
//cellitem的高度
float height = _grid.cellHeight;
//初始化计算之前的行数
NSInteger rowIndex = -1;
//计算九宫格的最后一行是否是填充完整的
NSInteger fillSize = (_grid.column - numCell % _grid.column) + numCell;
NSInteger index = autoFill ? fillSize:numCell;
for (NSInteger i = 0; i < index; i++) {
//循环创建每个cell
UIView *view = i >= numCell ? [self createGridCellView] : [_delegate createGridCellView:i];
//计算当前创建到第几列了
NSInteger colIndex = i % _grid.column;
if (colIndex == 0) {
//每次创建到第0列，行数增加1
rowIndex ++;
}
//计算每个item的frame的x、y
float x = colIndex * itemWidth + colIndex * _grid.horizontal + hPadding;
float y = rowIndex * height + rowIndex * _grid.vertical + vPadding;
//使每个itemCell居中显示
if (view.frame.size.width != 0 && view.frame.size.width != 0) {
int ox = x + (itemWidth / 2 - view.frame.size.width / 2);
int oy = y + (height / 2 - view.frame.size.width / 2);
[view setFrame:CGRectMake(ox, oy, itemWidth, height)];
} else {
[view setFrame:CGRectMake(x, y, itemWidth, height)];
}
view.tag = i + 1;
//给每个cell添加点击手势，处理点击事件
if (i < numCell) {
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(cellItemClick:)];
[view addGestureRecognizer:tapGesture];
}
[self addSubview:view];
}
//行数加1计算整个九宫格的高度
if (rowIndex > -1) {
rowIndex ++;
}
float totalHeight = rowIndex * height + (rowIndex - 1) * _grid.vertical + vPadding * 2;
[self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, totalHeight)];
}
第二步：创建一个类继承LWGridView。用来具体处理九宫格的显示，处理父类中未实现的一些显示问题。不同样子的九宫格，在这里处理显示问题。在父类的初始化方法里面有个参数是要不要自动补全的。不过一般是不用补全的，有需要的可以看看下面附上的demo。
- (id)initWithFrame:(CGRect)frame data:(NSArray *)array column:(NSInteger)col
{
self = [super initWithFrame:frame propertyGrid:CGGridMake(10, 10, 10, 5, col, 30)];
if (self){
data = array;
self.delegate = self;
}
return self;
}
- (UIView *)createGridCellView:(NSInteger)index
{
UIButton *grid = [[UIButton alloc] init];
NSDictionary *item =data[index];
[grid setTitle:item[@"name"] forState:UIControlStateNormal];
grid.titleLabel.textAlignment = NSTextAlignmentCenter;
grid.titleLabel.font = [UIFont systemFontOfSize:13];
grid.backgroundColor = [UIColor whiteColor];
grid.layer.borderWidth = 0.5;
grid.layer.borderColor = [[UIColor lightGrayColor] CGColor];
grid.layer.cornerRadius = 15;
grid.layer.masksToBounds = YES;
[grid setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
return grid;
}
- (void)gridCellViewSelect:(UIView *)view{
view.layer.borderColor = [[UIColor redColor] CGColor];
view.layer.borderWidth = 1;
}
- (void)gridCellViewUnselect:(UIView *)view{
view.layer.borderColor = [[UIColor lightGrayColor] CGColor];
view.layer.borderWidth = 0.5;
}
- (NSInteger)getCridCellCount
{
return data.count;
}
第三步：显示在控制器中。代码如下：
NSArray *data = @[
@{@"name":@"一年级"},
@{@"name":@"二年级"},
@{@"name":@"三年级"},
@{@"name":@"四年级"},
@{@"name":@"五年级"},
@{@"name":@"六年级"},
@{@"name":@"七年级"},
@{@"name":@"八年级"},
@{@"name":@"九年级"},
@{@"name":@"十年级"},
];
//传人多少列，显示多少列
TestGridView *gridView = [[TestGridView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 0) data:data column:3];
gridView.backgroundColor = [UIColor brownColor];
gridView.itemClickListener = ^(NSInteger index, UIView *view){
//处理每个item的点击事件
NSLog(@"%ld", (long)index);
};
[self.view addSubview:gridView];
下面是显示结果：
1列.png
2列.png
4列.png
下面附上Demo下载链接：http://pan.baidu.com/s/1qYotASO
共勉！一步一个巴掌印。。。。。
