iOS開發小技巧--純代碼自定義cell

純代碼自定義cell

自定義cell的步驟(每個cell的高度不一樣,每個cell里面顯示的內容也不一樣)

• 1.新建一個繼承自UITableViewCell的子類

• 2.在initWithStyle:方法中進行子控件的初始化
  • 2.1將有可能顯示的所有子控件添加到contentView中,代碼如下
  • 2.2順便設置子控件的一些屬性(一次性屬性:文字顏色,字體,背景)

/// cell初始化方法中對子控件進行初始化
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        /** cell頂部的容器 */
        UIView *topContainerView = [[UIView alloc] init];
        [self.contentView addSubview:topContainerView];
        self.topContainerView = topContainerView;
        /** 頭像圖片 */
        UIImageView *headerImageView = [[UIImageView alloc] init];
        [self.topContainerView addSubview:headerImageView];
        self.headerImageView = headerImageView;
        /** 會員圖片 */
        UIImageView *vipImageView = [[UIImageView alloc] init];
        [self.topContainerView addSubview:vipImageView];
        self.vipImageView = vipImageView;
        /** 微博圖片 */
        UIImageView *photoImageView = [[UIImageView alloc] init];
        [self.topContainerView addSubview:photoImageView];
        self.photoImageView = photoImageView;
        /** 名稱 */
        UILabel *nameLabel = [[UILabel alloc] init];
        [self.topContainerView addSubview:nameLabel];
        self.nameLabel = nameLabel;
        /** 時間 */
        UILabel *timeLabel = [[UILabel alloc] init];
        [self.topContainerView addSubview:timeLabel];
        self.timeLabel = timeLabel;
        /** 來源 */
        UILabel *sourceLabel = [[UILabel alloc] init];
        [self.topContainerView addSubview:sourceLabel];
        self.sourceLabel = sourceLabel;
        /** 正文 */
        UILabel *contentLabel = [[UILabel alloc] init];
        [self.topContainerView addSubview:contentLabel];
        self.contentLabel = contentLabel;
    }
    return self;
}

• 3.提供兩個模型
  • 3.1一個是數據模型(文字數據 + 圖片數據)
  • 3.2一個是frame模型(數據模型 + 所有子控件的frame + cell的高度)

/// frame模型中重寫數據模型的set方法,根據數據計算各控件的frame
- (void)setStatus:(ChaosStatus *)status
{
    _status = status;
    ChaosUser *user = status.user;
    // 計算frame

    /** 頭像圖片 */
    CGFloat headerX = ChaosStatusCellBorderWidth;
    CGFloat headerY = ChaosStatusCellBorderWidth;
    CGFloat headerWH = 50;
    self.headerImageViewF = CGRectMake(headerX, headerY, headerWH, headerWH);

    /** 名稱 */
    CGFloat nameLabelX = CGRectGetMaxX(self.headerImageViewF) + ChaosStatusCellBorderWidth;
    CGFloat nameLabelY = headerY;

    CGSize nameLabelSize = [self sizeWithText:user.screen_name font:ChaosStatusNameLabelFont];
    self.nameLabelF = (CGRect){{nameLabelX,nameLabelY},nameLabelSize};

    /** 會員圖片 */
    CGFloat vipX = CGRectGetMaxX(self.nameLabelF) + ChaosStatusCellBorderWidth;
    CGFloat vipY = headerY;
    CGFloat vipW = 25;
    CGFloat vipH = nameLabelSize.height;
    if (status.user.isVip) {
        self.vipImageViewF = CGRectMake(vipX, vipY, vipW, vipH);
    }

    /** 時間 */
    CGFloat timeLabelX = nameLabelX;
    CGFloat timeLabelY = CGRectGetMaxY(self.nameLabelF) + ChaosStatusCellBorderWidth;
    CGSize timeLabelSize = [self sizeWithText:status.created_at font:ChaosStatusTimeLabelFont];
    self.timeLabelF = (CGRect){{timeLabelX,timeLabelY},timeLabelSize};

    /** 來源 */
    CGFloat sourceLabelX = CGRectGetMaxX(self.timeLabelF) + ChaosStatusCellBorderWidth;
    CGFloat sourceLabelY = timeLabelY;
    CGSize sourceLabelSize = [self sizeWithText:status.source font:ChaosStatusSourceLabelFont];
    self.sourceLabelF = (CGRect){{sourceLabelX,sourceLabelY},sourceLabelSize};

    /** 正文 */
    CGFloat contentX = headerX;
    CGFloat contentY = MAX(CGRectGetMaxY(self.headerImageViewF), CGRectGetMaxY(self.timeLabelF)) + 10;
    CGSize contentSize = [self sizeWithText:status.text font:ChaosStatusContentLabelFont maxWidth:ChaosScreenSize.width - 2 * ChaosStatusCellBorderWidth];
    self.contentLabelF = (CGRect){{contentX,contentY},contentSize};
    /** 微博圖片 */


    /** cell頂部的容器 */
    self.topContainerViewF = CGRectMake(0, 0, ChaosScreenSize.width, CGRectGetMaxY(self.contentLabelF));

    /** cell高度 */
    self.cellHeight = CGRectGetMaxY(self.topContainerViewF) + ChaosStatusCellBorderWidth;
}

• 4.cell應該提供一個frame模型屬性
  • 4.1將frame模型傳遞給cell
  • 4.2cell根據frame模型給子控件設置frame,根據數據模型給子控件設置數據
  • 4.3cell根據數據模型決定顯示和隱藏那些子控件

/// cell中重寫模型的set,方法中設置控件的frame.設置控件的數據
- (void)setStatusFrame:(ChaosStatusFrame *)statusFrame
{
    _statusFrame = statusFrame;

    ChaosStatus *status = statusFrame.status;
    ChaosUser *user = status.user;

    /** 頭像圖片 */
    self.headerImageView.frame = statusFrame.headerImageViewF;
    [self.headerImageView sd_setImageWithURL:[NSURL URLWithString:user.profile_image_url] placeholderImage:[UIImage imageNamed:@"avatar_default_small"]];

    /** 會員圖片 */
    self.vipImageView.frame = statusFrame.vipImageViewF;
    self.vipImageView.contentMode = UIViewContentModeCenter;
    if (user.isVip) { // 是會員
        self.vipImageView.hidden = NO;
        NSString *str = [NSString stringWithFormat:@"common_icon_membership_level%d",user.mbrank];
        self.vipImageView.image = [UIImage imageNamed:str];
        // 文字顏色
        self.nameLabel.textColor = [UIColor orangeColor];
    } else { // 不是會員
        self.vipImageView.hidden = YES;
        // 文字顏色
        self.nameLabel.textColor = [UIColor blackColor];
    }

    /** 名稱 */
    self.nameLabel.frame = statusFrame.nameLabelF;
    self.nameLabel.font = ChaosStatusNameLabelFont;
    self.nameLabel.text = user.screen_name;

    /** 時間 */
    self.timeLabel.frame = statusFrame.timeLabelF;
    self.timeLabel.font = ChaosStatusTimeLabelFont;
    self.timeLabel.text = status.created_at;
    self.timeLabel.textColor = [UIColor grayColor];

    /** 來源 */
    self.sourceLabel.frame = statusFrame.sourceLabelF;
    self.sourceLabel.font = ChaosStatusSourceLabelFont;
    self.sourceLabel.text = status.source;
    self.sourceLabel.textColor = [UIColor lightGrayColor];

    /** 正文 */
    self.contentLabel.frame = statusFrame.contentLabelF;
    self.contentLabel.text = status.text;
    self.contentLabel.numberOfLines = 0;
    self.contentLabel.textColor = [UIColor blackColor];
    self.contentLabel.font = ChaosStatusContentLabelFont;

    /** 微博圖片 */
    self.photoImageView.frame = statusFrame.photoImageViewF;

    /** cell頂部的容器 */
    self.topContainerView.frame = statusFrame.topContainerViewF;
    self.topContainerView.backgroundColor = [UIColor orangeColor];
}

• 5在tableView的代理方法中返回cell的高度