Tip：通过xib和storyboard不可能将一个控件作为ImageView的子控件，只能通过代码的addSubview方法实现。
设置图片的细节：如果button比图片大（为了方便对齐），将图片设置为image而不是background，图片不会被拉伸到失真。
为了保证在不同系统上显示的效果一样，可以不使用系统默认样式，用自定义的背景等，例如QQ的聊天框，如果要实现，首先将TextField的BorderStyle选为空：
然后设置自己的background即可。
细节：聊天的type（发送的还是接受的）应该用什么数据类型？
为了降低沟通成本，提高可读性和安全性，应该使用枚举。
枚举类型命名规范：类名+属性名（首字母大写）。枚举成员也要类名+属性为前缀。
typedef enum{
MessageTypeMe = 0,
MessageTypeOther
} MessageType ;
@property (nonatomic, assign) MessageType type;
Tip：使用KVC的时候，枚举会自动转整形。
注意弱指针不能指向alloc的对象，否则会被直接销毁，应该先用强指针指着alloc的对象，然后加入到父控件，最后再用弱指针指过去：
@property (nonatomic, weak) UILabel *timeView;
UILabel *timeView = [[UILabel alloc] init];
[self.contentView addSubview:timeView];
self.timeView = timeView;
自定义cell的步骤：
第一步：新建一个继承自UITableViewCell的类
第二步：重写initWithStyle:reuseIdentifier方法
添加所有的子控件，不需要设置数据和frame（声明一个frame属性以便设置），加入到self.contentView中。一定注意弱指针的用法，先用强指针，加入视图后再交给弱指针。
@interface MessageCell : UITableViewCell @property (nonatomic, strong) MessageFrame *messageFrame; + (instancetype)cellWithTableView:(UITableView *)tableView; @end
@interface MessageCell ()
@property (nonatomic, weak) UILabel *timeView;
@property (nonatomic, weak) UIImageView *iconView;
@property (nonatomic, weak) UIButton *textView;
@end
@implementation MessageCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//时间：label
//头像：imgaeView
//正文：button
UILabel *timeView = [[UILabel alloc] init];
[self.contentView addSubview:timeView];
self.timeView = timeView;
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconView;
UIButton *textView = [[UIButton alloc] init];
[self.contentView addSubview:textView];
self.textView = textView;
}
return self;
}
- (void)awakeFromNib {
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
@end
细节：在cell类内写一个类方法用于实现缓存池的性能优化：
+ (instancetype)cellWithTableView:(UITableView *)tableView{
static NSString *ID = @"message";
MessageCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if(cell == nil){
cell = [[MessageCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
return cell;
}
这样就大大简化了返回cell的代码：
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
MessageCell *cell = [MessageCell cellWithTableView:tableView];
return cell;
}
第三步：提供数据模型和frame模型（后者存放数据模型和所有子控件的高度、cell的高度）
Tip：要使用CGRect，首先要引入<UIKit/UIKit.h>。
注意frame应该是只读的，只在模型内计算，没有set方法，所以类内使用下划线访问。
对于数据模型message，主要是提供消息的类型、事件、内容：
typedef enum{
MessageTypeMe = 0,
MessageTypeOther
} MessageType ;
@interface Message : NSObject
@property (nonatomic, copy) NSString *text;
@property (nonatomic, copy) NSString *time;
@property (nonatomic, assign) MessageType type;
- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)messageWithDict:(NSDictionary *)dict;
@end
和以前的模型声明和实现完全一样。
对于messageFrame模型，内部的数据为Cell各部分的尺寸和message模型，最后控制器访问的将是这个模型。
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h> #define NameFont [UIFont systemFontOfSize:14]
#define TextFont [UIFont systemFontOfSize:15] @class Message; @interface MessageFrame : NSObject
/**
* 头像的Frame
*/
@property (nonatomic, assign, readonly) CGRect iconF;
/**
* 时间的Frame
*/
@property (nonatomic, assign, readonly) CGRect timeF;
/**
* 正文的Frame
*/
@property (nonatomic, assign, readonly) CGRect textF;
/**
* cell的高度
*/
@property (nonatomic, assign, readonly) CGFloat cellHeight;
/**
* 数据模型
*/
@property (nonatomic, strong) Message *message; @end
需要注意的是，Frame属性只在模型内计算，不允许在外部修改，声明为readonly，为了使用CGXxx要引入UIKit框架。
计算Frame的时机应该是在控制器将message信息传入的时候，因此要重写message的set方法来计算尺寸：
计算的过程略为繁琐，总之就是实现类似QQ的聊天起泡效果，这里只是计算了时间、消息框、头像的位置和尺寸，并没有加上起泡。
注意一个细节，使用UIScreen的mainScreen方法的bounds.size得到屏幕尺寸。
- (void)setMessage:(Message *)message{
_message = message;
CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
CGFloat padding = 10;
CGFloat timeX = 0;
CGFloat timeY = 0;
CGFloat timeW = 320;
CGFloat timeH = 40;
_timeF = CGRectMake(timeX, timeY, timeW, timeH);
CGFloat iconX;
CGFloat iconY = CGRectGetMaxY(_timeF);
CGFloat iconW = 40;
CGFloat iconH = 40;
if (message.type == MessageTypeMe) {
iconX = screenW - padding - iconW;
}else{
iconX = padding;
}
_iconF = CGRectMake(iconX, iconY, iconW, iconH);
CGSize textMaxSize = CGSizeMake(150, MAXFLOAT);
CGSize textSize = [self sizeWithText:message.text font:TextFont maxSize:textMaxSize];
CGFloat textY = iconY;
CGFloat textX;
if (message.type == MessageTypeMe) {
textX = iconX - padding - textSize.width;
}else{
textX = CGRectGetMaxX(_iconF) + padding;
}
//_textF = CGRectMake(textX, textY, textSize.width, textSize.height);
_textF = (CGRect){{textX,textY},textSize};
CGFloat textMaxY = CGRectGetMaxY(_textF);
CGFloat iconMaxY = CGRectGetMaxY(_iconF);
_cellHeight = MAX(textMaxY, iconMaxY);
}
其中在计算文字对应的text尺寸时，使用了如下的方法：
- (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;
}
最后剩下的最重要的问题，是为cell的子控件设置frame模型的时机，可以注意到，在通过initWithTableView获取到cell之后，应该对cell的messageFrame属性进行设置，所以只要重写cell的messageFrame的set方法即可在这个时候改变控件的属性，然后得到正确的cell。
- (void)setMessageFrame:(MessageFrame *)messageFrame{
_messageFrame = messageFrame;
Message *msg = messageFrame.message;
self.timeView.text = msg.time;
self.timeView.frame = messageFrame.timeF;
NSString *icon = msg.type == MessageTypeMe ? @"me" : @"other";
self.iconView.image = [UIImage imageNamed:icon];
self.iconView.frame = messageFrame.iconF;
[self.textView setTitle:msg.text forState:UIControlStateNormal];
self.textView.frame = messageFrame.textF;
}
对于要多次计算的数据，放在message的set方法内计算，对于一次性的计算（例如Cell的背景色），放在Cell的init方法中计算：
改良后的Cell初始化方法：注意一个细节，clearColor为透明色（无色）。
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//一次性的修改放到init方法中
//时间：label
//头像：imgaeView
//正文：button
UILabel *timeView = [[UILabel alloc] init];
timeView.textAlignment = NSTextAlignmentCenter;
timeView.textColor = [UIColor grayColor];
[self.contentView addSubview:timeView];
self.timeView = timeView;
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconView;
UIButton *textView = [[UIButton alloc] init];
textView.titleLabel.numberOfLines = 0; //自动换行
textView.titleLabel.font = TextFont;
textView.backgroundColor = [UIColor grayColor];
[self.contentView addSubview:textView];
self.textView = textView;
//设置cell的背景色
self.backgroundColor = [UIColor clearColor];
}
return self;
}
下面的步骤就和以前一样，控制器新建messageFrames，懒加载数据，然后TableView根据数据源和委托加载数据。
下面总结一下调用过程：
1.控制器加载messageFrames，需要为每一个messageFrame的message属性赋值-
2.由于重写了message的set方法，在set方法内部根据message计算得到文字的宽高，进而得到头像、时间位置尺寸，确定所有的Frame，并且存住message（保存之前先用message的类方法字典转模型）。
3.系统调用获取Cell的方法时，由于调用了被重写的构造方法initWithStyle:style reuseIdentifier: ，在其内部通过性能优化取得Cell，然后创建各个子控件，进行一次性属性的设置，最后返回Cell。
4.Cell内部有messageFrame属性需要设置，在设置该属性时，会调用重写的set方法，在这个方法内部，实现了对各个子控件尺寸根据传入的messageFrame修改的操作。
5.Cell经过以上4步被正确的创建和设置，返回后正确的显示。
调用顺序：Message类（字典转Message模型）->Frame类（设置messageFrame的message时调用set方法）->MessageCell类（初始化Cell）->MessageCell类（设置Cell的messageFrame属性时调用set方法）。