UITableViewCell调整大小时重新排列单元格子视图

Question

我有一个UITableViewCell使用的故事板实现，如下所示：

以下是没有图像的单元格应该是什么样的：

我一直在摆弄这些限制，并试图弄明白这一点，但没有运气。我对约束以及如何以编程方式添加它们有很好的理解，但是对于这个特定的问题我没有运气，并且觉得我只是在没有逻辑思维过程的情况下将布局约束添加到单元格中。该单元表示新闻馈送帖子，其可能在顶部的主图像视图中具有或不具有图像，并且应该表现如下。如果单元格中没有图像，则底部条形图具有相同和注释计数，向上移动以与单元格的顶部对齐。我通过设置一个约束来实现此行为，该约束使较小的图像视图，帖子标题，发布时间和帖子内容保持距离单元格底部一定距离。此方法有效，并且在heightForRowAtIndexPath方法中调整单元格大小时，子视图会相应地移动。当帖子内容中的文本大于单行时，问题就出现了。单元格的高度正确调整，但文本视图的顶部保持在同一位置并向下增长并溢出到下一个单元格中。当我放置约束以将四个子视图与单元格的顶部对齐时，当没有图像并且帖子内容大于单行时，我会遇到问题。在这种情况下，单元格调整为小于其原始大小，子视图保持在约束指定的距离。较小的图像，帖子标题，时间和内容被剪裁，不显示。对于许多不同的情况，这是一个奇怪的问题。我已经在这工作了将近两天，并且可以真正使用别人对如何解决这个问题的想法。我希望这不会太混乱，谢谢你的帮助！

Answer 1

我有一种解决方法，但我确信还有很多其他方法。我给两个图像视图一个固定的高度约束。小图像视图和顶部标签（后标题）具有固定的高度到单元格的顶部 - 这两个以及大图像视图的高度约束都具有IBOutlet，因此可以在代码中更改它们。底部标签（Post Content）的行数设置为0，并且IBOutlet的高度约束（所有标签都有标准的21点高度开始）。在代码中，我检查每个indexPath是否存在图像，并相应地更改约束。

- (void)viewDidLoad {
    UIImage *image1 = [UIImage imageNamed:@"House.tiff"];
    [super viewDidLoad];
    self.theData = @[@{@"pic":image1, @"post":@"short post"},@{@"post":@"short post"},@{@"pic":image1, @"post":@"Long long post with some extra stuff, and even some more"},@{@"post":@"Long long post with some extra stuff, and even some more"}];
    [self.tableView reloadData];
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.theData.count;
}

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat ivHeight = (self.theData[indexPath.row][@"pic"])? 215 : 0; // 215 is the fixed height of the large image view
    CGSize labelSize = [self.theData[indexPath.row][@"post"] sizeWithFont:[UIFont systemFontOfSize:17] constrainedToSize:CGSizeMake(152, CGFLOAT_MAX)];
    return 140 + ivHeight + labelSize.height; // the 140 was determined empirically to get the right spacing between the 3 labels and the bottom bar
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    RDCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.label.text = self.theData[indexPath.row][@"post"];
    cell.iv.image = self.theData[indexPath.row][@"pic"];
    if(self.theData[indexPath.row][@"pic"] == nil){
        cell.heightCon.constant = 0; // heightCon is the outlet to the large image view's height constraint
        cell.ivTopCon.constant = 8; // ivTopCon is the outlet to the small image view's spacing to the top of the cell
        cell.labelTopCon.constant = 8; // labelTopCon is the outlet to thetop label's spacing to the top of the cell
    }else{
        cell.heightCon.constant = 215; // this number and the following 2 are taken from the values in IB
        cell.ivTopCon.constant = 185;
        cell.labelTopCon.constant = 233;
    }
    CGSize labelSize = [self.theData[indexPath.row][@"post"] sizeWithFont:[UIFont systemFontOfSize:17] constrainedToSize:CGSizeMake(152, CGFLOAT_MAX)];
    cell.labelHeightCon.constant = labelSize.height;
    return cell;
}

Answer 2

嘿@rdelmar感谢您的解决方案！最后，我最终只是在故事板文件中设计了两个不同的单元格，它们具有不同的重用标识符，但具有相同的子类。然后，我检查了cellForRowAtIndexPath方法，如果单元格是否有内容，并分配了正确的标识符。如果这是不正确的做法，或将导致问题，请在评论中告诉我。