UIImageView with Aspect Fill inside custom UITableViewCell using AutoLayout
I cobbled together a solution based on two previous answers:
- https://stackoverflow.com/a/26056737/3163338 (See point 1)
- https://stackoverflow.com/a/25795758/3163338 (See point 2)
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.
The solution comprises of :
-
Adding a new
AspectRatio
constraintlet 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 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
-
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
-
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 :)
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
Related videos on Youtube
Comments
-
Mickey Mouse about 1 year
I've been struggling with fitting an
UIImageView
which shows images of variable widths and heights withAspect Fill
. The cell height is not adapting to the new height of theUIImageView
and persist it's height.The hierarchy of the views is this
- UITableViewCell
- UITableViewCell.ContentView
- UIImageView
- UITableViewCell.ContentView
I tried these scenarios in XCode Auto Layout :
- set the
UIImageView => Height
toremove at build time
- set the
Intrinsic Value
of theUIImageView
toplaceholder
- set the
Intrinsic Value
for each of theUIImageView
,ContentView
andUITableViewCell
toplaceholder
With any of these combinations I get this view:
http://i.stack.imgur.com/Cw7hS.png
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). - UITableViewCell
-
Mickey Mouse over 8 yearsI think what you are trying to say is how to fit the
UIImage
within theUIImageView
, right? The issue I have is really not with theUIImageView
but really with the encompassing cell. I only have a portrait mode for iPhone and the width is always fixed. So the height of the cell is what remains fixed despite the changed height of theUIImageView
when I fit the image in it. Not sure if we are on the same page here. -
Jonny Vu about 8 yearsIt is no need to do this. Too complicated. Just use [imageView setClipsToBounds: YES]. Refer to: stackoverflow.com/questions/14609132/…
-
Mickey Mouse about 8 yearsI don't think you got the question. The question was about letting the UITableViewCell height adapts to the height of the image within it, which is different than fitting the image inside the UIView and clipping its boundaries.
-
KChen over 7 yearsTo be simple, just add a constraint of the height of the image (which is easy to be done in storyboard) and calculate it when setting image. The priority also should be 999.