玩轉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進行佈局，裏面的參數都可以自己進行調整。也可以採用動態計算的方式，根據行高來按比例縮放。