iOS Masonry 自动适配聊天气泡cell
2019-04-03 本文已影响0人
不忘初心的初
小编已经近一年没有写技术文档了,感觉稍有荒废。在前几天面试过程中,面试官小伙问了一个关于用如何用 Masonry 自动适配聊天气泡的问题,因为有一段时间没有写聊天页面了,对有些细节记忆的不太清楚,近期以技术文档的形式进行了归纳,希望对开发的小伙伴有些许帮助。
首先集成 Masonry ,然后 UIViewController 中代码实现
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//数据源
_array = @[@"今天的天气真好,今天的天气真好,今天的天气真好,今天的天气真好,今天的天气真好", @"今天的天气真好,今天的天气真好", @"今天的天气真好,今天的天气真好,今天的天气真好", @"今天的天气真好"];
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
[_tableView registerClass:[CYTabCell class] forCellReuseIdentifier:@"CYTabCell"];
[self.view addSubview:_tableView];
}
//记住千万不要实现 tableView 的 cell 高度代理
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return _array.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
CYTabCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CYTabCell"];
cell.str = _array[indexPath.row];
return cell;
}
UITabelViewCell 中的内容
#import "CYTabCell.h"
@interface CYTabCell ()
//气泡弹窗
@property (nonatomic, strong)UILabel *label;
//文本
@property (nonatomic, strong)UIImageView *imgView;
@end
@implementation CYTabCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//只是为了代码清晰,和懒加载没啥关系
[self.contentView addSubview:self.imgView];
[self.contentView addSubview:self.label];
}
return self;
}
- (UILabel *)label {
if (!_label) {
_label = [[UILabel alloc] init];
_label.font = [UIFont systemFontOfSize:15];
_label.textColor = [UIColor blackColor];
//设置最大宽度
_label.preferredMaxLayoutWidth = 300;
_label.numberOfLines = 0;
}
return _label;
}
- (UIImageView *)imgView {
if (!_imgView) {
_imgView = [[UIImageView alloc] init];
_imgView.backgroundColor = [UIColor orangeColor];
_imgView.layer.cornerRadius = 5;
_imgView.layer.masksToBounds = YES;
[self.contentView addSubview:_imgView];
}
return _imgView;
}
- (void)setStr:(NSString *)str {
_str = str;
_label.text = _str;
[_label mas_updateConstraints:^(MASConstraintMaker *make) {
//不要设置 left
make.top.equalTo(_label.superview.mas_top).offset(15);
make.right.equalTo(_label.superview.mas_right).offset(-40);
make.bottom.equalTo(_label.superview.mas_bottom).offset(-15);
}];
[_imgView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(_label).offset(-15);
make.top.equalTo(_label).offset(-10);
make.bottom.mas_equalTo(_label).offset(10);
make.right.mas_equalTo(_label).offset(15);
}];
}
- (void)layoutSubviews {
[super layoutSubviews];
}
效果图
1554298562249.jpg
谢谢!