氣泡聊天界面基本上就是tableviewcell抽诉,就是一個(gè)列表,聊天時(shí)吨艇,動(dòng)態(tài)插入一條數(shù)據(jù)并進(jìn)行展示
屏幕快照 2020-04-05 12.23.14.png
界面實(shí)現(xiàn)
1.tableView自定義cell并進(jìn)行替換
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);//設(shè)置寬度最小是200
}];
//信息文本
[self.messageLab mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.backImg).mas_offset(UIEdgeInsetsMake(8, 8, 8, 16));
//關(guān)鍵性約束徒爹,文本信息的底部據(jù)cell的底部一個(gè)向上的約束
make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);
}];
另外一種寫法
//兩次底部約束的設(shè)置是根據(jù)兩個(gè)不同的控件,并不是相對(duì)于一個(gè)控件
[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.圖片的拉伸
可以設(shè)置圖片可以拉伸的部分
UIEdgeInsets inster = UIEdgeInsetsMake(8, 8, 8, 8);
UIImage *image = [[UIImage imageNamed:@"Dialog_white_press.left"]resizableImageWithCapInsets:inster resizingMode:UIImageResizingModeStretch];
self.backImg.image = image;