UITableView制作九宫格视图

使用UITableView制作类型于九宫格的视图列表时，注意三个方面，第一使用自定义数据、第二使用自定义视图、第三使用自定义cell。当然最好的方法还是使用UICollectionView来做类似九宫格的处理。

如图所示

具体方法如下

1 创建自定义数据模型

#import <Foundation/Foundation.h>

@interface ShopModel : NSObject

@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *name;

@end

#import "ShopModel.h"

@implementation ShopModel

@end

2 自定义视图

#import <UIKit/UIKit.h>

@interface MyButton : UIButton

@end

#import "MyButton.h"

#define kImageRatio 0.6
#define kMarginRatio 0.1
#define kLabelRatio (1 - kImageRatio - 2 * kMarginRatio)

@implementation MyButton

- (id)init
{
    if (self = [super init])
    {
       // 设置文字颜色，一定要设置否则不会显示标题
        [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        // 设置文字大小
        self.titleLabel.font = [UIFont systemFontOfSize:10.0];
        // 设置文字居中
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        
       // 设置图片不要拉伸，保持原来的比例
        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
       // 高亮显示的时候不需要调整图片的颜色
        self.adjustsImageWhenHighlighted = NO;
    }
    
    return self;
}

#pragma mark 设置文字的位置

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, contentRect.size.height * (kImageRatio + kMarginRatio), contentRect.size.width, contentRect.size.height * kLabelRatio);
}

#pragma mark 设置图片的位置

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, contentRect.size.height * kMarginRatio, contentRect.size.width, contentRect.size.height * kImageRatio);
}

@end

3 自定义cell

#import <UIKit/UIKit.h>

#define kColumn 3
#define kCellHeight 40.0 

@interface MyCell : UITableViewCell

- (void)setRowShops:(NSArray *)shops;

@end

#import "MyCell.h"
#import "ShopModel.h"
#import "MyButton.h"

#define kTagPrefix 10

@implementation MyCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])
    {
        // 按钮宽度
        CGFloat btnWidth = self.contentView.bounds.size.width / kColumn;
        
        for (int i = 0; i < kColumn; i++)
        {
            MyButton *btn = [[MyButton alloc] init];
            btn.tag = kTagPrefix + i;
            [btn addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchUpInside];
            btn.frame = CGRectMake(btnWidth * i, 0, btnWidth, kCellHeight);
            //btn.backgroundColor = [UIColor redColor];
            [self.contentView addSubview:btn];
        }
        
    }
    return self;
}

- (void)itemClick:(MyButton *)item
{
    NSLog(@"点击了-%@", item.titleLabel.text);
}

- (void)setRowShops:(NSArray *)shops
{
    NSInteger count = shops.count;
    
    for (NSInteger i = 0; i < kColumn; i++)
    {
        MyButton *btn = (MyButton *)[self.contentView viewWithTag:kTagPrefix + i];
        
        // 设置数据
        if (i < count)
        {
            btn.hidden = NO;
            ShopModel *shop = [shops objectAtIndex:i];
            // 设置背景上面的小图片
            [btn setImage:[UIImage imageNamed:shop.icon] forState:UIControlStateNormal];
            
            [btn setTitle:shop.name forState:UIControlStateNormal];
        }
        else
        {
            btn.hidden = YES;
        }
    }
}

@end

4 使用

#import <UIKit/UIKit.h>

@interface MyTableVC : UIViewController

@end

#import "MyTableVC.h"
#import "MyCell.h"
#import "ShopModel.h"

@interface MyTableVC () <UITableViewDataSource, UITableViewDelegate>

@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *shops;

@end

@implementation MyTableVC

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.title = @"列表九宫格-未封装";
    [self setUI];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)loadView
{
    [super loadView];
    self.view.backgroundColor = [UIColor whiteColor];
}

#pragma mark - 创建视图

- (void)setUI
{
    if ([self respondsToSelector:@selector(setEdgesForExtendedLayout:)])
    {
        [self setEdgesForExtendedLayout:UIRectEdgeNone];
    }
    
    self.shops = [NSMutableArray array];
    for (int i = 1; i <= 20; i++)
    {
        ShopModel *shop = [[ShopModel alloc] init];
        shop.name = [NSString stringWithFormat:@"大衣-%i", i];
        shop.icon = [NSString stringWithFormat:@"animation_%i.jpg", i % 2];
        
        [self.shops addObject:shop];
    }
    
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    [self.view addSubview:self.tableView];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
}

#pragma mark - UITableViewDataSource, UITableViewDelegate

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return (self.shops.count + kColumn - 1) / kColumn;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *const identifier = @"MyCell";
    MyCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil)
    {
        // 创建Cell的时候绑定一个标识
        cell = [[MyCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
   // 从哪个位置开始截取
    NSInteger location = indexPath.row * kColumn;
    // 截取的长度
    NSInteger length = kColumn;
    if (location + length >= self.shops.count)
    {
        length = self.shops.count - location;
    }
    
    NSRange range = NSMakeRange(location, length);
    NSArray *rowShops = [self.shops subarrayWithRange:range];
    [cell setRowShops:rowShops];
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return kCellHeight;
}

@end