IOS即时聊天UI设计

//消息实体类ChatMessage.h

#import <Foundation/Foundation.h>

@interface ChatMessage :NSObject

@property (nonatomic,strong) NSString *content;

@property (nonatomic,assign) BOOL isSelfSend;

@end

//实现类

#import "ChatMessage.h"

@implementation ChatMessage

@end

//自定义cell

#import <UIKit/UIKit.h>

@interface ChatMainViewCell :UITableViewCell

@property (nonatomic,strong) UIImageView *leftImageView;

@property (nonatomic,strong) UIImageView *rightImageView;

@property (nonatomic,strong) UILabel *leftLabel;

@property (nonatomic,strong) UILabel *rightLabel;

@end

// ChatMainViewCell.m文件

#import "ChatMainViewCell.h"

@implementation ChatMainViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

   self = [superinitWithStyle:style reuseIdentifier:reuseIdentifier];

   if (self) {

        [selfmakeView];

    }

    return self;

}

- (void)makeView{

    UIImage *leftImage=[UIImageimageNamed:@"ReceiverTextNodeBkg.png"];

    UIImage *rightImage=[UIImageimageNamed:@"SenderTextNodeBkg.png"];

    //获取图片某像素进行拉伸

    leftImage=[leftImage stretchableImageWithLeftCapWidth:30topCapHeight:35];

    rightImage=[rightImage stretchableImageWithLeftCapWidth:30topCapHeight:35];

    

    self.leftImageView=[[UIImageViewalloc]initWithFrame:CGRectMake(10,5, 66,54)];

   self.leftImageView.image=leftImage;

    [self.contentViewaddSubview:self.leftImageView];

    //leftLabel

    self.leftLabel=[[UILabelalloc]initWithFrame:CGRectMake(15,5, 10,10)];

    self.leftLabel.font=[UIFontsystemFontOfSize:14];

    self.leftLabel.backgroundColor=[UIColorclearColor];

    self.leftLabel.numberOfLines=0;

    //字符折行

    self.leftLabel.lineBreakMode=NSLineBreakByCharWrapping;

    [self.leftImageViewaddSubview:self.leftLabel];

   //右侧

    self.rightImageView=[[UIImageViewalloc]initWithFrame:CGRectMake(320-76,5, 66,54)];

   self.rightImageView.image=rightImage;

    [self.contentViewaddSubview:self.rightImageView];

    self.rightLabel=[[UILabelalloc]initWithFrame:CGRectMake(15,5, 10,10)];

    self.rightLabel.font=[UIFontsystemFontOfSize:14];

    self.rightLabel.backgroundColor=[UIColorclearColor];

    self.rightLabel.numberOfLines=0;

    self.rightLabel.lineBreakMode=NSLineBreakByCharWrapping;

    [self.rightImageViewaddSubview:self.rightLabel];

    

}

@end

//viewController.h

#import <UIKit/UIKit.h>

@interface ViewController :UIViewController<UITableViewDataSource ,

                            UITableViewDelegate ,UITextFieldDelegate>

{

   UITableView *_tableView;

   NSMutableArray *_dataArray;

   UIView *_chatView;

   UITextField *_textField;

}

@end

//viewController.m

#import "ViewController.h"

#import "ChatMessage.h"

#import "ChatMainViewCell.h"

@implementation ViewController

- (void)viewDidLoad

{

    [superviewDidLoad];

_dataArray=[NSMutableArrayarray];

    _tableView=[[UITableViewalloc]initWithFrame:CGRectMake(0,20, 320, 420)];

    _tableView.delegate=self;

    _tableView.dataSource=self;

    //隐藏表格的分割线

    _tableView.separatorStyle=UITableViewCellSeparatorStyleNone;

    [self.viewaddSubview:_tableView];

    //聊天面板

    _chatView=[[UIViewalloc]initWithFrame:CGRectMake(0,420, 320, 40)];

    _chatView.backgroundColor=[UIColorgrayColor];

    [self.viewaddSubview:_chatView];

    //输入信息框

    _textField=[[UITextFieldalloc]initWithFrame:CGRectMake(10,5, 200,30)];

    _textField.borderStyle=UITextBorderStyleRoundedRect;

    _textField.delegate=self;

    [_chatView addSubview:_textField];

    //发送按钮

    UIButton *send=[UIButtonbuttonWithType:UIButtonTypeRoundedRect];

    send.frame=CGRectMake(250,5, 50, 30);

    [send setTitle:@"发送"forState:UIControlStateNormal];

    [send addTarget:selfaction:@selector(sendMessage)forControlEvents:UIControlEventTouchUpInside];

    [_chatViewaddSubview:send];

    //键盘出现的监听

    [[NSNotificationCenterdefaultCenter]addObserver:selfselector:@selector(keyboardWillShow:)name:UIKeyboardWillShowNotificationobject:nil];

    //键盘收起的监听

    [[NSNotificationCenterdefaultCenter]addObserver:selfselector:@selector(keyboardWillHide:)name:UIKeyboardWillHideNotificationobject:nil];

}

- (void)keyboardWillShow:(NSNotification *)noti{

    CGSize size=[[noti.userInfoobjectForKey:UIKeyboardFrameEndUserInfoKey]CGRectValue ].size;

    [UIViewanimateWithDuration:0.25animations:^{

       _tableView.frame=CGRectMake(0,20, 320, 420-size.height);

       _chatView.frame=CGRectMake(0,440-size.height,320, 40);

        

    }];

}

- (void)keyboardWillHide:(NSNotification *)noti{

   _tableView.frame=CGRectMake(0,20, 320, 420);

   _chatView.frame=CGRectMake(0,440, 320, 40);

}

//键盘收起

- (BOOL)textFieldShouldReturn:(UITextField *)textField{

    [_textFieldresignFirstResponder];

    return YES;

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

   ChatMessage *chat=[_dataArrayobjectAtIndex:indexPath.row];

    //计算气泡的拉伸大小

    CGSize size=[chat.contentsizeWithFont:[UIFontsystemFontOfSize:14.0f]constrainedToSize:CGSizeMake(250,1000) lineBreakMode:NSLineBreakByCharWrapping];

   return size.height+30;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return_dataArray.count;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    ChatMainViewCell *cell=[tableViewdequeueReusableCellWithIdentifier:@"ID"];

   if (cell==nil) {

        cell=[[ChatMainViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:@"ID"];

        //隐藏cell被选定

        cell.selectionStyle=UITableViewCellSelectionStyleNone;

    }

   ChatMessage *chat=[_dataArrayobjectAtIndex:indexPath.row];

    //计算气泡的拉伸大小

    CGSize size=[chat.contentsizeWithFont:[UIFontsystemFontOfSize:14.0f]constrainedToSize:CGSizeMake(250,1000) lineBreakMode:NSLineBreakByCharWrapping];

    

    //自己发送的消息

   if (chat.isSelfSend) {

        cell.leftImageView.hidden=YES;

        cell.rightImageView.hidden=NO;

        cell.rightLabel.text=chat.content;

        cell.rightLabel.frame=CGRectMake(10,5, size.width, size.height);

        //计算气泡的拉伸

        cell.rightImageView.frame=CGRectMake(320-10-size.width-30,5, 30+size.width,20+size.height);

        

        

    }else{

    //别人发送的

        cell.rightImageView.hidden=YES;

        cell.leftImageView.hidden=NO;

        cell.leftLabel.text=chat.content;

        cell.leftLabel.frame=CGRectMake(15,5, size.width, size.height);

        cell.leftImageView.frame=CGRectMake(10,5, 30+size.width,20+size.height);

    }

   return cell;

}

//发送消息

- (void)sendMessage{

    ChatMessage *message=[[ChatMessagealloc]init];

    message.isSelfSend=YES;

    message.content=_textField.text;

    [_dataArrayaddObject:message];

    //清空输入框的内容

    _textField.text=@"";

    //插入表格中

    NSIndexPath *indexPath=[NSIndexPathindexPathForRow:_dataArray.count-1inSection:0];

    [_tableViewinsertRowsAtIndexPaths:[NSArrayarrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];

    [_tableViewscrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottomanimated:YES];

    //模拟别人发送消息

    [NSTimerscheduledTimerWithTimeInterval:2.0target:selfselector:@selector(autoSendMessage)userInfo:nilrepeats:NO];

}

//自动发送消息

- (void)autoSendMessage{

   NSArray *array=[NSArrayarrayWithObjects:@"星期三",@"天气晴",@"吃的鸡腿",nil];

   int num=arc4random()%array.count;

    ChatMessage *chat=[[ChatMessagealloc]init];

    chat.isSelfSend=NO;

    chat.content=[arrayobjectAtIndex:num];

    [_dataArrayaddObject:chat];

    NSIndexPath *indexPath=[NSIndexPathindexPathForRow:_dataArray.count-1inSection:0];

    [_tableViewinsertRowsAtIndexPaths:[NSArrayarrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];

    [_tableViewscrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottomanimated:YES];

}

@end