
目录
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];
}
效果图: