自动布局：获取UIImageView高度以正确计算单元格高度

Question

到目前为止，我一直在使用应自动调整大小的单元格内的文本标签。我通常把约束，所有的边缘（内容视图或邻居），并添加以下行到我的viewDidLoad()：

// 190.0 is the actual height of my custom cell (see next image) in the storyboard containing a label and a randomly sized UIImageView 
tableView.estimatedRowHeight = 190.0 
tableView.rowHeight = UITableViewAutomaticDimension 

现在，试图与图片，包括什么时候，我遇到的几个问题。在一些研究中，我发现了几种用Objective-C编写的方法，但我不确定哪些方法真正解决了我的中心问题，但我仍然在使用复杂的Objective-C代码。所以继续：我的最终目标是获得一个正确大小（正确高度）的单元格，每个单元格包含一个标题和一个适合屏幕宽度的图像。这些图像可以具有不同的纵横比和不同的尺寸。为了简化一些挑战，我准备了一个新的，更简单的项目：

1. 首先，我创建了一个UITableViewController和CustomCell类有两个IBOutlets title: String和postedImage: UIImage（UIImage的随机情节板中的大小）配置细胞。我定义了边和彼此的约束。

当建，两个单元获得含有相同的图像配置，但它们是取出从具有不同的尺寸和分辨率的两个单独的文件（900×171对比半尺寸450 x 86）。 UIImage视图模式设置为“Aspect Fit”，但由于我无法以我想要的方式运行，所以我不确定这是否是正确的设置。尽管我期望单元格高度可以根据重新定标的UIImage计算出来，包括我设置的约束条件，但它似乎基于图像文件的初始高度（如171和86）。它实际上并不适应实际的UIImage视图高度（大概70我猜）。

在我的一个较为复杂的项目，我想不同的图像自动适应屏幕的宽度，无论他们是否是纵向还是横向 - 并且如果它们的宽度小于屏幕的宽度，他们应该被放大。就像在上面的项目中一样，每个单元格高度都应该符合故事板中约束所定义的单个内容。无论如何，它始于上面讨论的问题：我如何让这两个单元具有相同的正确高度，拥抱故事板中定义的内容？

非常感谢任何帮助！

Answer 1

所以我认为潜在的问题是一种鸡和鸡蛋的问题。

为了“方面匹配”的图像提供给UIImageView系统需要一个大小为视图，但我们想给定的已知宽度为方面拟合图像之后确定视图的高度风景。

解决方法是自己计算图像的宽高比，并在设置图像时将其设置为UIImageView的约束条件。这样自动布局系统有足够的信息来确定视图的大小（宽度和宽高比）。

所以我改变了你的自定义单元格类：

class CustomCell: UITableViewCell { 

    @IBOutlet weak var imageTitle: UILabel! 

    @IBOutlet weak var postedImageView: UIImageView! 

    internal var aspectConstraint : NSLayoutConstraint? { 
     didSet { 
      if oldValue != nil { 
       postedImageView.removeConstraint(oldValue!) 
      } 
      if aspectConstraint != nil { 
       postedImageView.addConstraint(aspectConstraint!) 
      } 
     } 
    } 

    override func prepareForReuse() { 
     super.prepareForReuse() 
     aspectConstraint = nil 
    } 

    func setPostedImage(image : UIImage) { 

     let aspect = image.size.width/image.size.height 

     aspectConstraint = NSLayoutConstraint(item: postedImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: postedImageView, attribute: NSLayoutAttribute.Height, multiplier: aspect, constant: 0.0) 

     postedImageView.image = image 
    } 

} 

然后在委托做到这一点，而不是图像直接设置的：

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 
     let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as CustomCell 

     cell.imageTitle.text = titles[indexPath.row] 

     let image = images[titles[indexPath.row]]! 
     cell.setPostedImage(image) 

     return cell 
} 

，你会得到：

希望这会有所帮助！

Answer 2

迈克波拉德有一个很好的解决方案，但我在设备旋转时遇到问题。随着轮换，我得到Autolayout的投诉：

大概至少在下面的列表中的一个约束是你不想要的。试试这个：（1）看看每个约束，并试图找出你不期望的; （2）找到添加不需要的约束或约束并修复它的代码。 （注意：如果您看到您不明白的NSAutoresizingMaskLayoutConstraints，请参阅UIView属性translatesAutoresizingMaskIntoConstraints的文档） 。 。 。

将尝试打破约束 NSLayoutConstraint恢复：0x82ccc110的UIImageView：0x82ccbed0.width ==的UIImageView：0x82ccbed0.height

有趣的是，布局是旋转后的罚款。我想知道，如果这是一个抱怨，当单元格框架被更改，但然后Autolayout踢，并纠正一切。

Answer 3

我翻译了Pollard的解决方案objc版本就像这样。
此外，我收到了“无法同时满足约束条件”等警告。我的解决方案设置垂直空间约束的优先级为999，而不是1000

@interface PostImageViewCell() 

@property (nonatomic, strong) NSLayoutConstraint *aspectContraint; 
@end 

@implementation PostImageViewCell 

- (void) setAspectContraint:(NSLayoutConstraint *)aspectContraint { 

    if (_aspectContraint != nil) { 
     [self.postImage removeConstraint:_aspectContraint]; 
    } 
    if (aspectContraint != nil) { 
     [self.postImage addConstraint:aspectContraint]; 
    } 
} 

- (void) prepareForReuse { 
    [super prepareForReuse]; 
    self.aspectContraint = nil; 
} 

- (void)setPicture:(UIImage *)image { 

    CGFloat aspect = image.size.width/image.size.height; 
    self.aspectContraint = [NSLayoutConstraint constraintWithItem:self.postImage 
                 attribute:NSLayoutAttributeWidth 
                 relatedBy:NSLayoutRelationEqual 
                  toItem:self.postImage 
                 attribute:NSLayoutAttributeHeight 
                 multiplier:aspect 
                 constant:0.0]; 
    [self.postImage setImage:image]; 
} 
@end 

Answer 4

而不必定制0​​方法，它更方便updateConstraints更新方面的约束。这样的话，你可以直接改变的UIImageView的图像，无需额外的辅助方法：

static NSLayoutConstraint *constraintWithMultiplier(NSLayoutConstraint *constrain, CGFloat multiplier) { 
    return [NSLayoutConstraint constraintWithItem:constrain.firstItem 
             attribute:constrain.firstAttribute 
             relatedBy:constrain.relation 
              toItem:constrain.secondItem 
             attribute:constrain.secondAttribute 
             multiplier:multiplier 
             constant:constrain.constant]; 
} 

-(void)viewDidLoad 
{ 
    UIView *contentView = self.contentView; 

    _imageView = [[UIImageView alloc] init]; 
    _imageView.translatesAutoresizingMaskIntoConstraints = NO; 
    _imageView.contentMode = UIViewContentModeScaleAspectFit; 
    [contentView addSubview:_imageView]; 

    _imageAspectConstraint = [_imageView.heightAnchor constraintEqualToAnchor:_imageView.widthAnchor multiplier:1.0f]; 
    NSArray <NSLayoutConstraint *> *constraints = @[ 
      [_imageView.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor constant:0], 
      [_imageView.trailingAnchor constraintEqualToAnchor:contentView.trailingAnchor constant:0], 
      [_imageView.topAnchor constraintEqualToAnchor:contentView.topAnchor constant:0], 
      [_imageView.bottomAnchor constraintEqualToAnchor:contentView.bottomAnchor constant:0], 
    ]; 
    [NSLayoutConstraint activateConstraints:constraints]; 
} 

-(void)updateConstraints 
{ 
    const CGSize size = _imageView.image.size; 
    const CGFloat multiplier = size.width/size.height; 
    _imageAspectConstraint.active = NO; 
    _imageAspectConstraint = constraintWithMultiplier(_imageAspectConstraint, multiplier); 
    _imageAspectConstraint.active = YES; 
    [super updateConstraints]; 
} 

Answer 5

工作在斯威夫特3 +的iOS 8

使用自动版式和可变大小的UITableViewCell对象 -

对于ImageView的，设置顶部，底部，顶部和尾部空间限制为0.

要添加到viewDidLoad的代码（）

tableView.rowHeight = UITableViewAutomaticDimension 
tableView.estimatedRowHeight = 200 

定义的UITableViewDelegate的heightForRowAtIndexPath（）

extension ViewController: UITableViewDelegate { 

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { 
     let image = UIImage(named: list_images[indexPath.row]) 
     let aspect = (image?.size.width)!/(image?.size.height)! 
     let cellHeight = (tableView.frame.width/aspect) + <<Height of image title label>> 
     return cellHeight 
    } 
}