UITableView制作九宫格视图

使用UITableView制作类型于九宫格的视图列表时，注意三个方面，第一使用自定义数据、第二使用自定义视图、第三使用自定义cell。

如图所示

具体方法如下

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

转载于:https://my.oschina.net/potato512/blog/647864