TableView在iOS中的作用毋庸置疑，每一款App或多或少的都会使用到UITableView这个控件。作为iOS开发者，我们知道UITableView是继承自UIScrollView的，那么UITableView是如何在继承UIScrollView的基础上实现的呢？今天我们就尝试用代码一步步分析，在UIScrollView的基础上实现一个简单的TableView。
** 在这里需要感谢各路大神的分享，这篇文章是参考Colin Eberhardt的一系列文章最后总结记录于简书，为自己的iOS之路添砖加瓦。**
How to Make a Gesture-Driven To-Do List App Like Clear: Part 1/3
How to Make a Gesture-Driven To-Do List App Like Clear: Part 2/3
How to Make a Gesture-Driven To-Do List App Like Clear: Part 3/3
创建自定义表格视图
新建一个工程，这里命名为CustomTableView，新建一个类，继承UIScrollView，类名为YFTableView:
仿照原生的UITableView为YFTableView添加一个简便的@protocol：
@protocol YFTableViewDataSource <NSObject>
//表示表中的行数
- (NSInteger)numberOfRows;
//获取给定的单元格
- (UIView *)cellForRow:(NSInteger)row;
@end
同时在YFTableView.h文件中添加dataSource：
@property (nonatomic,assign) id <YFTableViewDataSource> dataSource;
在YFTableView.m中实现以下方法，每个方法都有详细的注释：
//初始化
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor clearColor];
}
return self;
}
//更新布局
- (void)layoutSubviews{
[super layoutSubviews];
[self refreshView];
}
//固定行高
const float SHC_ROW_HEIGHT = 50.0f;
- (void)refreshView{
//设置scrollView的高度
self.contentSize = CGSizeMake(self.bounds.size.width, [_dataSource numberOfRows] * SHC_ROW_HEIGHT);
//添加cell
for (int row = 0; row < [_dataSource numberOfRows]; row ++) {
//获得cell
UIView * cell = [_dataSource cellForRow:row];
//每个cell的y坐标
float topEdgeForRow = row * SHC_ROW_HEIGHT;
//每个cell的位置
CGRect frame = CGRectMake(0, topEdgeForRow, self.frame.size.width, SHC_ROW_HEIGHT);
cell.frame = frame;
//添加到视图
[self addSubview:cell];
}
}
#pragma mark - property setters
- (void)setDataSource:(id<YFTableViewDataSource>)dataSource{
_dataSource = dataSource;
[self refreshView];
}
新建一个类YFTableViewCell继承自UITableViewCell:
回到ViewController.m创建YFTableView，并遵行协议实现简单的TableView效果：
#import "ViewController.h"
#import "YFTableView.h"
#import "YFTableViewCell.h"
#define SCREEB_SIZE [UIScreen mainScreen].bounds.size
@interface ViewController ()<YFTableViewDataSource>
@property (nonatomic,strong) YFTableView * tableView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView = [[YFTableView alloc] initWithFrame:CGRectMake(0, 20, SCREEB_SIZE.width, SCREEB_SIZE.height - 20)];
self.tableView.dataSource = self;
[self.view addSubview:self.tableView];
}
- (NSInteger)numberOfRows{
return 30;
}
- (UIView *)cellForRow:(NSInteger)row{
NSString * ident = @"cell";
YFTableViewCell * cell = [[YFTableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:ident];
cell.textLabel.text = @"测试";
return cell;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
此时运行我们的程序，如下图：
这时，我们在ScrollView的基础上仿写了一个简单的TableView。但细心的我们会发现，仿写的这个TableView存在一个很严重的问题，subViews没有复用，在有限的手机内存里，这时非常可怕的。so，我们将改写这个ScrollView,让它拥有更棒的性能。
实现复用
首先我们需要一个表的结构来存储单元格以供复用，因此我们需要在YFTableView.m中添加实例变量：
//可复用的一组单元格
NSMutableSet * _reuseCells;
现在，我们需要使RefreshView更加智能化。例如，屏幕滚动的单元格需要放入复用池_reuseCells中。此外，当出现空白时，需要从池中取出可复用的单元格填充空白处。
优化refreshView如下：
- (void)refreshView{
//设置scrollView的高度
self.contentSize = CGSizeMake(self.bounds.size.width, [_dataSource numberOfRows] * SHC_ROW_HEIGHT);
//删除不再可见的细胞
for (UIView * cell in [self cellSubViews]) {
//滑出顶部的cell
if (cell.frame.origin.y + cell.frame.size.height < self.contentOffset.y) {
[self recycleCell:cell];
}
//底部没有出现的cell
if (cell.frame.origin.y > self.contentOffset.y + self.frame.size.height) {
[self recycleCell:cell];
}
}
//确保每一行都有一个单元格
int firstVisibleIndex = MAX(0, floor(self.contentOffset.y / SHC_ROW_HEIGHT));
int lastVisibleIndex = MIN([_dataSource numberOfRows], firstVisibleIndex + 1 + ceil(self.frame.size.height / SHC_ROW_HEIGHT));
//添加cell
for (int row = firstVisibleIndex; row < lastVisibleIndex; row ++) {
//获得cell
UIView * cell = [self cellForRow:row];
if (!cell) {
//如果cell不存在（没有复用的cell），则创建一个新的cell添加到scrollView中
UIView * cell = [_dataSource cellForRow:row];
float topEdgeForRow = row * SHC_ROW_HEIGHT;
cell.frame = CGRectMake(0, topEdgeForRow, self.frame.size.width, SHC_ROW_HEIGHT);
[self insertSubview:cell atIndex:0];
}
}
}
//从滚动视图返回一个单元格数组，self子视图时单元格
- (NSArray *)cellSubViews{
NSMutableArray * cells = [[NSMutableArray alloc] init];
for (UIView * subView in self.subviews) {
if ([subView isKindOfClass:[YFTableViewCell class]]) {
[cells addObject:subView];
}
}
return cells;
}
//通过添加一组复用单元格，并从视图中删除它来循环单元格
- (void)recycleCell:(UIView *)cell{
[_reuseCells addObject:cell];
[cell removeFromSuperview];
}
//返回给定的单元格，如果不存在则返回nil
- (UIView *)cellForRow:(NSInteger)row{
float topEdgeForRow = row * SHC_ROW_HEIGHT;
for (UIView * cell in [self cellSubViews]) {
if (cell.frame.origin.y == topEdgeForRow) {
return cell;
}
}
return nil;
}
上面的代码做了一个很好的回收单元格的工资，但是如果没有提供一个机制来允许数据源将cell从池中拉出来，它将毫无用处。因此，我们需要在YFTableView.h中添加一下方法：
//出现一个可以重用的单元格
- (UIView *)dequeueReusableCell;
//注册一个用作新单元格的类
- (void)registerClassForCells:(Class)cellClass;
在实现上述方法之前，您需要为YFTableView.m添加一个实例变量：
//表示单元格类型的类
Class _cellClass;
现在添加方法实现：
- (void)registerClassForCells:(Class)cellClass{
_cellClass = cellClass;
}
- (UIView *)dequeueReusableCell{
//首先从复用池获取一个单元格
UIView * cell = [_reuseCells anyObject];
if (cell) {
NSLog(@"从池中返回单元格");
[_reuseCells removeObject:cell];
}
if (!cell) {
NSLog(@"创建新单单元格");
cell = [[_cellClass alloc] init];
}
return cell;
}
回到ViewController.m中添加注册代码：
[self.tableView registerClassForCells:[YFTableViewCell class]];
并在ViewController.m中替换代码：
//YFTableViewCell * cell = [[YFTableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:ident];
YFTableViewCell * cell = (YFTableViewCell *)[self.tableView dequeueReusableCell];
到此，我们就完成了一个简易的TableView，但我们发现，这是一个固定高度的TableView，当我们需要修改行高时，需要在YFTableView.m里修改，这时非常不合理的。
为实现任意的行高，我们在YFTableViewDataSource中添加新的方法：
//返回表格的高度
- (CGFloat)rowHeight;
在YFTableView.m中实现该方法：
//单元格高度
- (CGFloat)getRowHeight{
CGFloat rowHeight = 50.0f;
@try {
if ([self.dataSource rowHeight]) { //自定义的高度
rowHeight = [self.dataSource rowHeight];
}
} @catch (NSException *exception) {//默认高度
rowHeight = 50.0f;
} @finally {
}
return rowHeight;
}
并且用该方法替换所有SHC_ROW_HEIGHT常量：
//self.contentSize = CGSizeMake(self.bounds.size.width, [_dataSource numberOfRows] * SHC_ROW_HEIGHT);
self.contentSize = CGSizeMake(self.bounds.size.width, [_dataSource numberOfRows] * [self getRowHeight]);
...
这时回到ViewController.m中，当实现rowHeight方法是，行高是该方法中设置的高度，当没有实现该方法是，行高默认为50.0f：
//设置行高为100
- (CGFloat)rowHeight{
return 100;
}
此时运行程序如下：
我们发现表格没有分割线，这时我们可以在YFTableViewCell.m中添加代码实现分割线效果：
#import "YFTableViewCell.h"
@implementation YFTableViewCell{
CAGradientLayer * _gradientLayer;
}
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.colors = @[(id)[[ UIColor colorWithWhite:1.0f alpha:0.2f] CGColor],
(id)[[ UIColor colorWithWhite:1.0f alpha:0.1f] CGColor],
(id)[[ UIColor clearColor] CGColor],
(id)[[ UIColor colorWithWhite:0.0f alpha:0.1f] CGColor]];
_gradientLayer.locations = @[@0.00f,@0.01f,@0.95f,@1.00f];
[self.layer insertSublayer:_gradientLayer above:0];
}
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
_gradientLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
}
- (void)awakeFromNib {
[super awakeFromNib];
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
}
@end
到这里我们就实现了一个自定义的表格视图。
我知道你会看到这里的，那谁还生气吗？
