Cell的复用及自定义Cell

前言

在iOS开发中，UITableView 和 UICollectionView 是常用的列表视图控件，而 Cell复用 和 自定义Cell 是优化其性能和灵活性的关键技术。

Cell的复用

当 UITableView 或 UICollectionView 显示大量数据时，系统不会为每个数据项都创建一个新的 Cell，系统会维护一个可重用的Cell队列，当Cell滚出屏幕时会被放入队列，而当需要显示新的Cell时，系统会优先从队列中取出可重用的Cell进行配置，即 复用已经滚出屏幕的Cell，以减少内存占用和提升性能。

实现Cell的复用有两种方法：

• 非注册方法(即手动判空)
• 注册方法(即使用Cell的自动注册机制)

非注册方法(手动)

手动复用Cell的方法步骤：

• 注册Cell类(即在设置复用标识符)：创建一个局部字符串变量作为Cell的类型。在创建Cell时，将这个标识符作为参数传入
• 复用Cell：通过调用UITableView 或 UICollectionView的dequeueReusableCell(withIdentifier:)方法来请求一个已经不显示在屏幕但是没有被销毁的Cell来显示新的Cell
• 配置Cell：重新配置复用的Cell以显示新的数据

代码演示：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *strID = @"id";
    UITableViewCell *cell = [_tabView dequeueReusableCellWithIdentifier: strID];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: strID];
    }
    cell.textLabel.text = @"aaa";
    return cell;
}

注册方法(自动)

与手动复用Cell的区别在于不用手动判空。

自动复用Cell的方法步骤：

• 注册Cell类型：创建一个局部字符串变量作为Cell的类型。在创建Cell时，将这个标识符作为参数传入
• 请求复用的Cell：使用dequeueReusableCell(WithIdentifier:)获取可复用的cell
• 创建新的Cell：不用判空，如果dequeueReusableCell(WithIdentifier:)方法返回nil，自动创建一个新的Cell并返回
• 配置Cell：重新配置复用的Cell以显示新的数据

代码演示：

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *strID = @"id";
    MyTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier: strID];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

自定义Cell

默认的 UITableViewCell 或 UICollectionViewCell 样式有限，通常需要 自定义Cell 来满足UI需求。

自定义Cell的方法步骤：

• 初始化阶段：
  • ViewController加载时创建并配置UITableView
  • 注册自定义Cell类与复用标识的关联
• Cell创建阶段：
  • 当tableView需要显示cell时，调用cellForRowAtIndexPath:
  • 系统首先尝试从复用队列中获取cell
  • 如果没有可复用的cell，系统会调用initWithStyle:reuseIdentifier:初始化新的cell
  • 在初始化方法中创建并配置label1和label2
• 布局阶段：
  • 当cell需要显示时，系统调用layoutSubviews
  • 在layoutSubviews中设置两个label的精确位置
• 复用阶段：
  • 当cell滚出屏幕时，会被放入复用队列
  • 当新的cell需要显示时，优先从复用队列中获取

代码演示：

UICellTableViewCell.h

定义一个继承UITableViewCell的Cell类

#import <UIKit/UIKit.h>

@interface UICellTableViewCell : UITableViewCell
@property(nonatomic, strong) UILabel *label1;
@property(nonatomic, strong) UILabel *label2;
@end

UICellTableViewCell.m

初始化方法和布局方法

#import "UICellTableViewCell.h"

@implementation UICellTableViewCell

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if ([reuseIdentifier isEqual:@"cell"]) {
        _label1 = [[UILabel alloc] init];
        _label1.textColor = [UIColor greenColor];
        _label1.font = [UIFont systemFontOfSize:20];
        [self.contentView addSubview:_label1];
        _label2 = [[UILabel alloc] init];
        _label2.textColor = [UIColor cyanColor];
        _label2.font = [UIFont systemFontOfSize:15];
        [self.contentView addSubview:_label2];
    }
    return self;
}

-(void)layoutSubviews {
    _label1.frame = CGRectMake(100, 20, self.contentView.bounds.size.width - 40, 20);
    _label2.frame = CGRectMake(100, 40, self.contentView.bounds.size.width - 40, 20);
}

注册自定义Cell类，将tableView添加到视图

//ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> {
    UITableView  *_tableView;
}

@end
//ViewController.m
#import "ViewController.h"
#import "UICellTableViewCell.h"
@interface ViewController ()

@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [_tableView registerClass:[UICellTableViewCell class] forCellReuseIdentifier:@"cell"];
    [self.view addSubview:_tableView];
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return  15;;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UICellTableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:@"cell"];
    cell.label1.text = @"一级标题";
    cell.label2.text = @"二级标题";
    return  cell;
}
@end

注意：所有子视图都应该添加到contentView上，而不是直接添加到cell本身。