UIImageView with aspect filling inside a custom UITableViewCell using AutoLayout

Question

I struggled with setting UIImageView , which shows images of variable width and height using Aspect Fill . Cell height does not adapt to the new UIImageView height and the height is maintained.

Hierarchy of representations is

• UITableViewCell
  • UITableViewCell.ContentView
    • UIImageView

I tried these scripts in Xcode Auto Layout:

• set UIImageView => Height to remove at build time
• set Intrinsic Value to UIImageView on placeholder
• set an Intrinsic Value for each of the UIImageView , ContentView and UITableViewCell in placeholder

In any of these combinations, I get this view:

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

Blue lines represent cell borders (borders), and green lines represent borders (borders) of UIImageView . In this example, four cells, the 1st and 3rd - no images, and the 2nd and 4th - the same image (overflow over those that do not have them).

Answer 1

I put together a solution based on two previous answers:

• fooobar.com/questions/176588 / ... (see point 1)
• fooobar.com/questions/35030 / ... (see paragraph 2)

I wanted to keep the AspectRatio image regardless of its Height , correcting the Width according to the contents of the UIImageView , the image container.

The solution consists of:

• Adding a new AspectRatio constraint

   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) 

  when adding this restriction, xCode will complain about the new “redundant” restriction and try to break it by rendering it useless, but showing the image exactly as I want. This leads to the second solution.

  2. Lowering the priority of the new restriction to "999" seems to stop xcode from working and stop displaying a warning message about the new restriction

     aspectConstraint?.priority = 999

I do not know why xCode automatically adds UIView-Encapsulated-Layout-Height and UIView-Encapsulated-Layout-Height at the time of assembly / launch; however, I learned to respect it and live with it :)

Just leaving the solution here for those who want to check. This works on iOS 8. I tried with iOS7, but it doesn’t work the same way you need to implement tableView:heightForRowAtIndexPath calculating the cell height based on all the elements contained in it, and disable the setting:

 tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 44.0 

Answer 2

Suppose you have a UIImage with dimensions 768 x 592 of width and height respectively, the height always remains the same, where the device that it rotates, for example, in sizes higher (iPad), changes the image width to 1024, and the height remains equal.

What can you do to preserve the aspect of the image, scale it to the right size, for example, if you know that incoming images are always the same size, say, for example, 1280x740, you can set UIImage to .ScaleToFill and calculate as follows:

 (widthOfTheImage / heightOfTheImage) * heightWhereYouWanToSet = widthYouHaveToSet 

For instance:

 (1280 / 740) * 592 = 1024 

And I need to set width in my UIImage in order to maintain the aspect ratio of the image when changing its width.

I hope you understand where I'm trying to tell you.

Answer 3

When adding a constraint on an aspect, Xcode will complain about the new “redundant” constraint and try to break it. Just check the "delete during build" size limits.