基于UITableView的chat气泡界面实现

气泡聊天界面基本上就是tableviewcell，就是一个列表，聊天时，动态插入一条数据并进行展示

屏幕快照 2020-04-05 12.23.14.png

界面实现

1.tableView自定义cell并进行替换
2.自定义cell中布局

//信息的背景图片
 [self.backImg mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.icon);
        make.right.equalTo(self.icon.mas_left).offset(-8);
        make.width.lessThanOrEqualTo(@200);//设置宽度最小是200
    }];
//信息文本
 [self.messageLab mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(self.backImg).mas_offset(UIEdgeInsetsMake(8, 8, 8, 16));
//关键性约束，文本信息的底部据cell的底部一个向上的约束
        make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);
    }];

另外一种写法

//两次底部约束的设置是根据两个不同的控件，并不是相对于一个控件
    [self.messageLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.timelab.mas_bottom).offset(8);
        make.right.equalTo(self.backImg.mas_right).offset(-16);
        make.left.equalTo(self.backImg.mas_left).offset(8);
        make.bottom.equalTo(self.backImg.mas_bottom).offset(-8);
        make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);
}];

3.图片的拉伸
可以设置图片可以拉伸的部分

    UIEdgeInsets inster = UIEdgeInsetsMake(8, 8, 8, 8);
    UIImage *image = [[UIImage imageNamed:@"Dialog_white_press.left"]resizableImageWithCapInsets:inster resizingMode:UIImageResizingModeStretch];
    self.backImg.image = image;