带有Aspect的UIImageView使用AutoLayout填充自定义UITableViewCell

时间:2015-03-15 16:10:50

标签: ios uitableview swift autolayout

我一直在努力使用UIImageView来显示Aspect Fill的可变宽度和高度的图像。单元格高度不适应UIImageView的新高度并保持其高度。

视图的层次结构是这个

  • 的UITableViewCell
    • UITableViewCell.ContentView
      • 的UIImageView

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

  • UIImageView => Height设置为remove at build time
  • Intrinsic Value的{​​{1}}设置为UIImageView
  • 为每个placeholderIntrinsic ValueUIImageView设置ContentViewUITableViewCell

使用这些组合中的任何一种,我都会得到这样的观点:

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

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

3 个答案:

答案 0 :(得分:10)

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

我希望保留图片的AspectRatio,而不管其Height,同时根据图片容器Width修复UIImageView

解决方案包括:

  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会抱怨新的“冗余”约束并试图破坏它,使其无用,但显示的图像完全符合我的要求。这引出了我的第二个解决方案

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

      aspectConstraint?.priority = 999

  2. 不确定为什么xCode会在构建/运行时自动添加UIView-Encapsulated-Layout-HeightUIView-Encapsulated-Layout-Height;然而,我学会了如何尊重并与之共存:)

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

    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = 44.0
    

答案 1 :(得分:0)

假设您的UIImage尺寸分别为768 x 592 widthheight,则高度始终保持等于,例如,它在上面的尺寸(iPad),图像的width更改为1024,height保持不变。

你可以做些什么来维护图像的方面是按照你想要的尺寸缩放它,例如,如果你知道图像总是具有相同的尺寸,我们说例如1280x740,你可以设置{{ 1}}到UIImage并按以下方式计算:

.ScaleToFill

例如:

(widthOfTheImage / heightOfTheImage) * heightWhereYouWanToSet = widthYouHaveToSet

(1280 / 740) * 592 = 1024 我必须在width设置,以便在图像宽度改变时保持图像的比例。

我希望你能理解我试图对你说的话。

答案 2 :(得分:-1)

添加方面约束时,Xcode会抱怨新的“冗余”约束并试图破坏它。只需检查方面约束的“在构建时删除”。

enter image description here