首页 > 代码库 > 自定义UITableViewCell新浪微博

自定义UITableViewCell新浪微博

自定义UITableViewCell新浪微博

自定义UITableViewCell的步骤:

1.新建一个继承自UITableViewCell的类

2.重写initWithStyle:reuseIdentifier:方法
添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView)
进行子控件一次性的属性设置(有些属性只需要设置一次比如字体\固定的图片)

3.提供2个模型
数据模型存放文字数据\图片数据
frame
模型存放数据模型\所有子控件的frame\cell的高度

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

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

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

步骤一:根据plist文件,创建Model层数据。

@property (nonatomic,copyNSString *text;// 正文
@property (nonatomic,copyNSString *icon;// 头像
@property (nonatomic,copyNSString *picture;// 图片
@property (nonatomic,copyNSString *name;// name
@property (nonatomic,assignBOOL vip;// vip

+ (
instancetype)weiboWithDict:(NSDictionary *)dict;
- (
instancetype)initWithDict:(NSDictionary *)dict;
+ (NSArray*)weibos;

- (instancetype)initWithDict:(NSDictionary*)dict
{
   
if (self= [superinit]) {
        [
selfsetValuesForKeysWithDictionary:dict];
    }
   
return self;
}

+ (
instancetype)weiboWithDict:(NSDictionary*)dict
{
   
return [[selfalloc]initWithDict:dict];
}

+ (NSArray*)weibos
{
   
NSArray *array = [NSArrayarrayWithContentsOfFile:[[NSBundlemainBundle]pathForResource:@"statuses.plist"ofType:nil]];
   
   
NSMutableArray *arrayM = [NSMutableArrayarray];
   
for (NSDictionary*dict in array) {
        [arrayM
addObject:[selfstatusWithDict:dict]];
    }
   
return arrayM;
}

步骤二:实现数据源方法,查看数据是否能显示出来。
- (NSArray*)weibos
{
   
if (_weibos== nil) {
       
_weibos = [SUNWeiboItem weibos];
    }
   
return _weibos;
}

#pragma mark -数据源方法
- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section
{
   
return self.statuses.count;
}

- (
UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath
{
   
static NSString *ID =@"cell";
   
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
   
if (cell ==nil) {
        cell = [[
UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:ID];
    }
   
SUNWeiboItem *weiboItem =self.statuses[indexPath.row];
    cell.
textLabel.text= weiboItem.name;
   
return cell;
}


步骤三:创建自定义SUNWeiboCell继承自UITableViewCell,根据需求,确定控件,并定义属性。
@property(nonatomic,strong) UIImageView *iconView;
@property(nonatomic,strong) UILabel *nameView;
@property(nonatomic,strong) UIImageView *vipView;
@property(nonatomic,strong) UILabel *textView;
@property(nonatomic,strong) UIImageView *pictureView;

步骤四、getter方法完成控件的实例化,只创建并添加到contentView,不处理位置。
/**姓名字体*/
#define kNameFont   [UIFont systemFontOfSize:14]
/**正文字体*/
#define kTextFont   [UIFont systemFontOfSize:16]
- (UIImageView*)iconView
{
   
if (_iconView== nil) {
       
_iconView = [[UIImageViewalloc]init];
        [
self.contentViewaddSubview:_iconView];
    }
   
return _iconView;
}

- (
UILabel*)nameView
{
   
if (_nameView== nil) {
       
_nameView = [[UILabelalloc]init];
       
// 默认字体是17
       
_nameView.font= kNameFont;
        [
self.contentViewaddSubview:_nameView];
    }
   
return _nameView;
}
注意:
UILabel中默认的字体是17号。

- (
UIImageView*)vipView
{
   
if (_vipView== nil) {
       
_vipView = [[UIImageViewalloc]init];
       
_vipView.image= [UIImageimageNamed:@"vip"];
       
_vipView.hidden= YES;
        [
self.contentViewaddSubview:_vipView];
    }
   
return _vipView;
}

- (
UILabel*)textView
{
   
if (_textView== nil) {
       
_textView = [[UILabelalloc]init];
       
_textView.font= kTextFont;
       
_textView.numberOfLines= 0;
        [
self.contentViewaddSubview:_textView];
    }
   
return _textView;
}
注意:
numberOfLines属性是换行的意思。
- (
UIImageView*)pictureView
{
   
if (_pictureView== nil) {
       
_pictureView = [[UIImageViewalloc]init];
        [
self.contentViewaddSubview:_pictureView];
    }
   
return _pictureView;
}

步骤五:在自定义cell里面,定义一个模型属性,通过setter方法,设置cell的显示。
@property(nonatomic,strong)SUNWeiboItem *weiboItem;
- (void)setWeiboItem:(SUNWeiboItem*)weiboItem
{
   
_weiboItem = weiboItem;
   
// 1> 设置数据
    [
selfsettingData];
   
   
// 2> 设置位置
    [
selfsettingFrame];
}

注意:
在主方法中,代码不宜过长。
/**设置数据*/
- (
void)settingData
{
   
// 头像
   
self.iconView.image= [UIImageimageNamed:self.weiboItem.icon];
   
// 姓名
   
self.nameView.text= self.weiboItem.name;
   
// vip(可选的)
   
if (self.weiboItem.vip) {
       
self.vipView.hidden= NO;
       
self.nameView.textColor= [UIColorredColor];
    }
else {
       
self.vipView.hidden= YES;
       
self.nameView.textColor= [UIColorblackColor];
    }
   
   
// 正文
   
self.textView.text= self.weiboItem.text;
   
   
// 配图(可选参数)
   
if (self.weiboItem.picture.length> 0) {
       
self.pictureView.hidden= NO;
       
self.pictureView.image= [UIImageimageNamed:self.weiboItem.picture];
    }
else {
       
self.pictureView.hidden= YES;
    }
}
/**设置位置*/
- (
void)settingFrame
{
   
// 0. 定义间距
   
CGFloat padding =10;
   
   
// 1. 头像
   
CGFloat iconX = padding;
   
CGFloat iconY = padding;
   
CGFloat iconW =30;
   
CGFloat iconH =30;
   
self.iconView.frame= CGRectMake(iconX, iconY, iconW, iconH);
   
   
// 2. 姓名大小由文字的长度来决定
   
NSDictionary *nameDict =@{NSFontAttributeName:kNameFont};
   
CGRect nameFrame = [weiboItem.nameboundingRectWithSize:CGSizeMake(MAXFLOAT,MAXFLOAT)options:NSStringDrawingUsesLineFragmentOriginattributes:nameDictcontext:nil];
    nameFrame.
origin.x= CGRectGetMaxX(self.iconView.frame) + padding;
    nameFrame.
origin.y= padding + (self.iconView.bounds.size.height- nameFrame.size.height) * 0.5;
   
self.nameView.frame= nameFrame;
    注意:
    文字的大小,最好和vip图标的宽度一致,这样比较容易计算出vip的位置。
   
// vip图标
   
CGFloat vipX =CGRectGetMaxX(self.nameView.frame) + padding;
   
CGFloat vipY =self.nameView.frame.origin.y;
   
CGFloat vipW =14;
   
CGFloat vipH =14;
   
self.vipView.frame= CGRectMake(vipX, vipY, vipW, vipH);
   
   
// 正文
   
NSDictionary *textDict =@{NSFontAttributeName:kTextFont};
   
CGRect textFrame = [weiboItem.textboundingRectWithSize:CGSizeMake(300,MAXFLOAT)options:NSStringDrawingUsesLineFragmentOriginattributes:textDictcontext:nil];
    textFrame.
origin.x= padding;
    textFrame.
origin.y= CGRectGetMaxY(self.iconView.frame) + padding;
   
self.textView.frame= textFrame;
    注意:
    boundingRectWithSize属性,如果文字不换行的话,可以设置为CGSizeMake(MAXFLOATMAXFLOAT)。如果文字需要换行的话,需要指定宽度,即CGSizeMake(300MAXFLOAT)。
   
CGFloat cellHeight;
   
   
if ( weiboItem.picture.length> 0) {
       
// 配图
       
CGFloat pictureX = padding;
       
CGFloat pictureY =CGRectGetMaxY(textFrame) + padding;
       
CGFloat pictureW =100;
       
CGFloat pictureH =100;
       
self.pictureView.frame= CGRectMake(pictureX, pictureY, pictureW, pictureH);

        注意:
        一般在自定义表格中的配图的宽度和高度是固定死的,这样容易计算配图的位置。        
        cellHeight =CGRectGetMaxY(self.pictureView.frame) + padding;
    }
else {
        cellHeight =
CGRectGetMaxY(self.textView.frame) + padding;
    }
}

注意:
1.boundingRectWithSize计算给定文本字符串所占的区域返回值是一个x,y = 0CGRect,w,h是计算好的宽高。
2.如果要计算多行的准确高度,需要传入NSStringDrawingUsesLineFragmentOrigin选项。
3.attributes属性用于指定字体的相关属性的字典,UIKit框架中的第一个头文件。
4.context: nil

步骤六、在控制器实现UITableView的代理方法调整为
#pragma mark - 数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    
return self.statuses.count;
}
- (
UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@“222222222222222222");
    
static NSString *ID = @"cell";
    
SUNWeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
if (cell == nil) {
        cell = [[
SUNWeiboCell allocinitWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    cell.
weiboItem = self.statuses[indexPath.row];
    
return cell;
}

/**计算单元格行高*/
- (
CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath
{

   
NSLog(@"111111111111111111111");
   
return 200;
}


问题分析:
1.在加载表格数据调用此方法前- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath,会首先调用- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath方法计算所有单元格的高度,而此时单元格尚未被实例化。
2.因此获取每一行的高度,不能直接从cell对象中获取,因为那时候还没创建cell对象,因此我们需要另外创建一个模型,用来管理cell内部所有子控件的framecell的总高度。

解决思路:既然"单元格的行高是通过模型的实际内容计算的。
那么,在加载数据模型时,应该就可以准确地计算出每一行的准确行高了。

解决办法:创建
SUNWeiboFrameItem 模型,专门处理行高的计算。

步骤七、创建SUNWeiboFrameItem模型,专门处理行高的计算。
/**专门计算所有控件位置*/
@interfaceSUNWeiboFrameItem :NSObject

@property(nonatomic,assign)CGRect iconImageViewF;//头像View
@property(nonatomic,assign)CGRect titleLabelF;// nameView
@property(nonatomic,assign)CGRect pictureImageF;//图片View
@property(nonatomic,assign)CGRect zwLabelF;//正文Label
@property(nonatomic,assign)CGRect vipImageViewF;// vip

/**行高*/
@property(nonatomic,assign) CGFloat cellHeight;
/**所有控件的尺寸都可以通过Status来计算得出*/
@property(nonatomic,strong)SUNWeiboItem *weiboItem;

+ (
NSArray*)weiboFrames;
@end
注意:创建SUNWeiboFrameItem模型,通setter方法计算行高。
- (void)setWeiboItem:(SUNWeiboItem*)weiboItem
{
   
_weiboItem = weiboItem;
   
// 0. 定义间距
   
CGFloat padding =10;
   
   
// 1. 头像
   
CGFloat iconX = padding;
   
CGFloat iconY = padding;
   
CGFloat iconW =30;
   
CGFloat iconH =30;
   
self.iconImageViewF= CGRectMake(iconX, iconY, iconW, iconH);
   
   
// 2. 姓名大小由文字的长度来决定
   
NSDictionary *nameDict =@{NSFontAttributeName:kNameFont};
   
CGRect nameFrame = [self.weiboItem.nameboundingRectWithSize:CGSizeMake(MAXFLOAT,MAXFLOAT)options:NSStringDrawingUsesLineFragmentOriginattributes:nameDictcontext:nil];
    nameFrame.
origin.x= CGRectGetMaxX(self.iconImageViewF) + padding;
    nameFrame.
origin.y= padding + (self.iconImageViewF.size.height- nameFrame.size.height) * 0.5;
   
self.titleLabelF= nameFrame;
   
   
// vip图标
   
CGFloat vipX =CGRectGetMaxX(self.titleLabelF) + padding;
   
CGFloat vipY =self.titleLabelF.origin.y;
   
CGFloat vipW =14;
   
CGFloat vipH =14;
   
self.vipImageViewF= CGRectMake(vipX, vipY, vipW, vipH);
   
   
// 正文
   
NSDictionary *textDict =@{NSFontAttributeName:kTextFont};
   
CGRect textFrame = [self.weiboItem.textboundingRectWithSize:CGSizeMake(300,MAXFLOAT)options:NSStringDrawingUsesLineFragmentOriginattributes:textDictcontext:nil];
    textFrame.
origin.x= padding;
    textFrame.
origin.y= CGRectGetMaxY(self.iconImageViewF) + padding;
   
self.zwLabelF= textFrame;
   
   
if (self.weiboItem.picture.length> 0) {
       
// 配图
       
CGFloat pictureX = padding;
       
CGFloat pictureY =CGRectGetMaxY(textFrame) + padding;
       
CGFloat pictureW =100;
       
CGFloat pictureH =100;
       
self.pictureImageF= CGRectMake(pictureX, pictureY, pictureW, pictureH);
       
       
self.cellHeight= CGRectGetMaxY(self.pictureImageF) + padding;
    }
else {
       
self.cellHeight= CGRectGetMaxY(self.zwLabelF) + padding;
    }
}

+ (NSArray*)weiboFrames
{
   
NSString *filePath = [[NSBundlemainBundle]pathForResource:@"statuses.plist"ofType:nil];
   
NSArray *array = [NSArrayarrayWithContentsOfFile:filePath];
   
   
NSMutableArray *arrayM = [NSMutableArrayarray];
   
for (NSDictionary*dict in array) {
       
SUNWeiboFrameItem *weiboFrameItem = [[SUNWeiboFrameItemalloc]init];
        weiboFrameItem.
weiboItem= [SUNWeiboItemweiboWithDict:dict];
        [arrayM
addObject:weiboFrameItem];
    }
   
return arrayM;
}


注意:
所有的单元格控件的计算都是重复的,而且每次表格滚动,设置内容都会重新计算。
解决这个问题:
SUNWeiboFrameItem模型中,已经包含了weiboItem属性。
目前控制器中的数组保存的是 weiboItem模型,将 weiboItem模型替换为SUNWeiboFrameItem模型{weiboItem,所有控件的位置},同样具有weiboItem模型。

步骤八、重构调整SUNWeiboItemSUNWeiboFrameItem
SUNWeiboItem模型中删除weibos数组。
SUNWeiboFrameItem添加weiboFrames数组。

步骤九、重构控制器实现UITableView的代理方法调整为
- (NSArray*)weiboFrames
{
   
if (_weiboFrames== nil) {
       
_weiboFrames = [SUNWeiboFrameItemweiboFrames];
    }
   
return _weiboFrames;
}

注意:
weiboFrames数组要改变成SUNWeiboFrameItem的模型数据。
#pragma mark -数据源方法
- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section
{
   
return self.weiboFrames.count;
}

- (
UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath
{
   
static NSString *ID =@"cell";
   
SUNWeiboCell *cell = [tableViewdequeueReusableCellWithIdentifier:ID];
   
if (cell ==nil) {
        cell = [[
SUNWeiboCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:ID];
    }
   
SUNWeiboFrameItem *weiboFrameItem = self.weiboFrames[indexPath.row];
    cell.
weiboItem= weiboFrameItem.weiboItem;
   
return cell;
}

/**计算单元格行高*/
- (
CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath
{
   
NSLog(@"111111111111111111111");
   
SUNWeiboFrameItem *weiboFrameItem = self.weiboFrames[indexPath.row];
   
return weiboFrameItem.cellHeight;
}

问题分析:
cell中的控件的位置计算,依然是自己计算的。
解决办法:将cell中的status替换为statusFrame就可以拿到控件位置。


步骤十、重构自定义SUNWeiboCell,将SUNWeiboItem模型数据替换为SUNWeiboFrameItem模型数据。
@property(nonatomic,strong)SUNWeiboItem *weiboItem;

- (void)setWeiboFrameItem:(SUNWeiboFrameItem*)weiboFrameItem
{
   
_weiboFrameItem = weiboFrameItem;
   
// 1> 设置数据
    [
selfsettingData];
   
   
// 2> 设置位置
    [
selfsettingFrame];
}


/**设置数据*/
- (
void)settingData
{
   
SUNWeiboItem *weiboItem =self.weiboFrameItem.weiboItem;
   
// 头像
   
self.iconView.image= [UIImageimageNamed:weiboItem.icon];
   
// 姓名
   
self.nameView.text= weiboItem.name;
   
// vip(可选的)
   
if (weiboItem.vip) {
       
self.vipView.hidden= NO;
       
self.nameView.textColor= [UIColorredColor];
    }
else {
       
self.vipView.hidden= YES;
       
self.nameView.textColor= [UIColorblackColor];
    }
   
   
// 正文
   
self.textView.text= weiboItem.text;
   
   
// 配图(可选参数)
   
// imageNamed:nil CUICatalog: Invalid asset name supplied: (null), or invalid scale factor: 2.000000
   
if (weiboItem.picture.length> 0) {
       
self.pictureView.hidden= NO;
       
self.pictureView.image= [UIImageimageNamed:weiboItem.picture];
    }
else {
       
self.pictureView.hidden= YES;
    }
}

/**设置位置*/
- (
void)settingFrame
{
   
self.iconView.frame= self.weiboFrameItem.iconImageViewF;
   
   
// 2. 姓名大小由文字的长度来决定
   
self.nameView.frame= self.weiboFrameItem.titleLabelF;
   
   
// vip图标
   
self.vipView.frame= self.weiboFrameItem.vipImageViewF;
   
   
// 正文
   
self.textView.frame= self.weiboFrameItem.zwLabelF;
   
   
if (self.weiboFrameItem.weiboItem.picture.length> 0) {
       
// 配图
       
self.pictureView.frame= self.weiboFrameItem.pictureImageF;
    }
}


步骤十一、重构控制器实现UITableView的代理方法调整为
- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath
{
   
static NSString *ID =@"cell";
   
SUNWeiboCell *cell = [tableViewdequeueReusableCellWithIdentifier:ID];
   
if (cell ==nil) {
        cell = [[
SUNWeiboCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:ID];
    }
    cell.
weiboFrameItem= self.weiboFrames[indexPath.row];
   
return cell;
}

自定义UITableViewCell新浪微博