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