解决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了。