具有动态高度和自动布局的 UITableViewCell - 单元格中的方形视图答案

【问题标题】：UITableViewCell with dynamic height and Auto Layout - square view in cell具有动态高度和自动布局的 UITableViewCell - 单元格中的方形视图
【发布时间】：2014-10-19 03:32:15
【问题描述】：

我正在重写我的应用程序以使用自动布局。但我坚持一个具体问题。在主屏幕上是具有动态内容的表格视图。每个单元格的顶部是方形照片（左右对齐 20 像素）。基本上是这样的：

http://cl.ly/image/0N2w2g1r0w11

在实际应用中，单元格中当然会有更多视图，但即使是这种基本布局，我也无法开始工作。主要问题是，我想根据单元格宽度指定方形视图宽度，并且这个视图必须始终是方形的。单元格高度取决于这个方形视图的高度。看起来很简单，但我尝试了许多约束配置（在 IB 中或以编程方式）并且总是失败。这是单元格高度的方法：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    [self.prototypeCell congigureCell];
    [self.prototypeCell setNeedsLayout];
    [self.prototypeCell layoutIfNeeded];
    CGSize size = [self.prototypeCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    return size.height + 1.0;
}

当方形视图宽度指定为常数时，一切正常。但这不是我想要的（谁知道新 iPhone 会有什么屏幕尺寸，所以我要做好准备：））。我在自动布局方面不是很有经验，所以我希望我只是遗漏了一些明显的东西。我会非常感谢每一个建议。

【问题讨论】：

您没有提供足够的信息，尽管您想要做的似乎是合理的。首先，您没有提供任何有关出现问题/错误的信息。其次，您没有提供任何相关的源代码（在这种情况下，我希望您显示 IB 屏幕截图或约束代码）。顺便说一句，请注意，在 iOS 8 中，UITabelViewCell 的高度可以从约束中推断出来。我的建议是一次向一个对象添加约束，直到遇到问题。随时修复它们，最终整个单元格都会正确。
那是因为我尝试了很多约束配置并且有很多不同的错误。或者只是错误的高度没有任何错误。我希望有人可以提出他自己的解决方案，而不是纠正我的任何一个。
就你的问题而言，它应该被关闭，因为它太宽泛了；有太多可能的答案并且没有足够的信息来缩小解决方案的范围。您需要向 StackOverflow 提出一个特定问题，详细说明哪些问题不起作用以及该网站有用的预期结果。

标签： ios uitableview autolayout

【解决方案1】：

嗯，简短的回答，您可以随时了解任何设备上的屏幕宽度

[[UIScreen mainScreen] bounds].size.width;

所以你可以用它来计算你的正方形，从而计算你的单元格的高度。

现在是更复杂但更通用的答案..

您可以使用自动布局来调整所有单元格的大小，只需少量魔法。第 1 步子类化 UITableViewCell（你可能已经这样做了）并添加 layoutSubviews 方法。

- (void)layoutSubviews
{
  [super layoutSubviews];
  [self.contentView layoutIfNeeded];
  // any other layout stuff needed, multiline labels etc
}

第 2 步：创建一个虚拟单元。这样做的原因是要计算单元格的高度，您需要该单元格，通常您会调用 tableVeiw:cellForRowAtIndexPath: 来执行此操作。问题是这调用 tableView:heightForRowAtIndexPath: 反过来又需要单元格，所以调用 cellForRowAtIndexPath.. 你看我要去哪里.. 所以在你的 tableViewController 中

@property (nonatomic, strong) UITableViewCell *dummyCell;

- (UITableViewCell *)dummyCell
{
  if (!_dummyCell)
  {
      // have to dequeue if you are using a storyboard cell.
      _dummyCell = [self.tableView dequeueReusableCellWithIdentifier:kCellId];
  }
  return _dummyCell;
}

第 3 步：对于您的简单方形案例并非绝对必要，但为了完整性，您可以进行更复杂的布局。在 tableViewController 中创建一个配置单元格方法。

- (void)configureCell:(UITableViewCellCell *)cell withModel:(id)modelObject
{
   // some custom setup using model data (labels images etc)
}

第 4 步：现在我们在 tableView:heightForRowAtIndexPath *注意模型是您创建的一些自定义数据对象

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
{
     // get model
     Model *modelData = self.someDataArray[indexPath.row];

     //Configure
     [self configureCell:self.dummyCell withModel:modelData];

     // layout cell using width of tableview
     self.dummyCell.bounds = CGRectMake(0.0f, 0.0f, CGRectGetWidth(tableView.bounds), 0); 
     [self.offscreenCell setNeedsLayout];
     [self.offscreenCell layoutIfNeeded];

     // calculate the size the cell need to draw its contents. 
     // this is where the magic happens!
     CGSize size = [self.dummyCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

     //return the height of your cell :)
     return size.height;
}

你有它。这可用于计算具有任何视图的单元格的高度，或假设您正确使用 layoutSubviews 和 configureCell 的动态大小标签。享受:)

【讨论】：

感谢您的回答。但我已经有了你建议的这段代码。我的约束配置有问题，我无法进行正确的高度计算。
在这种情况下，您真正需要的只是将前缘、后缘和顶部边缘设置为您想要的数量，然后使用纵横比约束将其限制为 1:1跨度>

【解决方案2】：

如果您知道边距是多少，您能否返回 tableView 的宽度减去边距的 2 倍？在我看来，这可以保证阴影区域的高度和宽度相等。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    return tableView.frame.size.width - (2.0 * MARGIN);
}

【讨论】：