即时通讯UI-聊天界面(UITableView显示左右两人聊天)

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

目录

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

}

效果图:

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航