解决tableviewCell覆盖的问题以及tableviewCell复用原理

先说一下解决办法:

1.在自定义的tableviewCell的m文件中,重写

-(instancetype)initWithStyle:(UITableViewCellStyle)style

reuseIdentifier:(NSString *)reuseIdentifier方法,将控件的初

始化放在这里方法里面. 并自定义一个函数,为相应的控件赋值.

@property (strong, nonatomic) UIButton *iconBtn;
@property (strong, nonatomic) UIButton *productBtn;
@property (strong, nonatomic) UILabel *industryLbl;
@property (strong, nonatomic) UILabel *reportTimeLbl;
@property (strong, nonatomic) UILabel *companyLbl;
@property (strong, nonatomic) UILabel *titleLbl;
@property (strong, nonatomic) UILabel *srcLbl;

/**
*  重写initWithStyle:reuseIdentifier:方法
*
*  @param style
*  @param reuseIdentifier
*
*  @return
*/

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{

self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
if (self) {

_iconBtn = [[UIButton alloc] initWithFrame:CGRectMake(8, 8, 60, 60)];
_productBtn = [[UIButton alloc] init];
_companyLbl = [[UILabel alloc] init];
_reportTimeLbl = [[UILabel alloc] initWithFrame:CGRectMake(kScreenWidth - 78, 10, 70, 20)];
_industryLbl = [[UILabel alloc] init];
_titleLbl = [[UILabel alloc] init];
_srcLbl = [[UILabel alloc] init];

[self.contentView addSubview:_iconBtn];
[self.contentView addSubview:_productBtn];
[self.contentView addSubview:_companyLbl];
[self.contentView addSubview:_reportTimeLbl];
[self.contentView addSubview:_industryLbl];
[self.contentView addSubview:_titleLbl];
[self.contentView addSubview:_srcLbl];
}
return self;
}
/**
*  自定义函数,为cell里面控件赋值
*
*  @param product
*/
- (void)initData:(ProductModel *)product{

NSURL *iconUrl = [NSURL URLWithString:product.icon];
[_iconBtn setImageForState:UIControlStateNormal withURL:iconUrl placeholderImage:[UIImage imageNamed:@"loudou"]];
[_iconBtn.layer setCornerRadius:30.f];
[_iconBtn.layer setMasksToBounds:YES];
_iconBtn.layer.borderWidth = 1.f;
_iconBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;

NSString *productStr = product.product;
CGFloat productX = 8 + 60 + 8;
CGFloat productW = [self calculateSize:productStr withFontSize:12.f].width;
_productBtn.frame = CGRectMake(productX, 10, productW, 20);
[_productBtn setTitle:productStr forState:UIControlStateNormal];
_productBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[_productBtn setTitleColor:[[UIColor alloc] initWithRed:48/255.f green:131/255.f blue:251/255.f alpha:1.0] forState:UIControlStateNormal];
_productBtn.titleLabel.font = [UIFont systemFontOfSize:12.f];

NSString *industryStr = product.industry;
CGFloat industryX = productX +productW + 3;
CGFloat industryW = kScreenWidth - industryX - 78;
_industryLbl.frame = CGRectMake(industryX, 10, industryW, 20);
_industryLbl.text = industryStr;
_industryLbl.font = [UIFont systemFontOfSize:13.f];
_industryLbl.textAlignment = NSTextAlignmentLeft;

_reportTimeLbl.text = product.report_time;
_reportTimeLbl.font = [UIFont systemFontOfSize:12.f];

NSString *titleStr = product.title;
CGSize titleSize = [self calculateSize:titleStr withFontSize:15.f];
CGFloat titleH = titleSize.height;
CGFloat titleW = kScreenWidth - 76 - 8;
_titleLbl.frame = CGRectMake(76, 48, titleW, titleH);
_titleLbl.textColor = [[UIColor alloc] initWithRed:48/255.f green:131/255.f blue:251/255.f alpha:1.0];
_titleLbl.text = product.title;
_titleLbl.backgroundColor = [UIColor clearColor];
_titleLbl.font = [UIFont systemFontOfSize:15.f];
_titleLbl.numberOfLines = 0;
_titleLbl.lineBreakMode = NSLineBreakByWordWrapping;

_srcLbl.frame = CGRectMake(76, 48 + titleH, titleW, 20);
_srcLbl.backgroundColor = [UIColor clearColor];
_srcLbl.textColor = [UIColor grayColor];
_srcLbl.text = product.src;
_srcLbl.textAlignment = NSTextAlignmentRight;
_srcLbl.font = [UIFont systemFontOfSize:14.f];

_companyLbl.frame = CGRectMake(76, _srcLbl.frame.origin.y + 20, kScreenWidth - 76 - 8, 20);
_companyLbl.text = product.company;
_companyLbl.textAlignment = NSTextAlignmentLeft;
_companyLbl.font = [UIFont systemFontOfSize:13.f];
}

2.在tableview里的调用

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

ProductModel *product = [_page.productArr objectAtIndex:indexPath.row];

_cellIdentifier = @"ReportTableViewCell";

ReportingTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:_cellIdentifier];
if (!cell) {
cell = [[ReportingTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:_cellIdentifier];
}
[cell initData:product];
return cell;
}

接下来展示一下会出现问题的代码:

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

ProductModel *product = [_page.productArr objectAtIndex:indexPath.row];

_cellIdentifier = @"ReportTableViewCell";

ReportingTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:_cellIdentifier];
if (!cell) {
cell = [[ReportingTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:_cellIdentifier];
}

UILabel *reportTimeLbl = [[UILabel alloc] initWithFrame:CGRectMake(kScreenWidth - 78, 10, 70, 20)];
reportTimeLbl.text = product.report_time;
[cell.contentView addSubview:reportTimeLbl];

return cell;
}

因为复用,reportTimeLbl会一遍又一遍的去初始化然后添加到cell的contentView上,导致重叠.具体tableviewCell复用原理如下:

===============================这里是分隔线,下面为转载内容===============================

omegayy的CSDN

============================================================================

　TableView的重用机制,为了做到显示和数据分离,tableView

的实现并且不是为每个数据项创建一个tableViewCell。而是只创建屏幕可显示最大个数的cell，然后重复使用这些cell，对cell做单独的显示配置，来达到既不影响显示效果，又能充分节约内容的目的。下面简要分析一下它的实现原理。

　　

重用实现分析

　　查看UITableView头文件，会找到NSMutableArray* visiableCells，和NSMutableDictnery* reusableTableCells两个结构。visiableCells内保存当前显示的cells，reusableTableCells保存可重用的cells。

　　TableView显示之初，reusableTableCells为空，那么tableView dequeueReusableCellWithIdentifier:CellIdentifier返回nil。开始的cell都是通过[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]来创建，而且cellForRowAtIndexPath只是调用最大显示cell数的次数。

　　比如：有100条数据，iPhone一屏最多显示10个cell。程序最开始显示TableView的情况是：

　　1. 用[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]创建10次cell，并给cell指定同样的重用标识(当然，可以为不同显示类型的cell指定不同的标识)。并且10个cell全部都加入到visiableCells数组，reusableTableCells为空。

　　　2. 向下拖动tableView，当cell1完全移出屏幕，并且cell11(它也是alloc出来的，原因同上)完全显示出来的时候。cell11加入到visiableCells，cell1移出visiableCells，cell1加入到reusableTableCells。

　　　3. 接着向下拖动tableView，因为reusableTableCells中已经有值，所以，当需要显示新的cell，cellForRowAtIndexPath再次被调用的时候，tableView dequeueReusableCellWithIdentifier:CellIdentifier，返回cell1。cell1加入到visiableCells，cell1移出reusableTableCells；cell2移出visiableCells，cell2加入到reusableTableCells。之后再需要显示的Cell就可以正常重用了。

　　　所以整个过程并不难理解，但需要注意正是因为这样的原因：配置Cell的时候一定要注意，对取出的重用的cell做重新赋值，不要遗留老数据。

一些情况

　　　使用过程中，我注意到，并不是只有拖动超出屏幕的时候才会更新reusableTableCells表，还有：

　　　1. reloadData，这种情况比较特殊。一般是部分数据发生变化，需要重新刷新cell显示的内容时调用。在cellForRowAtIndexPath调用中，所有cell都是重用的。我估计reloadData调用后，把visiableCells中所有cell移入reusableTableCells，visiableCells清空。cellForRowAtIndexPath调用后，再把reuse的cell从reusableTableCells取出来，放入到visiableCells。

　　　2. reloadRowsAtIndex，刷新指定的IndexPath。如果调用时reusableTableCells为空，那么cellForRowAtIndexPath调用后，是新创建cell，新的cell加入到visiableCells。老的cell移出visiableCells，加入到reusableTableCells。于是，之后的刷新就有cell做reuse了。