UITableViewCell使用自动布局的“最佳实践”

前言

iOS 处理TableView的复杂Cell是一件很麻烦的事情，我们得计算Cell里面内容的Frame以及Cell的高度，现在有一种相对高效的方式，使用自动布局的Cell可以让这件事变得容易起来了，不用再去计算里面的Frame和自身的高度，接下来谈论下这种方式的实现以及里面的坑。

实战

我们实现了一个这样的UITableView：

自动布局Cell的TableView
自动布局Cell的TableView

这是一个简单的列表，和其他的列表无异，不过Cell里面的布局使用了是自动布局。

  • 首先需要设置UITableVIew的自动布局相关的属性
    self.tableView.estimatedRowHeight = 200;
    self.tableView.rowHeight = UITableViewAutomaticDimension;
  • 然后重写UITableVIew的delegate和DataSource方法

这里不需要再重写返回cell高度的方法了，因为使用了自动布局的Cell，Cell的高度有Cell的内容来决定就好了。

#pragma mark - ......::::::: UITableViewDelegate :::::::......

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    AutolayoutCell* cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([AutolayoutCell class])];
    GameModel* gameModel = _datas[indexPath.row];
    [cell loadData:gameModel indexPath:indexPath];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    
    UITableViewCell* cell = [tableView cellForRowAtIndexPath:indexPath];
    [TagViewUtils showTaggingViewWithView:cell.contentView];
}
  • 接下来就是Cell的实现了

自动布局的框架使用的是Masonry，自动布局的Cell基本的思想就是让Cell里面的内容决定Cell的高度，所以除了常规的设置元素的约束之外，还需要一个到父View底部的约束，这样父View才会根据子View的内容计算出自身的高度。特别地，需要给最后设置的这个约束添加上一个优先级的值，可以设置为是一个小于1000的值，这里设置的是900，因为iOS计算高度会有点小的偏差，是一个很小的小数值，在运行的时候会出现类似的警告信息：

2017-05-28 00:04:31.751783+0800 AutolayoutCell[27341:18908463] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<MASLayoutConstraint:0x6000000b7c40 UIImageView:0x7ff9afd1a1f0.top == UITableViewCellContentView:0x7ff9afd199b0.top + 9.03333>",
    "<MASLayoutConstraint:0x6000000b7d00 UIImageView:0x7ff9afd1a1f0.bottom == UITableViewCellContentView:0x7ff9afd199b0.bottom - 9>",
    "<MASLayoutConstraint:0x6000000b7ee0 UIImageView:0x7ff9afd1a1f0.height == 61>",
    "<NSLayoutConstraint:0x618000091a80 UITableViewCellContentView:0x7ff9afd199b0.height == 79>"
)

Will attempt to recover by breaking constraint 
<MASLayoutConstraint:0x6000000b7ee0 UIImageView:0x7ff9afd1a1f0.height == 61>

可以通过设置最终决定父View高度的子View到父View底部的约束的优先级来解决这个问题。

    [gameIconImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(84.0/3);
        make.top.equalTo(self.contentView).offset(27.1/3);
        make.bottom.equalTo(self.contentView).offset(-27.1/3);
        make.width.equalTo(@(183.0/3));
        // 设置优先级处理警告信息
        make.height.equalTo(@(183.0/3)).priority(900);
    }];

完整的Cell代码实现


#import "AutolayoutCell.h"
#import <Masonry.h>
#import "GameModel.h"
#import <UIImageView+WebCache.h>

@interface AutolayoutCell () {
    GameModel* _gameModel;
}

@property (nonatomic, weak) UIImageView* gameIconImageView;
@property (nonatomic, weak) UILabel* gameTitleLabel;
@property (nonatomic, weak) UILabel* gameTagLabel;
@property (nonatomic, weak) UILabel* gameRateLabel;

@end

@implementation AutolayoutCell

- (instancetype)init {
    self = [super init];
    if (self) {
        [self myInit];
    }
    return self;
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        [self myInit];
    }
    return self;
}

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
}

- (void)myInit {
    UIImageView* gameIconImageView = [UIImageView new];
    gameIconImageView.backgroundColor = [UIColor redColor];
    gameIconImageView.contentMode = UIViewContentModeScaleAspectFill;
    gameIconImageView.layer.cornerRadius = 5;
    gameIconImageView.layer.masksToBounds = YES;
    [self.contentView addSubview:gameIconImageView];
    [gameIconImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(84.1/3);
        make.top.equalTo(self.contentView).offset(27.1/3);
        make.bottom.equalTo(self.contentView).offset(-27.0/3);
        make.width.equalTo(@(183.0/3));
        make.height.equalTo(@(183.0/3)).priority(900);
    }];
    _gameIconImageView = gameIconImageView;
    
    
    UILabel* gameRateLabel = [UILabel new];
    gameRateLabel.numberOfLines = 1;
    gameRateLabel.text = @"9.3";
    gameRateLabel.textColor = [UIColor redColor];
    gameRateLabel.font = [UIFont systemFontOfSize:24];
    [self.contentView addSubview:gameRateLabel];
    _gameRateLabel = gameRateLabel;
    [_gameRateLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [_gameRateLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [gameRateLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.contentView).offset(-78.0/3);
        make.top.equalTo(self.contentView).offset(45.0/3);
    }];
    
    
    UILabel* gameTitleLabel = [UILabel new];
    gameTitleLabel.numberOfLines = 1;
    gameTitleLabel.text = @"Star Trek Star Trek Star Trek Star Trek Star Trek ";
    gameTitleLabel.font = [UIFont systemFontOfSize:16];
    gameTitleLabel.textColor = [UIColor blackColor];
    [self.contentView addSubview:gameTitleLabel];
    _gameTitleLabel = gameTitleLabel;
    [_gameTitleLabel setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    [_gameTitleLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    [gameTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_gameIconImageView.mas_right).offset(48.0/3);
        make.top.equalTo(_gameIconImageView).offset(21.0/3);
        make.right.equalTo(_gameRateLabel.mas_left).offset(-55.0/3);
    }];
    
    UILabel* gameTagLabel = [UILabel new];
    gameTagLabel.numberOfLines = 1;
    gameTagLabel.text = @"Category:MMOPRG";
    gameTagLabel.font = [UIFont systemFontOfSize:14];
    gameTagLabel.textColor = [UIColor lightGrayColor];
    [self.contentView addSubview:gameTagLabel];
    _gameTagLabel = gameTagLabel;
    [_gameTagLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [gameTagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_gameIconImageView.mas_right).offset(48.0/3);
        make.bottom.equalTo(_gameIconImageView).offset(-21.0/3);
    }];
    
    UIView* sepLine = [UIView new];
    sepLine.backgroundColor = [UIColor lightGrayColor];
    [self.contentView addSubview:sepLine];
    [sepLine mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(54.0/3);
        make.right.equalTo(self.contentView).offset(-54.0/3);
        make.bottom.equalTo(self.contentView);
        make.height.equalTo(@(1));
    }];
    
    
//    gameTagLabel.alpha = 0;
//    gameRateLabel.alpha = 0;
}

- (void)loadData:(id)data indexPath:(NSIndexPath *)indexPath {
    if ([data isKindOfClass:[GameModel class]]) {
        _gameModel = data;
        
        [_gameIconImageView sd_setImageWithURL:[NSURL URLWithString:_gameModel.image]];
        _gameTitleLabel.text = _gameModel.name;
        _gameTagLabel.text = [NSString stringWithFormat:@"%@:%@", @"Category", _gameModel.category];
        _gameRateLabel.text = [NSString stringWithFormat:@"%@", @(_gameModel.point)];
    }
}

@end

注意点

setContentHuggingPriority和setContentCompressionResistancePriority的使用

以这个图为例

自动布局Cell的TableView
自动布局Cell的TableView

右边的数字和坐标的标题宽度都是动态数据决定的，在这个场景中，我们需要实现的是这样的效果：数字的优先级比较高，数字需要完全被展示，不能被压缩，而标题当内容超过边界值，需要被截取。
从压缩内容角度来看： 当标题的文字超过了数字，被压缩的应该是标题，可以查看第二个Cell的例子。因此数字的防止压缩的优先级比标题的高，可以通过setContentCompressionResistancePriority方法，设置数字更大的防止压缩优先级来达到效果
从拉伸角度来看：如果不改变对默认的其方式，希望数字能够一直停留在左边，那么当标题没有超过边界值，有一者是需要被拉伸的，如果是数字被拉伸，那么默认的对其方式就不会实现数字停留在最左边的效果了，所以可以通过设置拉伸的优先级来达到效果，通过setContentHuggingPriority来设置数字比较小的优先级实现。

    [_gameRateLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [_gameRateLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];

    [_gameTitleLabel setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    [_gameTitleLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

总结

使用自动布局的Cell在一定的程度上提高了开发效率，不过需要注意自动布局中的某些坑，才能让自动布局更好的工作。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,530评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,403评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,120评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,770评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,758评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,649评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,021评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,675评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,931评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,410评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,004评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2赞 343

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1赞 92
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,432评论 25赞 707
  • 自动布局指南-Part 2：自动布局细则手册
    翻译自“Auto Layout Guide”。 2 自动布局细则手册 2.1 堆栈视图 接下来的章节展示了如何使用...
    lakerszhy阅读 1,852评论 3赞 9
  • 愿能良夕长似年
    海上生明月，天涯共此时。 月儿出奇地圆润与莹洁。风清月白，树影参差，今年秋水初映月，盈盈之外的对岸，有娇语娓娓，渐...
    宛如飞羽阅读 315评论 1赞 1
  • 2017-09-03
    关于猫砂盆，下面是我买过的三个 第一种是最普通的露天的，当时肉肉只有两个月 怕太复杂的猫砂盆他接受不了尿在外面 结...
    宋轶轶阅读 224评论 0赞 0