UITableViewCell使用自動(dòng)布局的“最佳實(shí)踐”

前言

iOS 處理TableView的復(fù)雜Cell是一件很麻煩的事情，我們得計(jì)算Cell里面內(nèi)容的Frame以及Cell的高度，現(xiàn)在有一種相對(duì)高效的方式，使用自動(dòng)布局的Cell可以讓這件事變得容易起來了，不用再去計(jì)算里面的Frame和自身的高度，接下來談?wù)撓逻@種方式的實(shí)現(xiàn)以及里面的坑。

實(shí)戰(zhàn)

我們實(shí)現(xiàn)了一個(gè)這樣的UITableView：

自動(dòng)布局Cell的TableView
自動(dòng)布局Cell的TableView

這是一個(gè)簡(jiǎn)單的列表，和其他的列表無異，不過Cell里面的布局使用了是自動(dòng)布局。

  • 首先需要設(shè)置UITableVIew的自動(dòng)布局相關(guān)的屬性
    self.tableView.estimatedRowHeight = 200;
    self.tableView.rowHeight = UITableViewAutomaticDimension;
  • 然后重寫UITableVIew的delegate和DataSource方法

這里不需要再重寫返回cell高度的方法了，因?yàn)槭褂昧俗詣?dòng)布局的Cell，Cell的高度有Cell的內(nèi)容來決定就好了。

#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的實(shí)現(xiàn)了

自動(dòng)布局的框架使用的是Masonry，自動(dòng)布局的Cell基本的思想就是讓Cell里面的內(nèi)容決定Cell的高度，所以除了常規(guī)的設(shè)置元素的約束之外，還需要一個(gè)到父View底部的約束，這樣父View才會(huì)根據(jù)子View的內(nèi)容計(jì)算出自身的高度。特別地，需要給最后設(shè)置的這個(gè)約束添加上一個(gè)優(yōu)先級(jí)的值，可以設(shè)置為是一個(gè)小于1000的值，這里設(shè)置的是900，因?yàn)閕OS計(jì)算高度會(huì)有點(diǎn)小的偏差，是一個(gè)很小的小數(shù)值，在運(yùn)行的時(shí)候會(huì)出現(xiàn)類似的警告信息：

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>

可以通過設(shè)置最終決定父View高度的子View到父View底部的約束的優(yōu)先級(jí)來解決這個(gè)問題。

    [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));
        // 設(shè)置優(yōu)先級(jí)處理警告信息
        make.height.equalTo(@(183.0/3)).priority(900);
    }];

完整的Cell代碼實(shí)現(xiàn)


#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

注意點(diǎn)

setContentHuggingPriority和setContentCompressionResistancePriority的使用

以這個(gè)圖為例

自動(dòng)布局Cell的TableView
自動(dòng)布局Cell的TableView

右邊的數(shù)字和坐標(biāo)的標(biāo)題寬度都是動(dòng)態(tài)數(shù)據(jù)決定的，在這個(gè)場(chǎng)景中，我們需要實(shí)現(xiàn)的是這樣的效果：數(shù)字的優(yōu)先級(jí)比較高，數(shù)字需要完全被展示，不能被壓縮，而標(biāo)題當(dāng)內(nèi)容超過邊界值，需要被截取。
從壓縮內(nèi)容角度來看： 當(dāng)標(biāo)題的文字超過了數(shù)字，被壓縮的應(yīng)該是標(biāo)題，可以查看第二個(gè)Cell的例子。因此數(shù)字的防止壓縮的優(yōu)先級(jí)比標(biāo)題的高，可以通過setContentCompressionResistancePriority方法，設(shè)置數(shù)字更大的防止壓縮優(yōu)先級(jí)來達(dá)到效果
從拉伸角度來看：如果不改變對(duì)默認(rèn)的其方式，希望數(shù)字能夠一直停留在左邊，那么當(dāng)標(biāo)題沒有超過邊界值，有一者是需要被拉伸的，如果是數(shù)字被拉伸，那么默認(rèn)的對(duì)其方式就不會(huì)實(shí)現(xiàn)數(shù)字停留在最左邊的效果了，所以可以通過設(shè)置拉伸的優(yōu)先級(jí)來達(dá)到效果，通過setContentHuggingPriority來設(shè)置數(shù)字比較小的優(yōu)先級(jí)實(shí)現(xiàn)。

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

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

總結(jié)

使用自動(dòng)布局的Cell在一定的程度上提高了開發(fā)效率，不過需要注意自動(dòng)布局中的某些坑，才能讓自動(dòng)布局更好的工作。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,199評(píng)論 1贊 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評(píng)論 25贊 708
  • 翻譯自“Auto Layout Guide”。 2 自動(dòng)布局細(xì)則手冊(cè) 2.1 堆棧視圖 接下來的章節(jié)展示了如何使用...
    lakerszhy閱讀 1,996評(píng)論 3贊 9
  • 海上生明月，天涯共此時(shí)。 月兒出奇地圓潤(rùn)與瑩潔。風(fēng)清月白，樹影參差，今年秋水初映月，盈盈之外的對(duì)岸，有嬌語(yǔ)娓娓，漸...
    宛如飛羽閱讀 374評(píng)論 1贊 1
  • 關(guān)于貓砂盆，下面是我買過的三個(gè) 第一種是最普通的露天的，當(dāng)時(shí)肉肉只有兩個(gè)月 怕太復(fù)雜的貓砂盆他接受不了尿在外面 結(jié)...
    宋軼軼閱讀 255評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容