ios 團購分類頁面（9宮格）

=-= 命名有些錯誤，但功能實現，以後註意下命名規範

WJViewGroup.h

#import <UIKit/UIKit.h>

@interface WJViewGroup : UIView {
    NSInteger _width;
    NSInteger _height;
}

@property (nonatomic,assign)NSInteger widthNum; //橫排多少個
@property (nonatomic,assign)NSInteger heightNum; //豎排多少個

@property (copy, nonatomic) void(^itemBlock)(NSInteger index);//按鈕點擊回調
@property (nonatomic,assign)BOOL isLine;
@property (nonatomic,strong)NSMutableArray *array;

/**
 *  添加item
 *
 *  @param widthItem  高數量
 *  @param heightItem 寬數量
 *  @param num        item數量
 */
- (void)addItem:(NSInteger)widthItem widthItem:(NSInteger)heightItem num:(NSArray *)num;
/**
 *  改變item的文字
 *
 *  @param array 文字數組
 */
- (void)item:(NSArray *)array;
@end

WJViewGroup.m

#import "WJViewGroup.h"

@implementation WJViewGroup

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _width = frame.size.width;
        self.backgroundColor = [UIColor whiteColor];
        _height = frame.size.height;
        self.layer.borderWidth = 1;
        self.clipsToBounds = YES;
        self.layer.cornerRadius = 5;
        _widthNum = 3;
        _heightNum = 3;
        _array = [[NSMutableArray alloc]init];
    }
    return self;
}

#pragma mark - 添加item 3行－－－－－－－－－

- (void)addItem:(NSInteger)widthItem widthItem:(NSInteger)heightItem num:(NSArray *)num{
    NSInteger index = 0;
    NSInteger indeNume = 0;
    for (NSInteger i = 0; i < widthItem; i ++) {
         NSInteger index_Y = 0;
        for (NSInteger j = 0; j < heightItem; j++) {
         
            if (indeNume < num.count) {
                UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(_width/_widthNum*index_Y, _height/_heightNum * index, _width/_widthNum, _height/_heightNum)];
                [button setTitle:num[indeNume] forState:UIControlStateNormal];
                button.tag = indeNume;
                button.titleLabel.font = [UIFont systemFontOfSize:14];
                [button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
                [button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
                [self addSubview:button];
                [_array addObject:button];
                if (_isLine && index_Y < 2) {
                    UIView *lineVertical  = [[UIView alloc]initWithFrame:CGRectMake(CGRectGetMaxX(button.frame), CGRectGetMinY(button.frame) + _height/_heightNum *0.2, 0.5, _height/_heightNum *0.6)];
                    lineVertical.backgroundColor = [UIColor lightGrayColor];
                    [self addSubview:lineVertical];
                }
                
            }
            indeNume ++;
            index_Y++;
        }
       
            index++;
    }
    if (_isLine) {
        [self addCrossLine:0];
    }
 
}

- (void)item:(NSArray *)array {
    NSInteger index = 0;
    for (UIButton *button in _array) {
        if (index < array.count) {
             [button setTitle:array[index] forState:UIControlStateNormal];
        }
        index++;
    }
}

#pragma mark - 添加橫豎線

- (void)addCrossLine:(NSInteger)index {
    if (index == 0) {
        for (int i = 0; i < 3; i ++) {
            if (i > 0) {
                UIView *crossLine = [[UIView alloc]initWithFrame:CGRectMake(_width *0.05, _height/_heightNum*i, _width *0.9, 0.5)];
                crossLine.backgroundColor = [UIColor lightGrayColor];
                [self addSubview:crossLine];
            }
 
        }
    }else {
        for (int i = 0; i < 3; i ++) {
            if (i > 0) {
                UIView *crossLine = [[UIView alloc]initWithFrame:CGRectMake(0, _height/_heightNum*i, _width, 0.5)];
                crossLine.backgroundColor = [UIColor lightGrayColor];
                [self addSubview:crossLine];
            }
        }
    }
}

- (void)addVerticalLine {
    for (int i = 0; i < 3; i ++) {
        if (i < 2) {
            UIView *verticalLine = [[UIView alloc]initWithFrame:CGRectMake(_width/_widthNum * (i+1),0, _width, 0.5)];
            verticalLine.backgroundColor = [UIColor grayColor];
            [self addSubview:verticalLine];
        }
    }
}

#pragma mark - 事件監聽

- (void)buttonPressed:(UIButton *)sender {
    if (sender.titleLabel.text.length > 0) {
        if (_itemBlock) {
            _itemBlock(sender.tag);
        }

    }
}

@end

使用：

1.直接使用

  WJViewGroup *group = [[WJViewGroup alloc]initWithFrame:CGRectMake(ScreenWidth*0.05, 20, ScreenWidth*0.9, 120)];
    group.isLine = YES;

    group.layer.borderColor = [UIColor colorWithHexString:@"d3d1d1"].CGColor;
    [group addItem:3 widthItem:3 num:@[@"美食",@"電影",@"KTV",@"龍蝦",@"甜品",@"海鮮",@"火鍋",@"自助餐",@"蔬菜"]];
    [group setItemBlock:^(NSInteger index) {
        NSLog(@"%ld",index);
        
    }];
    [self.view addSubview:group];

效果圖：

2.cell中使用

自定義初始化cell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier cellHeight:(NSInteger)cellHeight; 

      _group = [[WJViewGroup alloc]initWithFrame:CGRectMake(ScreenWidth*0.05, CGRectGetHeight(viewBG.frame) +5, ScreenWidth*0.9, cellHeight)];
        _group.isLine = YES;
        if (cellHeight == 80) {
            _group.heightNum = 2;
        }
        _group.layer.borderColor = [UIColor colorWithHexString:@"d3d1d1"].CGColor;
        [_group addItem:3 widthItem:3 num:@[@"",@"",@"",@"",@"",@"",@"",@"",@""]];
        [self.contentView addSubview:_group];

懶載入：

- (NSArray *)arrayContext {
    if (!_arrayContext) {
        _arrayContext = [[NSArray alloc]initWithObjects:
  @[@"火鍋",@"蛋糕甜點",@"西餐",@"自助餐",@"小吃快餐",@"香鍋烤魚",@"聚餐宴請",@"燒烤烤肉",@"日韓料理"],
  @[@"經濟型酒店",@"豪華酒店",@"主題酒店",@"公寓型酒店",@"客棧",@"青年旅社"],
  @[@"美髮",@"美甲",@"美容美體",@"瑜伽/舞蹈"],
  @[@"溫泉",@"海洋館",@"展覽館",@"動植物園",@"主題公園",@"水上樂園"],
  @[@"演出賽事",@"桌游/電玩",@"運動健身",@"足療按摩",@"洗浴/汗蒸",@"4D/5D電影",],
                         nil];
    }
    return _arrayContext;
}

代理方法中：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 

    [cell.group item:self.arrayContext[indexPath.row]];
    [cell.group setItemBlock:^(NSInteger index) {
        NSLog(@"%ld",index);
        
    }];

效果圖：