iOS UITableViewCell 高度自适应

DominiqueYo 8年前
   <p>UITableViewCell 高度自适应一直是我们做动态Cell高度时遇到的最烦躁的问题,Cell动态高度计算可以去看看 <a href="/misc/goto?guid=4959633344494054779" rel="nofollow,noindex">sunny</a> 的这篇文章介绍,今天主要和大家分享下我在使用 systemLayoutSizeFittingSize 系统自带方法计算高度的一些心得!</p>    <h3><strong>Demo gif</strong></h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/efebfa6de68af34dac99538ce90f5e0f.gif"></p>    <p style="text-align:center">ZHAutoCalculateCellHeight.gif</p>    <h2><strong>先看原函数注释</strong></h2>    <pre>  <code class="language-objectivec">/* The size fitting most closely to targetSize in which the receiver's subtree can be laid out while optimally satisfying the constraints. If you want the smallest possible size, pass UILayoutFittingCompressedSize; for the largest possible size, pass UILayoutFittingExpandedSize.   Also see the comment for UILayoutPriorityFittingSizeLevel.   */  - (CGSize)systemLayoutSizeFittingSize:(CGSize)targetSize NS_AVAILABLE_IOS(6_0); // Equivalent to sending -systemLayoutSizeFittingSize:withHorizontalFittingPriority:verticalFittingPriority: with UILayoutPriorityFittingSizeLevel for both priorities.</code></pre>    <p>从注释中我们可以看出,当你的约束条件配置好后它可以计算出最接近目标的Size,那我们该如何下手呢?</p>    <h3><strong>1.首先我们需要建一个UITableViewCell</strong></h3>    <p>假如我们Cell的布局如下所示:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/475dd7648993f1c9ad49dfff4043d0c6.png"></p>    <p style="text-align:center">屏幕快照 2016-09-08 17.08.11.png</p>    <p>Cell所对应的Class我们取名为 ZHCalculateTableViewCell<br> 所带属性我们定义为:</p>    <pre>  <code class="language-objectivec">@interface ZHCalculateTableViewCell : UITableViewCell  @property (weak, nonatomic) IBOutlet UILabel *TitleLabel;  @property (weak, nonatomic) IBOutlet UILabel *ContentLabel;  @property (weak, nonatomic) IBOutlet UIImageView *showImgView;  @property (weak, nonatomic) IBOutlet UILabel *UseNameLabel;  @property (weak, nonatomic) IBOutlet UILabel *TimeLabel;  @property (strong, nonatomic) ZHCalculateHeightModel *model;  @end</code></pre>    <p>看到这里也许你会疑惑 ZHCalculateHeightModel 是什么,它是我们Cell所要展示的数据来源!</p>    <h3><strong>2.然后我们为我们的Cell建个数据模型</strong></h3>    <p>Cell的模型名称我们暂定为: ZHCalculateHeightModel<br> 所带属性:</p>    <pre>  <code class="language-objectivec">@interface ZHCalculateHeightModel : NSObject  @property (nonatomic, strong) NSString *title;  @property (nonatomic, strong) NSString *content;  @property (nonatomic, strong) NSString *username;  @property (nonatomic, strong) NSString *time;  @property (nonatomic, strong) NSString *imageName;</code></pre>    <p>Ok,数据模型建立好了,展示的TableViewCell也有了, Just Show it~</p>    <h3><strong>3. 建一个继承于 UITableViewController 的 ZHCustomLayoutTableViewController</strong></h3>    <ul>     <li>建一个在函数 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 中调用的Cell:</li>    </ul>    <pre>  <code class="language-objectivec">@property (nonatomic, strong)  ZHCalculateTableViewCell *prototypeCell;</code></pre>    <ul>     <li>注册Cell</li>    </ul>    <pre>  <code class="language-objectivec">[self.tableView registerNib:[UINib nibWithNibName:@"ZHCalculateTableViewCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:CellIdentifier];  self.tableView.estimatedRowHeight = 100;//很重要保障滑动流畅性  self.prototypeCell = [self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];</code></pre>    <ul>     <li>动态计算高度</li>    </ul>    <pre>  <code class="language-objectivec">-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath  {        ZHCalculateTableViewCell *cell = self.prototypeCell;      cell.contentView.translatesAutoresizingMaskIntoConstraints = NO;      [self configureCell:cell atIndexPath:indexPath];//必须先对Cell中的数据进行配置使动态计算时能够知道根据Cell内容计算出合适的高度        /*------------------------------重点这里必须加上contentView的宽度约束不然计算出来的高度不准确-------------------------------------*/      CGFloat contentViewWidth = CGRectGetWidth(self.tableView.bounds);      NSLayoutConstraint *widthFenceConstraint = [NSLayoutConstraint constraintWithItem:cell.contentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:contentViewWidth];      [cell.contentView addConstraint:widthFenceConstraint];      // Auto layout engine does its math      CGFloat fittingHeight = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;      [cell.contentView removeConstraint:widthFenceConstraint];      /*-------------------------------End------------------------------------*/        return fittingHeight+2*1/[UIScreen mainScreen].scale;//必须加上上下分割线的高度  }      #pragma mark Configure Cell Data  - (void)configureCell:(ZHCalculateTableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {      cell.model = [dataArray objectAtIndex:indexPath.row];//Cell中对其进行处理  }</code></pre>    <h3>ZHCalculateTableViewCell Model的Set函数重写为</h3>    <pre>  <code class="language-objectivec">#pragma mark - Setters  -(void)setModel:(ZHCalculateHeightModel *)model  {      _model = model;      self.TitleLabel.text = model.title;      self.ContentLabel.text = model.content;      self.showImgView.image = model.imageName.length > 0 ? [UIImage imageNamed:model.imageName] : nil;      self.UseNameLabel.text = model.username;      self.TimeLabel.text = model.time;    }</code></pre>    <h3><strong>扩展</strong></h3>    <p>我们可以在计算高度后对其进行缓存,下次可以直接返回!如何缓存可以看 <a href="/misc/goto?guid=4959716310769443456" rel="nofollow,noindex">为UITableViewCell 高度自适应加速</a> .</p>    <h3><strong>总结</strong></h3>    <ul>     <li>在 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 一定不要用 ZHCalculateTableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath]; 来获取Cell。</li>     <li>上述动态计算Cell高度中最最重要的是需要在计算前先初始化Cell中的数据。</li>     <li>一定要对ContentView加上宽度约束。</li>    </ul>    <pre>  <code class="language-objectivec">CGFloat contentViewWidth = CGRectGetWidth(self.tableView.bounds);      NSLayoutConstraint *widthFenceConstraint = [NSLayoutConstraint constraintWithItem:cell.contentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:contentViewWidth];      [cell.contentView addConstraint:widthFenceConstraint];      // Auto layout engine does its math      CGFloat fittingHeight = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;      [cell.contentView removeConstraint:widthFenceConstraint];</code></pre>    <h3> </h3>    <p> </p>    <p>来自:http://www.jianshu.com/p/99f901762f15</p>    <p> </p>