iOS——自定义cell的两种方式

来源：互联网发布：n显卡超频软件编辑：程序博客网时间：2024/05/29 02:58

自定义cell

——————————————————————————————————————————————————————————————————————————

-通过xib自定义cell

-通过代码自定义cell

使用xib封装一个view的步骤

新建一个xib文件描述一个view的内部结构(假设叫做MJTgCell.xib)

新建一个自定义的类

(自定义类需要继承自系统自带的view,继承自哪个类, 取决于xib根对象的Class)

新建类的类名最好跟xib的文件名保持一致(比如类名就叫做MJTgCell)

将xib中的控件和自定义类的.m文件进行连线

提供一个类方法返回一个创建好的自定义view(屏蔽从xib加载的过程)

提供一个模型属性让外界传递模型数据

重写模型属性的setter方法,在这里将模型数据展示到对应的子控件上面

#import "MJTgCell.h"

#import "MJTg.h"

@interface MJTgCell()

@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@property (weak, nonatomic) IBOutlet UILabel *titleView;

@property (weak, nonatomic) IBOutlet UILabel *priceView;

@property (weak, nonatomic) IBOutlet UILabel *buyCountView;

@end

@implementation MJTgCell

+ (instancetype)cellWithTableView:(UITableView *)tableView

{

static NSString *ID = @"tg";

MJTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

if (cell == nil) {

// 从xib中加载cell

cell = [[[NSBundle mainBundle] loadNibNamed:@"MJTgCell" owner:nil options:nil] lastObject];

}

return cell;

}

- (void)setTg:(MJTg *)tg

{

_tg = tg;

// 1.图片

self.iconView.image = [UIImage imageNamed:tg.icon];

// 2.标题

self.titleView.text = tg.title;

// 3.价格

self.priceView.text = [NSString stringWithFormat:@"￥%@", tg.price];

// 4.购买数

self.buyCountView.text = [NSString stringWithFormat:@"%@人已购买", tg.buyCount];

}

@end

1 新建一个继承自UITableViewCell的类

2.重写initWithStyle:reuseIdentifier:方法

添加所有需要显示的子控件(不需要设置子控件的数据和frame, 子控件要添加到contentView中)

进行子控件一次性的属性设置(有些属性只需要设置一次,比如字体\固定的图片)

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

if (self) {

// 1.头像

UIImageView *iconView = [[UIImageView alloc] init];

[self.contentView addSubview:iconView];

self.iconView = iconView;

// 2.昵称

UILabel *nameView = [[UILabel alloc] init];

nameView.font = MJNameFont;

[self.contentView addSubview:nameView];

self.nameView = nameView;

// 3.会员图标

UIImageView *vipView = [[UIImageView alloc] init];

vipView.image = [UIImage imageNamed:@"vip"];

[self.contentView addSubview:vipView];

self.vipView = vipView;

// 4.正文

UILabel *textView = [[UILabel alloc] init];

textView.numberOfLines = 0;

textView.font = MJTextFont;

[self.contentView addSubview:textView];

self.textView = textView;

// 5.配图

UIImageView *pictureView = [[UIImageView alloc] init];

[self.contentView addSubview:pictureView];

self.pictureView = pictureView;

}

return self;

}

3.提供2个模型

数据模型: 存放文字数据\图片数据

@interface MJStatus : NSObject

@property (nonatomic, copy) NSString *text; // 内容

@property (nonatomic, copy) NSString *icon; // 头像

@property (nonatomic, copy) NSString *name; // 昵称

@property (nonatomic, copy) NSString *picture; // 配图

@property (nonatomic, assign) BOOL vip;

- (instancetype)initWithDict:(NSDictionary *)dict;

+ (instancetype)statusWithDict:(NSDictionary *)dict;

@end

@implementation MJStatus

- (instancetype)initWithDict:(NSDictionary *)dict

{

if (self = [super init]) {

[self setValuesForKeysWithDictionary:dict];

}

return self;

}

+ (instancetype)statusWithDict:(NSDictionary *)dict

{

return [[self alloc] initWithDict:dict];

}

@end

frame模型: 存放数据模型\所有子控件的frame\cell的高度

@class MJStatus;

@interface MJStatusFrame : NSObject

/**

* 头像的frame

@property (nonatomic, assign, readonly) CGRect iconF;

/**

* 昵称的frame

@property (nonatomic, assign, readonly) CGRect nameF;

/**

* 会员图标的frame

@property (nonatomic, assign, readonly) CGRect vipF;

/**

* 正文的frame

@property (nonatomic, assign, readonly) CGRect textF;

/**

* 配图的frame

@property (nonatomic, assign, readonly) CGRect pictureF;

/**

* cell的高度

@property (nonatomic, assign, readonly) CGFloat cellHeight;

@property (nonatomic, strong) MJStatus *status;

@end

4.cell拥有一个frame模型(不要直接拥有数据模型)

- (void)setStatusFrame:(MJStatusFrame *)statusFrame

{

_statusFrame = statusFrame;

// 1.设置数据

[self settingData];

// 2.设置frame

[self settingFrame];

}

/**

* 设置数据

- (void)settingData

{

// 微博数据

MJStatus *status = self.statusFrame.status;

// 1.头像

self.iconView.image = [UIImage imageNamed:status.icon];

// 2.昵称

self.nameView.text = status.name;

// 3.会员图标

if (status.vip) {

self.vipView.hidden = NO;

self.nameView.textColor = [UIColor redColor];

} else {

self.vipView.hidden = YES;

self.nameView.textColor = [UIColor blackColor];

}

// 4.正文

self.textView.text = status.text;

// 5.配图

if (status.picture) { // 有配图

self.pictureView.hidden = NO;

self.pictureView.image = [UIImage imageNamed:status.picture];

} else { // 没有配图

self.pictureView.hidden = YES;

}

/**

* 设置frame

- (void)settingFrame

{

// 1.头像

self.iconView.frame = self.statusFrame.iconF;

// 2.昵称

self.nameView.frame = self.statusFrame.nameF;

// 3.会员图标

self.vipView.frame = self.statusFrame.vipF;

// 4.正文

self.textView.frame = self.statusFrame.textF;

// 5.配图

if (self.statusFrame.status.picture) {// 有配图

self.pictureView.frame = self.statusFrame.pictureF;

}

5.重写frame模型属性的setter方法:在这个方法中设置子控件的显示数据和frame

@implementation MJStatusFrame

/**

* 计算文字尺寸

* @param text 需要计算尺寸的文字

* @param font 文字的字体

* @param maxSize 文字的最大尺寸

- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize

{

NSDictionary *attrs = @{NSFontAttributeName : font};

return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;

}

- (void)setStatus:(MJStatus *)status

{

_status = status;

// 子控件之间的间距

CGFloat padding = 10;

// 1.头像

CGFloat iconX = padding;

CGFloat iconY = padding;

CGFloat iconW = 30;

CGFloat iconH = 30;

_iconF = CGRectMake(iconX, iconY, iconW, iconH);

// 2.昵称

// 文字的字体

CGSize nameSize = [self sizeWithText:self.status.name font:MJNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];

CGFloat nameX = CGRectGetMaxX(_iconF) + padding;

CGFloat nameY = iconY + (iconH - nameSize.height) * 0.5;

_nameF = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);

// 3.会员图标

CGFloat vipX = CGRectGetMaxX(_nameF) + padding;

CGFloat vipY = nameY;

CGFloat vipW = 14;

CGFloat vipH = 14;

_vipF = CGRectMake(vipX, vipY, vipW, vipH);

// 4.正文

CGFloat textX = iconX;

CGFloat textY = CGRectGetMaxY(_iconF) + padding;

CGSize textSize = [self sizeWithText:self.status.text font:MJTextFont maxSize:CGSizeMake(300, MAXFLOAT)];

_textF = CGRectMake(textX, textY, textSize.width, textSize.height);

// 5.配图

if (self.status.picture) {// 有配图

CGFloat pictureX = textX;

CGFloat pictureY = CGRectGetMaxY(_textF) + padding;

CGFloat pictureW = 100;

CGFloat pictureH = 100;

_pictureF = CGRectMake(pictureX, pictureY, pictureW, pictureH);

_cellHeight = CGRectGetMaxY(_pictureF) + padding;

} else {

_cellHeight = CGRectGetMaxY(_textF) + padding;

}

@end

6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)

- (NSArray *)statusFrames

{

if (_statusFrames == nil) {

// 初始化

// 1.获得plist的全路径

NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];

// 2.加载数组

NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

// 3.将dictArray里面的所有字典转成模型对象,放到新的数组中

NSMutableArray *statusFrameArray = [NSMutableArray array];

for (NSDictionary *dict in dictArray) {

// 3.1.创建MJStatus模型对象

MJStatus *status = [MJStatus statusWithDict:dict];

// 3.2.创建MJStatusFrame模型对象

MJStatusFrame *statusFrame = [[MJStatusFrame alloc] init];

statusFrame.status = status;

// 3.2.添加模型对象到数组中

[statusFrameArray addObject:statusFrame];

}

// 4.赋值

_statusFrames = statusFrameArray;

}

return _statusFrames;

}

0 0