QQ的聊天界面搭建

Posted 2020-07-11

QQ聊天的简单的界面的搭建:

1.设置聊天界面的tableView

#pragma mark 设置tableview

- (void)settingTableView {

    self.tableView.backgroundColor = [UIColor colorWithRed:220/255.0 green:220/255.0 blue:220/255.0 alpha:1];

    

    self.tableView.dataSource = self;

    self.tableView.delegate = self;

    

    // 取消分割线

    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    // 取消选中

    self.tableView.allowsSelection = NO;

}

2.监听键盘的弹出(通知机制)

// 监听键盘弹出

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(KeyboardWillChangeFrameNotification:) name:UIKeyboardWillChangeFrameNotification object:nil];

#pragma mark 弹出或隐藏键盘调用的方法

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

    // 获取键盘信息

    NSDictionary *dict = noti.userInfo;

    // 获取当前键盘的frame

    CGRect keyBoardFrame = [dict[UIKeyboardFrameEndUserInfoKey] CGRectValue];

    // 计算键盘移动的距离

    CGFloat moveY = keyBoardFrame.origin.y - self.view.bounds.size.height;

    // 移动transform

    self.view.transform = CGAffineTransformMakeTranslation(0, moveY);

    // 滚动到最后一行

    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:self.frameArr.count - 1 inSection:0];

    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];

}

 3.点击发送按钮的事件

#pragma mark 点击发送事件的通知

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

    // 添加cell

    [self addMessageWithText:textField.text andMessageType:WDJMessagesTypeMe];

    [self addMessageWithText:@"洗洗睡吧" andMessageType:WDJMessagesTypeOther];

    // 清空textField内容

    textField.text = nil;

    return YES;

}

3.1 封装点击发送按钮后的tableView展示界面中添加cell的方法

// 封装添加cell的方法

- (void)addMessageWithText:(NSString *)text andMessageType:(WDJMessagesType)type {

    // 设置模型

    WDJMessages *message = [[WDJMessages alloc] init];

    // 设置属性

    NSDate *date = [NSDate date];

    // 时间格式

    NSDateFormatter *gs = [[NSDateFormatter alloc] init];

    gs.dateFormat = @"yyyy-MM-dd HH-mm";

    NSString *dateName = [gs stringFromDate:date];

    message.time = dateName;

    message.text = text;

    message.type = type;

    

    // 取出上一个模型

    WDJMessageFrame *lastFrame = [self.frameArr lastObject];

    message.hide = [lastFrame.message.time isEqualToString:message.time];

    // 设置frame模型

    WDJMessageFrame *frame = [[WDJMessageFrame alloc] init];

    frame.message = message;

    // 添加到数组模型中

    [self.frameArr addObject:frame];

    // 刷新数据

    [self.tableView reloadData];

    // 添加到最后一行

    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:self.frameArr.count -1 inSection:0];

    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];

}

 4.设置文本输入框

#pragma mark 文本输入框

- (void)settingTextField {

    // 设置占位

    UIView *view = [[UIView alloc] init];

    view.frame = CGRectMake(0, 0, 8, 0);

    self.textField.leftView = view;

    // 设置左占位的显示模式

    self.textField.leftViewMode = UITextFieldViewModeAlways;

    // 设置代理

    self.textField.delegate = self;

}