自定义UITableViewCell新浪微博

自定义UITableViewCell新浪微博

自定义 UITableViewCell的步骤：

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

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

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

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

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

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

步骤一：根据 plist文件，创建Model层数据。

@property  ( nonatomic , copy )  NSString  *text; //  正文
@property  ( nonatomic , copy )  NSString  *icon; //  头像
@property  ( nonatomic , copy )  NSString  *picture; //  图片
@property  ( nonatomic , copy )  NSString  *name; // name
@property  ( nonatomic , assign )  BOOL  vip; // vip

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

+ ( NSArray *) weibos ;

- ( instancetype )initWithDict:( NSDictionary *)dict
{
    if ( self = [ super init ]) {
        [ self setValuesForKeysWithDictionary :dict];
    }
    return self ;
}

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

+ ( NSArray *)weibos
{
    NSArray *array = [ NSArray arrayWithContentsOfFile :[[ NSBundle mainBundle ] pathForResource : @"statuses.plist" ofType : nil ]];
   
    NSMutableArray *arrayM = [ NSMutableArray array ];
    for ( NSDictionary *dict in array) {
        [arrayM addObject :[ self statusWithDict :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 = [[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :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 = [[ UIImageView alloc ] init ];
        [ self . contentView addSubview : _iconView ];
    }
    return _iconView ;
}

- ( UILabel *)nameView
{
    if ( _nameView == nil ) {
        _nameView = [[ UILabel alloc ] init ];
        // 默认字体是 17 号
        _nameView . font = kNameFont ;
        [ self . contentView addSubview : _nameView ];
    }
    return _nameView ;
}
注意：

UILabel中默认的字体是17号。

- ( UIImageView *)vipView
{
    if ( _vipView == nil ) {
        _vipView = [[ UIImageView alloc ] init ];
        _vipView . image = [ UIImage imageNamed : @"vip" ];
        _vipView . hidden = YES ;
        [ self . contentView addSubview : _vipView ];
    }
    return _vipView ;
}

- ( UILabel *)textView
{
    if ( _textView == nil ) {
        _textView = [[ UILabel alloc ] init ];
        _textView . font = kTextFont ;
        _textView . numberOfLines = 0 ;
        [ self . contentView addSubview : _textView ];
    }
    return _textView ;
}
注意：

numberOfLines属性是换行的意思。
- ( UIImageView *)pictureView
{
    if ( _pictureView == nil ) {
        _pictureView = [[ UIImageView alloc ] init ];
        [ self . contentView addSubview : _pictureView ];
    }
    return _pictureView ;
}

步骤五：在自定义cell里面， 定义一个模型属性，通过 setter 方法，设置 cell 的显示。

@property ( nonatomic , strong ) SUNWeiboItem *weiboItem;

- ( void )setWeiboItem:( SUNWeiboItem *)weiboItem
{
    _weiboItem = weiboItem;
    // 1> 设置数据
    [ self settingData ];
   
    // 2> 设置位置
    [ self settingFrame ];
}

注意：

在主方法中，代码不宜过长。

/** 设置数据 */
- ( void )settingData
{
    // 头像
    self . iconView . image = [ UIImage imageNamed : self . weiboItem . icon ];
    // 姓名
    self . nameView . text = self . weiboItem . name ;
    // vip( 可选的 )
    if ( self . weiboItem . vip ) {
        self . vipView . hidden = NO ;
        self . nameView . textColor = [ UIColor redColor ];
    } else {
        self . vipView . hidden = YES ;
        self . nameView . textColor = [ UIColor blackColor ];
    }
   
    // 正文
    self . textView . text = self . weiboItem . text ;
   
    // 配图 ( 可选参数 )
    if ( self . weiboItem . picture . length > 0 ) {
        self . pictureView . hidden = NO ;
        self . pictureView . image = [ UIImage imageNamed : 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 . name boundingRectWithSize : CGSizeMake ( MAXFLOAT , MAXFLOAT ) options : NSStringDrawingUsesLineFragmentOrigin attributes :nameDict context : 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 . text boundingRectWithSize : CGSizeMake ( 300 , MAXFLOAT ) options : NSStringDrawingUsesLineFragmentOrigin attributes :textDict context : nil ];
    textFrame. origin . x = padding;
    textFrame. origin . y = CGRectGetMaxY ( self . iconView . frame ) + padding;
    self . textView . frame = textFrame;
    注意：

    boundingRectWithSize属性，如果文字不换行的话，可以设置为CGSizeMake(MAXFLOAT, MAXFLOAT)。如果文字需要换行的话，需要指定宽度，即CGSizeMake(300, MAXFLOAT)。
    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 = 0的CGRect,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   alloc ]  initWithStyle : 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内部所有子控件的frame和cell的总高度。

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

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

步骤七、 创建 SUNWeiboFrameItem 模型，专门处理行高的计算。

/** 专门计算所有控件位置 */
@interface SUNWeiboFrameItem : 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 . name boundingRectWithSize : CGSizeMake ( MAXFLOAT , MAXFLOAT ) options : NSStringDrawingUsesLineFragmentOrigin attributes :nameDict context : 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 . text boundingRectWithSize : CGSizeMake ( 300 , MAXFLOAT ) options : NSStringDrawingUsesLineFragmentOrigin attributes :textDict context : 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 = [[ NSBundle mainBundle ] pathForResource : @"statuses.plist" ofType : nil ];
    NSArray *array = [ NSArray arrayWithContentsOfFile :filePath];
   
    NSMutableArray *arrayM = [ NSMutableArray array ];
    for ( NSDictionary *dict in array) {
        SUNWeiboFrameItem *weiboFrameItem = [[ SUNWeiboFrameItem alloc ] init ];
        weiboFrameItem. weiboItem = [ SUNWeiboItem weiboWithDict :dict];
        [arrayM addObject :weiboFrameItem];
    }
    return arrayM;
}

注意：

所有的单元格控件的计算都是重复的，而且每次表格滚动，设置内容都会重新计算。

解决这个问题：
SUNWeiboFrameItem模型中，已经包含了 weiboItem属性。
目前控制器中的数组保存的是 weiboItem模型，将 weiboItem模型替换为SUNWeiboFrameItem模型{weiboItem，所有控件的位置}，同样具有weiboItem模型。

步骤八、重构调整 SUNWeiboItem 和 SUNWeiboFrameItem

在 SUNWeiboItem模型中删除 weibos数组。

在 SUNWeiboFrameItem添加 weiboFrames数组。

步骤九、重构控制器 实现 UITableView的代理方法调整为

- ( NSArray *)weiboFrames
{
    if ( _weiboFrames == nil ) {
        _weiboFrames = [ SUNWeiboFrameItem weiboFrames ];
    }
    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 = [tableView dequeueReusableCellWithIdentifier :ID];
    if (cell == nil ) {
        cell = [[ SUNWeiboCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :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> 设置数据
    [ self settingData ];
   
    // 2> 设置位置
    [ self settingFrame ];
}

/** 设置数据 */
- ( void )settingData
{
    SUNWeiboItem *weiboItem = self . weiboFrameItem . weiboItem ;
    // 头像
    self . iconView . image = [ UIImage imageNamed :weiboItem. icon ];
    // 姓名
    self . nameView . text = weiboItem. name ;
    // vip( 可选的 )
    if (weiboItem. vip ) {
        self . vipView . hidden = NO ;
        self . nameView . textColor = [ UIColor redColor ];
    } else {
        self . vipView . hidden = YES ;
        self . nameView . textColor = [ UIColor blackColor ];
    }
   
    // 正文
    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 = [ UIImage imageNamed :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 = [tableView dequeueReusableCellWithIdentifier :ID];
    if (cell == nil ) {
        cell = [[ SUNWeiboCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :ID];
    }
    cell. weiboFrameItem = self . weiboFrames [indexPath. row ];
    return cell;
}