玩转tableview-自定义table cell之一(全代码绘制)

最近的项目用到比较多的自定义cell的情况，目前有才有两种方式，一种是通过代码控制，一种是通过xib做布局。

先介绍第一种方式，具体实现了如下效果：

主要代码：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellWithIdentifier = @"CategoryCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellWithIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellWithIdentifier];
    }
    
    //先去掉cell中的子视图，防止重复绘制
    for (id labelView in [cell.contentView subviews]) {
        [labelView removeFromSuperview];
    }
    
    NSUInteger row = [indexPath row];
    NSDictionary *todoDic = [self.todoList objectAtIndex:row];
    
    // 自定义Cell中Image
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(13, 13, 36, 36)];
    NSString *imgName = [Utils getTypeImage:[[todoDic valueForKey:@"type"] intValue]];
    imageView.image = [UIImage imageNamed:imgName];
    imageView.layer.borderWidth = 0;
    imageView.layer.borderColor= [UIColor clearColor].CGColor;
    if ([[todoDic valueForKey:@"tipbadge"] boolValue]) {
        //加个图标
        CGFloat badgeWidth = 15.0f;
        CGFloat badgeHeight = badgeWidth;
        UIImageView *badgeImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"category_red.png"]];
        badgeImage.frame = CGRectMake(imageView.frame.origin.x + imageView.frame.size.width - badgeWidth-5,
                                     imageView.frame.origin.y - badgeHeight-5,
                                     badgeWidth,
                                     badgeHeight);
        //badgeImage.layer.zPosition = 2;   //视图层级
        [imageView addSubview:badgeImage];
    }
    
    [cell.contentView addSubview:imageView];
    
    // 自定义文本信息
    UILabel *categoryTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 20, 140, 24)];
    categoryTitleLabel.backgroundColor = [UIColor clearColor];
    categoryTitleLabel.font = [UIFont fontWithName:@"Arial" size:18];
    categoryTitleLabel.text = [todoDic objectForKey:@"title"];
    [cell.contentView addSubview:categoryTitleLabel];
    
    // 自定义文本信息
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(255, 20, 42, 24)];
    label.text = [todoDic objectForKey:@"count"];
    label.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"category_bg.png"]];
    
    //label.backgroundColor = [UIColor grayColor];   //设置label的背景色，这里设置为透明色。
    //label.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"category_bg.png"]];
    //label.layer.borderWidth  = 1.0f;
    //label.layer.borderColor  = [UIColor darkGrayColor].CGColor;
    //label.layer.cornerRadius = 10.0f;//此处设置label的圆角程度，比较影响绘制效率，会有卡顿现象
    label.font = [UIFont fontWithName:@"Arial" size:16];   //设置label的字体和字体大小。
    //label.transform = CGAffineTransformMakeRotation(0.1);     //设置label的旋转角度
    label.textColor = [UIColor whiteColor];    //设置文本的颜色
    //label.shadowColor = [UIColor colorWithWhite:0.1f alpha:0.8f];    //设置文本的阴影色彩和透明度。
    //label.shadowOffset = CGSizeMake(2.0f, 2.0f);     //设置阴影的倾斜角度。
    label.textAlignment = NSTextAlignmentCenter;     //设置文本在label中显示的位置，这里为居中。
    [cell.contentView addSubview:label];
    
    return cell;
}

另外，支持根据有无数据给图标加红色圆点。因为加圆点比较简单，直接在imageview上叠加图片就可以了。

要注意的地方：

1、绘制cell时需去掉cell中的子视图，防止重复绘制出现叠加

//先去掉cell中的子视图，防止重复绘制
    for (id labelView in [cell.contentView subviews]) {
        [labelView removeFromSuperview];
    }

2、label的背景图片大小保持和label大小一致，不会出现形变

当然，因为不是可视化的用xib进行布局，里面的参数都可以自己进行调整。也可以采用动态计算的方式，根据行高来按比例缩放。