现在大部分的聊天工具，像QQ，微信等及时聊天都有各种的小气泡包含着所要发送的文字，对其进行了一部分的整理，可能不全，仅供自己参考
①首先聊天的页面其实是个tableView，因为都是一行一条信息的，只要把它的分割线去掉就可以让其一条条的显示。
②在你向文本框输入信息的时候，文本框和发送按钮要随着键盘移动而移动，所以要将textFiled和Button同时放到一个view上面，整体上下移动。
1 _dataArray = [[NSMutableArray alloc] init]; 2 CGSize winSize = self.view.frame.size; 3 _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0, winSize.width, winSize.height-40)]; 4 //去掉分割线 5 _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 6 _tableView.delegate = self; 7 _tableView.dataSource = self; 8 [self.view addSubview:_tableView]; 9 10 11 _chatView = [[UIView alloc] initWithFrame:CGRectMake(0, winSize.height-40, winSize.width, 40)]; 12 _chatView.backgroundColor = [UIColor grayColor]; 13 [self.view addSubview:_chatView]; 14 15 _textField = [[UITextField alloc] initWithFrame:CGRectMake(10, 5, winSize.width-60, 30)]; 16 _textField.borderStyle = UITextBorderStyleRoundedRect; 17 [_chatView addSubview:_textField]; 18 19 UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem]; 20 btn.frame = CGRectMake(winSize.width-40, 5, 30, 30); 21 [btn setTitle:@"发送" forState:UIControlStateNormal]; 22 [btn addTarget:self action:@selector(sendText) forControlEvents:UIControlEventTouchUpInside]; 23 [_chatView addSubview:btn];
③怎么判断在键盘出现和消失的时候，view应该上下移动多少呢，需要对键盘加监听，得到键盘的高度
//监听键盘出现 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; //监听键盘消失 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
④在键盘出现和消失的时候对_tableView和_chatView进行调整
1 //键盘出现 2 - (void)keyboardWillShow:(NSNotification *)noti 3 { 4 //键盘的高度 5 CGSize size = [noti.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].size; 6 //屏幕宽高 7 CGSize winSize = self.view.frame.size; 8 //tableView的大小 9 _tableView.frame = CGRectMake(0, 0, winSize.width, winSize.height-40-size.height); 10 //ChatView的位置 11 _chatView.frame = CGRectMake(0, winSize.height-40-size.height, winSize.width, 40); 12 } 13 //键盘消失 14 - (void)keyboardWillHide:(NSNotification *)noti 15 { 16 //屏幕宽高 17 CGSize winSize = self.view.frame.size; 18 //tableView的大小恢复 19 _tableView.frame = CGRectMake(0, 0, winSize.width, winSize.height-40); 20 //ChatView的位置恢复 21 _chatView.frame = CGRectMake(0, winSize.height-40, winSize.width, 40); 22 }
⑤在自定义cell的时候要计算文本所占的大小，当是自己发送的时候，将左边的Bubble隐藏掉，右边的开启，在此要重新计算label气泡的大小
CGSize size = [chatModel.content boundingRectWithSize:CGSizeMake(250, 1000) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15.0]} context:nil].size; CGSize winSize = [[UIScreen mainScreen] bounds].size; if(chatModel.isSelf){ //自己发得 cell.rightBubble.hidden = NO; cell.leftBubble.hidden = YES; //显示文本 cell.rightLabel.text = chatModel.content; //重新计算label和气泡的大小 cell.rightLabel.frame = CGRectMake(10, 5, size.width, size.height); cell.rightBubble.frame = CGRectMake(winSize.width-size.width-40, 5, size.width+25, size.height+15); }
⑥tableView的行高也是根据文本所占大小来调整的，在此不贴代码了。
⑦最后就是发送文本的过程，在点击发送按钮的时候，将文本框里的内容给ChatModel模型，发送之后将文本框置空，由于在发送的过程中，键盘会挡住tableView上显示的文本，所以要每一次添加一行
1 ChatModel *chatModel = [[ChatModel alloc] init]; 2 chatModel.content = _textField.text; 3 chatModel.isSelf = YES; 4 _textField.text = @""; 5 [_dataArray addObject:chatModel]; 6 //添加一行 7 NSIndexPath *indexPath = [NSIndexPath indexPathForRow:_dataArray.count-1 inSection:0]; 8 [_tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic]; 9 //滚动到最后一行 10 [_tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];