自定义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;
}