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 ;
 }

 - (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 ;
 }

 - (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。