UITableView之（五）：自定义UITableViewCell

几乎所有的tableViewCell都是采用自定义的方式进行展示UI的。自定义tableViewCell是学习tableView的重点和难点。

重点：经常用到

难点：1、复杂cell的显示细节非常多

           2、控制好cell的重用，cell的异常显示往往和重用有很大的关系，这也是bug的重灾区

           3、可变高度的计算，很多情况下自定义的cell的高度都不会完全一致，样式也多种多样

自定义cell的步骤：

1、继承自UITableViewCell

2、在初始化方法中设置需要显示的控件

3、在layoutSubviews中设置控件显示的位置

4、从封装的思路出发，对外只提供设置模型的属性

5、在.m中实现模型的setter的方法，cell的模型一有值，就进行对应控件的显示

6、如果cell的高度不固定，还要提供设置高度的方法。

其中设置高度的方法有很多中：

获取高度的基本思想：固定高度 + 可变高度

1、在cell提供高度的类方法

+ (CGFloat)cellWithHeight:(CGFloat)height
{
return 50 + height;
}

//声明私有方法计算可变的高度
- (CGFloat)heightWithString:(NSString *)aString
{
CGRect r = [aString boundingRectWithSize:CGSizeMake(CGRectGetWidth(self.tableView.frame) - 10, maxfloat)
options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15.0f]} context:nil];

return r.size.height + 10;
}

//调用代理方法，计算cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//    拿到模型中获取高度的字符串
NSString * s = self.dataArray[indexPath.row];
// 使用类方法计算高度
return [xxxCell cellWithHeight: [self heightWithString:s]];
}

2、在viewController中创建获取高度的方法

// 贴一段代码
// 设置每个cell对应的高度 固定高度 + 可变高度 这里的可变高度为字符串
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat ch = [self cellHeightWithAttendanceDetailModel:self.dataArray[indexPath.row]];
CGFloat totalH = ch + 54;
return totalH;
}

// 获取cell对应模型中字符串的高度
- (CGFloat)cellHeightWithAttendanceDetailModel:(TeacherAttendanceDetailModel *)detailModel
{
CGSize maxSize = CGSizeMake(self.view.width - 40, MAXFLOAT);

CGFloat textH = [detailModel.detailTypeName textRectWithFont:[UIFont systemFontOfSize:13]
maxSize:maxSize mode:(NSLineBreakByCharWrapping)].height;

 return textH;
}

3、提供自定义cell模型控件对应的frame模型

在viewController中获取的模型就是frame模型，frame模型里面包含的是真正要模型

在frame模型里面设置的是：每个cell控件对应的frame以及cell 的最终高度

如：一段非常简单的设置

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h> // 引入此头文件，否则没有CGRect

@class FeedbackQuestionsList;
@interface FeedbackFrame : NSObject

/** 模型*/
@property (strong, nonatomic)FeedbackQuestionsList *question;

@property (assign, nonatomic)CGRect titleF;
@property (assign, nonatomic)CGRect lineF;
@property (assign, nonatomic)CGFloat cellHeight;

@end

#import "FeedbackFrame.h"
#import "FeedbackQuestionsList.h"

@implementation FeedbackFrame

// 使用setter方法设置模型的对应位置
- (void)setQuestion:(FeedbackQuestionsList *)question
{
_question = question;

CGFloat padding = 10;
CGFloat cellW = [UIScreen mainScreen].bounds.size.width;

CGFloat titleX = padding;
CGFloat titleY = padding;
NSString *contentString = [NSString stringWithFormat:@"%zd、%@", question.index, question.content];
CGSize titleSize = [contentString textRectWithFont:[UIFont systemFontOfSize:15]
maxSize:CGSizeMake(cellW - 2 * padding, MAXFLOAT) mode:(NSLineBreakByWordWrapping)];
_titleF = CGRectMake(titleX, titleY, titleSize.width, titleSize.height);

CGFloat lineX = titleX;
CGFloat lineY = CGRectGetMaxY(_titleF) + padding;
CGFloat lineW = cellW - padding;
CGFloat lineH = 1;
_lineF = CGRectMake(lineX, lineY, lineW, lineH);

// 获取cell的高度
_cellHeight = CGRectGetMaxY(_lineF);
}
@end

cell中的模型即为frame模型

- (void)setFeebbackFrame:(FeedbackFrame *)feebbackFrame
{
_feebbackFrame = feebbackFrame;
FeedbackQuestionsList *question = feebbackFrame.question;

self.titleLabel.text = [NSString stringWithFormat:@"%zd、%@", question.index, question.content];
}

在viewController中获取frame模型并进行cell的设置

// 获取到网络数据进行模型的装换
NSDictionary *dic = responseObject.result;
NSArray *array = dic[@"data"];
if (array.count) {

for (NSDictionary *dic in array) {
QuestionsFrame *quesFrame = [[QuestionsFrame alloc] init];
FeedbackQuestionsList *question = [FeedbackQuestionsList cellWithQuestionsDic:dic];
quesFrame.questions = question;
[self.questionsArray addObject:quesFrame];
}
}

tableView中进行赋值，同时

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
FeedbackQuestionListCell *cell = [FeedbackQuestionListCell questionCellWithTableView:tableView];

cell.questionFrame = self.questionsArray[indexPath.row];

return cell;
}

4、使用masonry获取cell的高度

使用masonry自动布局完成后，调用[cell layoutIfNeeded];

然后使用：    CGRectGetMaxY(最后一个控件); 获取到cell的实际高度。

5、使用Masonry进行自定义Cell的创建和使用Xib、StoryBoard一样，label可以不设置高度，有系统自动进行设置。

我们只需要计算出固定高度和可变高度即可。采取上面2的方式。