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

我有一个

UITableViewCell

，它是使用故事板实现的，看起来像：

以下是没有图像时单元格的外观：

---

我一直在摆弄约束条件，拼命想弄明白这一点，但运气不好。我对约束以及如何以编程方式添加约束有很好的理解，但在这个特定问题上没有运气，我觉得我只是随意地向单元格添加布局约束，而没有逻辑思维过程。该单元格表示一个新闻提要文章，该文章在顶部的主图像视图中可能有图像，也可能没有图像，其行为应如下所示。如果单元格中没有图像，则底部带有“like”和“comment counts”的栏会上移以与单元格顶部对齐。我通过设置一个约束，使较小的图像视图、帖子标题、帖子时间和帖子内容与单元格底部保持一定距离，从而实现了这种行为。这种方法有效，当在

heightforrowatinexpath

方法中调整单元格大小时，子视图会相应地移动。当文章内容中的文本大于一行时，问题就出现了。单元格的高度可以正确调整，但文本视图的顶部保持在同一位置，向下增长并溢出到下一个单元格中。当我放置约束以将四个子视图与单元格顶部对齐时，当没有图像且帖子内容大于一行时，我会遇到问题。在这种情况下，单元大小将调整为小于其原始大小，并且子视图将保持约束指定的距离。较小的图像、文章标题、时间和内容被剪裁，不显示。这是一个如此奇怪的问题，有这么多不同的情况。我已经在这方面工作了将近两天，我真的可以利用别人的想法来解决这个问题。我希望这不会太混乱，谢谢你的帮助

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

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

---

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

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

---

嘿@rdelmar谢谢你的解决方案！最后，我在故事板文件中设计了两个不同的单元，它们具有不同的重用标识符，但具有相同的子类。然后，我检查了

cellforrowatinexpath

方法中的单元格是否有内容，并分配了正确的标识符。如果这是不正确的做法，或者会导致问题，请不要在评论中提及。

Hey@rdelmar感谢您的解决方案！最后，我在故事板文件中设计了两个不同的单元，它们具有不同的重用标识符，但具有相同的子类。然后，我检查了

cellforrowatinexpath

方法中的单元格是否有内容，并分配了正确的标识符。如果这是不正确的方法，或者会导致问题，请在评论中注明“否”。

小正方形图像视图应该在哪里，然后移动？它应该与较大的图像视图重叠吗？它是否总是有图像，或者有时也是空白的？另外，当大图像视图中没有图像时，您希望底部栏位于其他内容的上方？在单元格的顶部？我编辑了帖子，并添加了一张没有图片的单元格的图片@rdelmarA还有几个问题。当您有大图像时，顶部的小图像视图是否部分重叠？什么是文章标题、文章时间和文章内容——这是3个标签，还是标签和文本视图的混合体？那个小正方形图像视图应该在哪里，然后移动？它应该与较大的图像视图重叠吗？它是否总是有图像，或者有时也是空白的？另外，当大图像视图中没有图像时，您希望底部栏位于其他内容的上方？在单元格的顶部？我编辑了帖子，并添加了一张没有图片的单元格的图片@rdelmarA还有几个问题。当您有大图像时，顶部的小图像视图是否部分重叠？什么是文章标题、文章时间和文章内容——这是3个标签，还是标签和文本视图的混合？