Fantageek翻译系列之《使用Autolayout显示变化高度的UITableViewCell》

这篇博客主要在于，解释如何通过仅仅使用Autolayout很很少的代码，显示高度不同的Cell。虽然标题说的是TableView,但是CollectionView同样适合。但是，这种方法只使用iOS7和iOS8。

在Github上的实例代码是DynamicTableViewCellHeight。

这个Demo显示了一些名人名言，他看起来像这样：

preferredMaxLayoutWidth

这种方法，主要来自于preferredMaxLayoutWidth属性。对于更多高级用法，请看Auto Layout and Views that Wrap。

User Interface

我使用的是Storyboard, 但是你能够使用xib或者代码, 对于如何使用代码，你可以看一下这篇文章AutoSize UITableViewCell height programmatically。

这里，“引言Label”显示多行（通过设置numberOfLines属性为0）。因为我们有2个Label，AutoLayout不知道如何扩大，不知道cell的大小改变时哪一个Label保持大小不变。在这种情况下，我想要“引言Label”扩大，所以减少减少垂直方向Hugging优先级，并且增加保持自身大小不变优先级。

关于hugging和resistance优先级的区别，可以看这篇文章Cocoa Autolayout: content hugging vs content compression resistance priority。

注意：

1、Dynamic Table View Cell Height and Auto Layout，这篇博客告诉我们，我们应该给labels的“intrinsic content”属性到1000，并且设置Intrinsic Size为占位符大小。我认为这是不需要的。

2、你必须给TableViewCell的contentView设置属性。

3、对于在Interface Builder中的CollectionViewCell。你不会看到contentView，但是你真的是和contentView打交道。

Cell

QuoteTableViewCell.h

@interface QuoteTableViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UILabel *numberLabel;
@property (weak, nonatomic) IBOutlet UILabel *quoteLabel;
 
@end

QuoteTableViewCell.m

@implementation QuoteTableViewCell
 
// (1)
- (void)setBounds:(CGRect)bounds
{
    [super setBounds:bounds];
 
    self.contentView.frame = self.bounds;
}
 
- (void)layoutSubviews
{
    [super layoutSubviews];
 
    // (2)
    [self.contentView updateConstraintsIfNeeded];
    [self.contentView layoutIfNeeded];
 
    // (3)
    self.quoteLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.quoteLabel.frame);
}
 
@end

ViewController

ViewController.m

#define SYSTEM_VERSION                              ([[UIDevice currentDevice] systemVersion])
#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v)  ([SYSTEM_VERSION compare:v options:NSNumericSearch] != NSOrderedAscending)
#define IS_IOS8_OR_ABOVE                            (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"8.0"))
 
@interface ViewController () <UITableViewDataSource, UITableViewDelegate>
 
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (nonatomic, strong) NSArray *items;
@property (nonatomic, strong) QuoteTableViewCell *prototypeCell;
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
 
    [self setupTableView];
    [self loadData];
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
#pragma mark - Setup
- (void)setupTableView
{
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
}
 
#pragma mark - Data
- (void)loadData
{
    NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"quotes" ofType:@"plist"];
    self.items = [[NSArray alloc] initWithContentsOfFile:plistPath];
 
    [self.tableView reloadData];
}
 
#pragma mark - PrototypeCell
// (4)
- (QuoteTableViewCell *)prototypeCell
{
    if (!_prototypeCell) {
        _prototypeCell = [self.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([QuoteTableViewCell class])];
    }
 
    return _prototypeCell;
}
 
#pragma mark - Configure
- (void)configureCell:(QuoteTableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *quote = self.items[indexPath.row];
 
    cell.numberLabel.text = [NSString stringWithFormat:@"Quote %ld", (long)indexPath.row];
    cell.quoteLabel.text = quote;
}
 
#pragma mark - UITableViewDataSouce
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.items.count;
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    QuoteTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([QuoteTableViewCell class])];
 
    [self configureCell:cell forRowAtIndexPath:indexPath];
 
    return cell;
}
 
#pragma mark - UITableViewDelegate
// (5)
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return UITableViewAutomaticDimension;
}
 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // (6)
    if (IS_IOS8_OR_ABOVE) {
        return UITableViewAutomaticDimension;
    }
 
    // (7)
    //self.prototypeCell.bounds = CGRectMake(0, 0, CGRectGetWidth(self.tableView.bounds), CGRectGetHeight(self.prototypeCell.bounds));
 
    [self configureCell:self.prototypeCell forRowAtIndexPath:indexPath];
 
    // (8)
    [self.prototypeCell updateConstraintsIfNeeded];
    [self.prototypeCell layoutIfNeeded];
 
    // (9)
    return [self.prototypeCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
 
}
 
@end

注意以下几点:

1、Auto Layout in UICollectionViewCell not working

2、AutoSize UITableViewCell height programmatically

Make sure the contentView does a layout pass here so that its subviews have their frames set, which we need to use to set the preferredMaxLayoutWidth below.

Set the preferredMaxLayoutWidth of the mutli-line bodyLabel based on the evaluated width of the label’s frame, as this will allow the text to wrap correctly, and as a result allow the label to take on the correct height.

3、你只需要调用[self.contentView layoutIfNeeded]。

4、如果你要改变某些限制，你需要调用[self.contentView updateConstraintsIfNeeded]。

5、如果你调用[self.contentView updateConstraintsIfNeeded]，你必须在之前调用[self.contentView layoutIfNeeded]。

6、不需要调用[self.contentView setsNeedLayout]，或者self.contentView setsNeedUpdateConstraints]。

ViewController

#define SYSTEM_VERSION                              ([[UIDevice currentDevice] systemVersion])
#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v)  ([SYSTEM_VERSION compare:v options:NSNumericSearch] != NSOrderedAscending)
#define IS_IOS8_OR_ABOVE                            (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"8.0"))
 
@interface ViewController () <UITableViewDataSource, UITableViewDelegate>
 
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (nonatomic, strong) NSArray *items;
@property (nonatomic, strong) QuoteTableViewCell *prototypeCell;
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
 
    [self setupTableView];
    [self loadData];
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
#pragma mark - Setup
- (void)setupTableView
{
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
}
 
#pragma mark - Data
- (void)loadData
{
    NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"quotes" ofType:@"plist"];
    self.items = [[NSArray alloc] initWithContentsOfFile:plistPath];
 
    [self.tableView reloadData];
}
 
#pragma mark - PrototypeCell
// (4)
- (QuoteTableViewCell *)prototypeCell
{
    if (!_prototypeCell) {
        _prototypeCell = [self.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([QuoteTableViewCell class])];
    }
 
    return _prototypeCell;
}
 
#pragma mark - Configure
- (void)configureCell:(QuoteTableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *quote = self.items[indexPath.row];
 
    cell.numberLabel.text = [NSString stringWithFormat:@"Quote %ld", (long)indexPath.row];
    cell.quoteLabel.text = quote;
}
 
#pragma mark - UITableViewDataSouce
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.items.count;
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    QuoteTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([QuoteTableViewCell class])];
 
    [self configureCell:cell forRowAtIndexPath:indexPath];
 
    return cell;
}
 
#pragma mark - UITableViewDelegate
// (5)
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return UITableViewAutomaticDimension;
}
 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // (6)
    if (IS_IOS8_OR_ABOVE) {
        return UITableViewAutomaticDimension;
    }
 
    // (7)
    //self.prototypeCell.bounds = CGRectMake(0, 0, CGRectGetWidth(self.tableView.bounds), CGRectGetHeight(self.prototypeCell.bounds));
 
    [self configureCell:self.prototypeCell forRowAtIndexPath:indexPath];
 
    // (8)
    [self.prototypeCell updateConstraintsIfNeeded];
    [self.prototypeCell layoutIfNeeded];
 
    // (9)
    return [self.prototypeCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
 
}
 
@end

7、原型cell绝不会显示出来，它用来布局一个cell并且决定一个需要的高度。

8、你能够使用UITableViewAutomaticDimension，或者使用一个大约合理的高度。

9、iOS8 autoSizing属性需要使用UITableViewAutomaticDimension。