目录
1.创建UITableView对象并设置相关属性
2.创建cellModel模型
//枚举类型typedefenum{
ChatMessageFrom=0,//来自对方的消息ChatMessageTo//发给对方的消息}ChatMesageType;#import<Foundation/Foundation.h>@interfaceChatModel : NSObject
@PRoperty (nonatomic,assign)ChatMesageType messageType;//类型@property (nonatomic,copy)NSString *icon;//图片@property (nonatomic,copy)NSString *content;//内容- (instancetype)initWithDic:(NSDictionary *)dic;+ (instancetype)modelWithDic:(NSDictionary *)dic;
#import"ChatModel.h"@implementationChatModel- (instancetype)initWithDic:(NSDictionary *)dic {
self=[super init];if(self) {
self.icon= dic[@"icon"];
self.content= dic[@"content"];
self.messageType= [dic[@"messageType"] intValue];
}returnself;
}+ (instancetype)modelWithDic:(NSDictionary *)dic {return[[self alloc]initWithDic:dic];
}
3.计算自适应cell高度 ChatCellFrame
#import<Foundation/Foundation.h>#import"ChatModel.h"/**
* cell中的布局,计算高度,位置等。。。*/@interfaceChatCellFrame : NSObject
@property (nonatomic,assign)CGRect iconRect;//图标位置大小@property (nonatomic,assign)CGRect chartViewRect;//内容位置大小@property (nonatomic,strong)ChatModel *chartMessage;//数据模型@property (nonatomic, assign) CGFloat cellHeight;//cell高度@end
#definekIconMarginX 5#definekIconMarginY 5#import"ChatCellFrame.h"@implementationChatCellFrame//重写set方法- (void)setChartMessage:(ChatModel *)chartMessage {
_chartMessage=chartMessage;
CGSize winSize=[UIScreen mainScreen].bounds.size;
CGFloat iconX=kIconMarginX;
CGFloat iconY=kIconMarginY;
CGFloat iconWidth=40;
CGFloat iconHeight=40;//当为类型1if(chartMessage.messageType==ChatMessageFrom){
}//当为类型2elseif(chartMessage.messageType==ChatMessageTo){
iconX=winSize.width-kIconMarginX-iconWidth;
}//图标的位置大小self.iconRect=CGRectMake(iconX, iconY, iconWidth, iconHeight);
CGFloat contentX=CGRectGetMaxX(self.iconRect)+kIconMarginX;
CGFloat contentY=iconY;//设置字体大小NSDictionary *attributes = @{NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue"size:13]};//文本自适应大小CGSize contentSize=[chartMessage.content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin |NSStringDrawingUsesFontLeading attributes:attributes context:nil].size;if(chartMessage.messageType==ChatMessageTo){
contentX=iconX-kIconMarginX-contentSize.width-iconWidth;
}//View的大小位置self.chartViewRect=CGRectMake(contentX, contentY, contentSize.width+35, contentSize.height+30);//cell高度self.cellHeight=MAX(CGRectGetMaxY(self.iconRect), CGRectGetMaxY(self.chartViewRect))+kIconMarginX;
}@end
4.设置cell上视图(图片和文字)ChatCellView
#import<UIKit/UIKit.h>#import"ChatModel.h"@interfaceChatCellView : UIView
@property (nonatomic,strong)UIImageView*iconImageView;
@property (nonatomic,strong)UILabel*contentLabel;
@property (nonatomic,strong)ChatModel*chartMessage;@end
#import"ChatCellView.h"#definekContentStartMargin 25@implementationChatCellView- (id)initWithFrame:(CGRect)frame
{
self=[super initWithFrame:frame];if(self) {
self.iconImageView=[[UIImageView alloc]init];
self.iconImageView.userInteractionEnabled=YES;
[self addSubview:self.iconImageView];
self.contentLabel=[[UILabel alloc]init];
self.contentLabel.numberOfLines=0;
self.contentLabel.textAlignment=NSTextAlignmentLeft;
self.contentLabel.font=[UIFont fontWithName:@"HelveticaNeue"size:13];
[self addSubview:self.contentLabel];
}returnself;
}//重写frame- (void)setFrame:(CGRect)frame {
[super setFrame:frame];
self.iconImageView.frame=self.bounds;
CGFloat contentLabelX=0;if(self.chartMessage.messageType==ChatMessageFrom){
contentLabelX=kContentStartMargin*0.8;
}elseif(self.chartMessage.messageType==ChatMessageTo){
contentLabelX=kContentStartMargin*0.5;
}
self.contentLabel.frame=CGRectMake(contentLabelX, -3, self.frame.size.width-kContentStartMargin-5, self.frame.size.height);
}@end
5.在cell中添加视图,并将模型数据添加上去 ChatCell
#import<UIKit/UIKit.h>#import"ChatModel.h"#import"ChatCellFrame.h"#import"ChatCellView.h"@interfaceChatCell : UITableViewCell
@property (nonatomic,strong)ChatCellFrame*cellFrame;@end
#import"ChatCell.h"@interfaceChatCell ()
@property (nonatomic,strong) UIImageView*icon;
@property (nonatomic,strong) ChatCellView*chartView;
@property (nonatomic,strong) ChatCellView*currentChartView;
@property (nonatomic,strong) NSString*contentStr;@end@implementationChatCell- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self=[super initWithStyle:style reuseIdentifier:reuseIdentifier];if(self) {
self.icon=[[UIImageView alloc]init];
self.chartView=[[ChatCellView alloc]initWithFrame:CGRectZero];
[self.contentView addSubview:self.icon];
[self.contentView addSubview:self.chartView];
}returnself;
}- (void)setCellFrame:(ChatCellFrame *)cellFrame {
_cellFrame=cellFrame;
ChatModel*chartMessage=cellFrame.chartMessage;
self.icon.frame=cellFrame.iconRect;//将图标位置赋给iconself.icon.image=[UIImage imageNamed:chartMessage.icon];//图标self.chartView.chartMessage=chartMessage;
self.chartView.frame=cellFrame.chartViewRect;//将内容位置赋给chartView[self setBackGroundImageViewImage:self.chartView from:@"chatfrom_bg_normal.png"to:@"chatto_bg_normal.png"];
self.chartView.contentLabel.text=chartMessage.content;//设置文字信息}//根据不同类型更换不同的背景图-(void)setBackGroundImageViewImage:(ChatCellView *)chartView from:(NSString *)from to:(NSString *)to
{
UIImage*normal=nil ;if(chartView.chartMessage.messageType==ChatMessageFrom){
normal=[UIImage imageNamed:from];
normal= [normal stretchableImageWithLeftCapWidth:normal.size.width *0.5topCapHeight:normal.size.height *0.7];
}elseif(chartView.chartMessage.messageType==ChatMessageTo){
normal=[UIImage imageNamed:to];
normal= [normal stretchableImageWithLeftCapWidth:normal.size.width *0.5topCapHeight:normal.size.height *0.7];
}
chartView.iconImageView.image=normal;
}- (void)awakeFromNib {//Initialization code}- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];//Configure the view for the selected state}@end
6.回到控制器,设置数据源,(这里用的假数据),添加数据模型,使用自适应高度,使用自定义cell
#pragmamark - 懒加载
- (NSArray *)array {if(!_array) {
_array=[[NSMutableArray alloc]initWithObjects:
@{@"icon":@"icon01.jpg",@"content":@"早上好",@"messageType":@"0"},
@{@"icon":@"icon02.jpg",@"content":@"早上好呀",@"messageType":@"1"}, nil];
}return_array;
}#pragmamark - 模型数据
- (void)initDataSource {
_dataSource=[[NSMutableArray alloc]init];for(NSDictionary *dicinself.array) {
ChatCellFrame*chatFrame =[[ChatCellFrame alloc]init];
ChatModel*chatModel =[ChatModel modelWithDic:dic];
chatFrame.chartMessage=chatModel;
[_dataSource addObject:chatFrame];
}
}
#pragmamark - initView
- (void)initView {
_tableView=[[UITableView alloc]initWithFrame:self.view.bounds];
_tableView.dataSource=self;
_tableView.delegate=self;
_tableView.separatorStyle=UITableViewCellSeparatorStyleNone;
[_tableView registerClass:[ChatCellclass] forCellReuseIdentifier:CELLID];
[self.view addSubview:_tableView];
}#pragmamark - <UITableViewDataSource,UITableViewDelegate>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return_dataSource.count;
}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
ChatCell*cell =[tableView dequeueReusableCellWithIdentifier:CELLID];
cell.cellFrame=_dataSource[indexPath.row];
cell.selectionStyle=UITableViewCellSelectionStyleNone;returncell;
}-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{return[_dataSource[indexPath.row] cellHeight];
}
效果图: