即時通訊UI－聊天介面（UITableView顯示左右兩人聊天），ui-uitableview

即時通訊UI－聊天介面（UITableView顯示左右兩人聊天），ui-uitableview

目錄

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];}

：