qq聊天布局思路

qq聊天布局思路

步骤一、更改控制器继承UITableViewController，然后修改storyboard中的控制器。
步骤二、加载plist文件，创建对应的数据模型
+ (instancetype)qqWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
- (instancetype)initWithDict:(NSDictionary *)dict
{
    self = [super init];
    if (self) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

步骤三、把数据模型用数组保存起来
+ (NSMutableArray *)qqs
{
    NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"messages.plist" ofType:nil]];
    NSMutableArray *arrayM = [NSMutableArray array];
    for (NSDictionary *dict in array) {
        [arrayM addObject:[self qqWithDict:dict]];
    }
    return arrayM;
}

- (NSString *)description
{
    return [NSString stringWithFormat:@"<%@,%p>{text:%@,time:%@,type:%d}",self.class,self,self.text,self.time,self.type];
}

步骤四、把cell封装到View层里面，重写set方法，把frame计算好

+ (instancetype)qqView:(UITableView *)tableView
{
    static NSString *ID = @"cell";
    SUNQQView *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil) {
        cell = [[SUNQQView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    return cell;
}

- (void)setQqInfo:(SUNQQInfo *)qqInfo
{
    _qqInfo = qqInfo;
   
    // 设置时间
    self.timerLabel.text = qqInfo.time;
    CGFloat timerW = [UIScreen mainScreen].bounds.size.width;
    self.timerLabel.frame = CGRectMake(0, 0, timerW, 35);
   
    // 设置头像
    if (qqInfo.type) {
        CGFloat imageX = kMargin;
        CGFloat imageY = CGRectGetMaxY(self.timerLabel.frame) + kMargin;
        self.iconImageView.frame = CGRectMake(imageX, imageY, kIconW, kIconH);
        self.iconImageView.image = [UIImage imageNamed:@"other"];
    }else{
        CGFloat X = [UIScreen mainScreen].bounds.size.width - kMargin - kIconW;
        CGFloat Y = CGRectGetMaxY(self.timerLabel.frame) + 10;
        self.iconImageView.frame = CGRectMake(X, Y, kIconW, kIconH);
        self.iconImageView.image = [UIImage imageNamed:@"me"];
       
    }
   
    // 设置文字
    NSDictionary *dict = @{NSFontAttributeName: [UIFont systemFontOfSize:13.0]};
    CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake(150, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];
    [self.textBtn setTitle:qqInfo.text forState:UIControlStateNormal];
    self.textBtn.contentEdgeInsets = UIEdgeInsetsMake(20, 20, 20, 20);
    CGFloat textY = CGRectGetMaxY(self.timerLabel.frame) + 10;
    CGFloat textW = frameText.size.width + 40;
    CGFloat textH = frameText.size.height + 40;
    CGFloat textX;
    if (qqInfo.type) {
        textX = CGRectGetMaxX(self.iconImageView.frame) + 10;
    }else{
        textX = [UIScreen mainScreen].bounds.size.width - 2*kMargin - kIconW - textW;
    }
    self.textBtn.frame = CGRectMake(textX, textY, textW, textH);
   
    // 设置行高
    CGFloat maxH = MAX(CGRectGetMaxY(self.iconImageView.frame), CGRectGetMaxY(self.textBtn.frame));
    self.cellHight = maxH + kMargin;
   
   
    // 设置聊天背景
    if (qqInfo.type) {
        UIImage *image = [UIImage imageNamed:@"chat_recive_nor"];
        UIImage *image1 = [image stretchableImageWithLeftCapWidth:30  topCapHeight:30];
        [self.textBtn setBackgroundImage:image1 forState:UIControlStateNormal];
        [self.textBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }else{
        UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
        UIImage *image1 = [image stretchableImageWithLeftCapWidth:30 topCapHeight:30];
        [self.textBtn setBackgroundImage:image1 forState:UIControlStateNormal];
        [self.textBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    }
   
注意：

1.在设置内容文字的自适应宽高，可以调用boundingRectWithSize方法
NSDictionary *dict = @{NSFontAttributeName: [UIFont systemFontOfSize:13.0]};
CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake(150, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];

2.按钮的宽度和高度，根据内容决定的，如果想更改按钮的宽度和高度，我们只需要修改内容的宽度和高度，但是加宽了按钮，按钮内部的宽度也会加宽，如果想要内容的宽度保持不变，需要设置按钮的内边距。
contentEdgeInsets
    

步骤五、实现其代理方法

#pragma mark - 实现代理的方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    SUNQQView *qqView = [[SUNQQView alloc] init];
    qqView.qqInfo =  self.qqs[indexPath.row];
    return qqView.cellHight;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    SUNQQView *cell = [SUNQQView qqView:tableView];
    // 取出数据
    cell.qqInfo = self.qqs[indexPath.row];
    cell.backgroundColor = [UIColor clearColor];
   
    return cell;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.qqs.count;
}

步骤六、监听键盘的通知

// 监听键盘的通知
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil];

- (void)keyboardWillChangeFrame:(NSNotification *)noti
{
    NSLog(@"%@",noti.userInfo);
    // 设置窗口的颜色
    self.view.window.backgroundColor = self.tableView.backgroundColor;
   
    // 取出键盘动画的时间
    CGFloat duration= [noti.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
   
    // 取得键盘最后的frame
    CGRect keyboardFrame = [noti.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
   
    // 计算控制器移动的距离
    CGFloat tansformY = keyboardFrame.origin.y - self.view.frame.size.height;
   
    // 执行动画
    [UIView animateWithDuration:duration animations:^{
        self.view.transform = CGAffineTransformMakeTranslation(0, tansformY);
    }];
}

// 移除通知
- (void)dealloc
{
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

步骤七、自动回复- (void)addMessage:(NSString *)text type:(MJMessageType)type

{
    // 1.数据模型
    MJMessage *msg = [[MJMessage alloc] init];
    msg.type = type;
    msg.text = text;
    // 设置数据模型的时间
    NSDate *now = [NSDate date];
    NSDateFormatter *fmt = [[NSDateFormatter alloc] init];
    fmt.dateFormat = @"HH:mm";
    msg.time = [fmt stringFromDate:now];
   
    // 看是否需要隐藏时间
    MJMessageFrame *lastMf = [self.messageFrames lastObject];
    MJMessage *lastMsg = lastMf.message;
    msg.hideTime = [msg.time isEqualToString:lastMsg.time];
   
    // 2.frame模型
    MJMessageFrame *mf = [[MJMessageFrame alloc] init];
    mf.message = msg;
    [self.messageFrames addObject:mf];
   
    // 
    [self.tableView reloadData];
   
    // 4.自动滚动表格到最后一行
    NSIndexPath *lastPath = [NSIndexPath indexPathForRow:self.messageFrames.count - 1 inSection:0];
    [self.tableView scrollToRowAtIndexPath:lastPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}

/**
 *  根据自己发的内容取得自动回复的内容
 *
 *  @param text 自己发的内容
 */
- (NSString *)replayWithText:(NSString *)text
{
    for (int i = 0; i<text.length; i++) {
        NSString *word = [text substringWithRange:NSMakeRange(i, 1)];
       
        if (self.autoreply[word]) return self.autoreply[word];
    }
   
    return @"滚蛋";
}

步骤八、其他的设置

    // 去除分割线
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    // 设置背景图片
    self.tableView.backgroundColor = [UIColor colorWithRed:224/255.0 green:224/255.0 blue:224/255.0 alpha:1.0];
    // 界面不允许被点击
    self.tableView.allowsSelection = NO;
   
    // 处理文本输入框
    self.inputView.leftView = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 5, 0)];
    self.inputView.leftViewMode = UITextFieldViewModeAlways;
    self.inputView.delegate = self;

九、return键的处理

#pragma mark - 文本框代理
/**
 *  点击了return按钮(键盘最右下角的按钮)就会调用
 */
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    // 1.自己发一条消息
    [self addMessage:textField.text type:MJMessageTypeMe];
   
    // 2.自动回复一条消息
    NSString *reply = [self replayWithText:textField.text];
    [self addMessage:reply type:MJMessageTypeOther];
   
    // 3.清空文字
    self.inputView.text = nil;
   
    // 返回YES即可
    return YES;
}