目录
1.创建UITableView对象并设置相关属性
2.创建cellModel模型
//枚举类型 typedef enum { ChatMessageFrom = 0,//来自对方的消息 ChatMessageTo //发给对方的消息 }ChatMesageType; #import <Foundation/Foundation.h> @interface ChatModel : 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" @implementation ChatModel - (instancetype)initWithDic:(NSDictionary *)dic { self = [super init]; if (self) { self.icon = dic[@"icon"]; self.content = dic[@"content"]; self.messageType = [dic[@"messageType"] intValue]; } return self; } + (instancetype)modelWithDic:(NSDictionary *)dic { return [[self alloc]initWithDic:dic]; }
3.计算自适应cell高度 ChatCellFrame
#import <Foundation/Foundation.h> #import "ChatModel.h" /** * cell中的布局,计算高度,位置等。。。 */ @interface ChatCellFrame : NSObject @property (nonatomic,assign)CGRect iconRect; //图标位置大小 @property (nonatomic,assign)CGRect chartViewRect;//内容位置大小 @property (nonatomic,strong)ChatModel *chartMessage;//数据模型 @property (nonatomic, assign) CGFloat cellHeight; //cell高度 @end
#define kIconMarginX 5 #define kIconMarginY 5 #import "ChatCellFrame.h" @implementation ChatCellFrame //重写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; //当为类型1 if(chartMessage.messageType==ChatMessageFrom){ } //当为类型2 else if (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" @interface ChatCellView : UIView @property (nonatomic,strong)UIImageView *iconImageView; @property (nonatomic,strong)UILabel *contentLabel; @property (nonatomic,strong)ChatModel *chartMessage; @end
#import "ChatCellView.h" #define kContentStartMargin 25 @implementation ChatCellView - (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]; } return self; } //重写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; }else if(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" @interface ChatCell : UITableViewCell @property (nonatomic,strong)ChatCellFrame *cellFrame; @end
#import "ChatCell.h" @interface ChatCell () @property (nonatomic,strong) UIImageView *icon; @property (nonatomic,strong) ChatCellView *chartView; @property (nonatomic,strong) ChatCellView *currentChartView; @property (nonatomic,strong) NSString *contentStr; @end @implementation ChatCell - (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]; } return self; } - (void)setCellFrame:(ChatCellFrame *)cellFrame { _cellFrame=cellFrame; ChatModel *chartMessage=cellFrame.chartMessage; self.icon.frame=cellFrame.iconRect; //将图标位置赋给icon self.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.5 topCapHeight:normal.size.height * 0.7]; }else if(chartView.chartMessage.messageType==ChatMessageTo){ normal = [UIImage imageNamed:to]; normal = [normal stretchableImageWithLeftCapWidth:normal.size.width * 0.5 topCapHeight: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
#pragma mark - 懒加载 - (NSArray *)array { if (!_array) { _array = [[NSMutableArray alloc]initWithObjects: @{@"icon":@"icon01.jpg", @"content":@"早上好", @"messageType":@"0"}, @{@"icon":@"icon02.jpg", @"content":@"早上好呀", @"messageType":@"1"}, nil]; } return _array; } #pragma mark - 模型数据 - (void)initDataSource { _dataSource = [[NSMutableArray alloc]init]; for (NSDictionary *dic in self.array) { ChatCellFrame *chatFrame = [[ChatCellFrame alloc]init]; ChatModel *chatModel = [ChatModel modelWithDic:dic]; chatFrame.chartMessage = chatModel; [_dataSource addObject:chatFrame]; } }
#pragma mark - initView - (void)initView { _tableView = [[UITableView alloc]initWithFrame:self.view.bounds]; _tableView.dataSource = self; _tableView.delegate = self; _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; [_tableView registerClass:[ChatCell class] forCellReuseIdentifier:CELLID]; [self.view addSubview:_tableView]; } #pragma mark - <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; return cell; } -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return [_dataSource[indexPath.row] cellHeight]; }
效果图: