气泡聊天

    现在大部分的聊天工具，像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];

 

转载于:https://www.cnblogs.com/Angelone/p/4381850.html