变形的九宫格--LWGridView

作者: iLeooooo | 来源:发表于2016-05-03 14:38 被阅读296次

变形的九宫格--LWGridView
Cocos Studio 九宫格使用
UIColletionView
css3-变形
构图x构图 | Rule of Thirds
变形，变形
九宫格常用的宏
基坑变形观测四问2022-10-12
3月份18天镜姐高效阅读第4次作业—每分钟3000字阅读训练&三
一书一法一工具｜九宫格法：打造属于你的精品知识输出

今天有点时间，整理了一下以前公司老大写的一个实现九宫格的类。在此分享给大家，小弟只是个小小的程序员，写的不好，望大家见谅。。。。。

第一步：建一个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];

下面是显示结果：