ios - 具有动态高度和自动布局的 UITableViewCell - 单元格中的方形 View

Question

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

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

在真正的应用程序中，单元格中当然会有更多 View ，但即使是这种基本布局我也无法工作。主要问题是，我想根据单元格宽度指定正方形 View 宽度，并且此 View 必须始终为正方形。单元格高度取决于此方形 View 的高度。看起来很简单，但我尝试了很多约束配置(在 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;
}

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

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

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