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的高度