带有Aspect的UIImageView使用AutoLayout填充自定义UITableViewCell [英] UIImageView with Aspect Fill inside custom UITableViewCell using AutoLayout

问题描述

我一直在努力安装一个 UIImageView ，它显示了可变宽度和高度的图像，其中 Aspect Fill 。单元格高度不适应 UIImageView 的新高度并保持其高度。

I've been struggling with fitting an UIImageView which shows images of variable widths and heights with Aspect Fill. The cell height is not adapting to the new height of the UIImageView and persist it's height.

这是

• UITableViewCell
  
  
  
  • UITableViewCell.ContentView
    
    
    
    • UIImageView
    
    

    我在XCode自动布局中尝试了这些场景：

    I tried these scenarios in XCode Auto Layout :

    
    
    • 设置 UIImageView =>高度到在构建时删除
    
    
    • 设置内在价值 UIImageView 到占位符
    
    
    • 设置<$每个 UIImageView ， ContentView 和<$ c的c $ c>内在价值 $ c> UITableViewCell 到占位符
    
    
    • set the UIImageView => Height to remove at build time
    • set the Intrinsic Value of the UIImageView to placeholder
    • set the Intrinsic Value for each of the UIImageView, ContentView and UITableViewCell to placeholder

    随着我得到这个观点的任何一种组合：

    With any of these combinations I get this view:

    http：// i.stack.imgur.com/Cw7hS.png

    蓝线代表单元格边框（边界），绿色代表 UIImageView 边框（边界）。在这个例子中有四个单元格，第一个和第三个单元格没有图像，第二个和第四个单元格具有相同的图像（溢出没有图像的图像）。

    The blue lines represent the cell borders (boundaries) and the green ones represent the UIImageView border (boundaries). There are four cells in this example, the 1st and the 3rd ones have no images and the 2nd and the 4th ones have the same image (overflowing over the ones which have none).

    推荐答案

    我根据之前的两个答案拼凑了一个解决方案：

    I cobbled together a solution based on two previous answers:

    
    
    • https://stackoverflow.com/a/26056737/3163338 （参见第1点）
    
    
    • https://stackoverflow.com/a/25795758/3163338 （参见第2点）
    
    
    • https://stackoverflow.com/a/26056737/3163338 (See point 1)
    • https://stackoverflow.com/a/25795758/3163338 (See point 2)

    我想保留图像的 AspectRatio ，无论根据 UIImageView 宽度时，其高度 c>，图像的容器。

    I wanted to keep the AspectRatio of the image regardless of its Height while fixing up the Width according to that of the UIImageView, the container of the image.

    解决方案包括：

    
    

    1. 添加新的 AspectRatio 约束

    let image = UIImage(ContentFromFile: "path/to/image")
    let aspect = image.size.width / image.size.height
    
    aspectConstraint = NSLayoutConstraint(item: cardMedia, attribute:  NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: cardMedia, attribute: NSLayoutAttribute.Height, multiplier: aspect, constant: 0.0)
    

    添加此约束时，xCode会抱怨新的冗余约束并试图破坏它，使其无用，但显示的图像与我想要的完全一样。这导致我第二个解决方案

    when adding this constraint, xCode will complain about the new "redundant" constraint and attempt to break it, rendering it useless, yet displaying the image exactly like I want. This leads me to the second solution

    
    

    1. 将新约束的优先级降低到'999'似乎阻止xcode打破它，它停止显示有关新约束的警告消息

    1. Lowering the priority of the new constrain to '999' seems to stop xcode from breaking it, and it stopped showing warning message about the new constraint

    aspectConstraint？.priority = 999

  
  

  不确定为什么xCode会自动添加 UIView-Encapsulated-Layout-Height 和 UIView-Encapsulated-Layout-Height 在构建/运行时;然而，我学会了如何尊重并与之共存：）

  Not sure why xCode automatically adds UIView-Encapsulated-Layout-Height and UIView-Encapsulated-Layout-Height at build/run time; however, I learned how to respect that and live with it :)

  只需将解决方案留在这里供任何人查看。这适用于iOS 8.我尝试使用iOS7，但它不能像你需要实现 tableView：heightForRowAtIndexPath 计算基于所有的单元格的高度其中包含的项目并禁用设置：

  Just leaving the solution here for anyone to check. This is working on iOS 8. I tried with iOS7 but it doesn't work the same as you need to implement tableView:heightForRowAtIndexPath calculating the height of the cell based on all the items contained within it and disable setting up:

  tableView.rowHeight = UITableViewAutomaticDimension
  tableView.estimatedRowHeight = 44.0
  

  这篇关于带有Aspect的UIImageView使用AutoLayout填充自定义UITableViewCell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！