Keep aspect ratio of an UIImageView in a custom UITableViewCell

Question

So what I want to do is have my custom UITableViewCell contain a UIImageView with an image inside it, and have this ImageView always keep the same aspect ratio as the image inside it, while having the same width as the cell. The height of the cell should then be the same as the height of the ImageView .

Here's the code I'm using:

My custom UITableViewCell class:

import UIKit

class ImageTableViewCell: UITableViewCell {

    var imageURL: NSURL? {
        didSet {
            fetchImage()
        }
    }

    @IBOutlet weak var activityIndicator: UIActivityIndicatorView!

    @IBOutlet weak var myImageView: UIImageView!

    func fetchImage() {
        myImageView?.image = nil

        guard let imageURL = self.imageURL else {
            return
        }
        activityIndicator?.startAnimating()
        let queue = dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0)
        dispatch_async(queue) {
            guard let imageData = NSData(contentsOfURL: imageURL) else { return }
            dispatch_async(dispatch_get_main_queue()) {
                guard imageURL == self.imageURL else { return }
                if let image = UIImage(data: imageData) {
                    self.tweetImage?.image = image
                    self.tweetImage?.sizeToFit()
                } else { self.tweetImage?.image = nil }
                self.spinner?.stopAnimating()
            }
        }
    }

    func addRatioConstraint(ratio: CGFloat) {
        let ratioConstraint = NSLayoutConstraint(item: myImageView, attribute: .Width, relatedBy: .Equal, toItem: myImageView, attribute: .Height, multiplier: ratio, constant: 0)
        ratioConstraint.priority = UILayoutPriorityDefaultHigh //important piece of code
        myImageView?.addConstraint(ratioConstraint)
    }
}

and here is the relevant code from the UITableViewController :

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.rowHeight = UITableViewAutomaticDimension
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let mention = mentionSections[indexPath.section].mentions[indexPath.row]
    switch mention {
    case .Image(let url, let ratio):
        guard let imageCell = tableView.dequeueReusableCellWithIdentifier(.Image, forIndexPath: indexPath) as? ImageTableViewCell else { fallthrough }
        imageCell.imageURL = url
        imageCell.addRatioConstraint(CGFloat(ratio))
        return imageCell
    //left out code for additional irrelevant cells
    }
}

override func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    let mention = mentionSections[indexPath.section].mentions[indexPath.row]
    switch mention {
    case .Image(_, _): return 200
    default: return 41
    }
}

and to understand what I'm doing with the dequeueReusableCellWithIdentifier function (it's just a little extension to simplify things for me):

private extension UITableView {

    enum CellIdentifier: String {
        case Image = "Image"
        case Keyword = "Keyword"
    }

    func dequeueReusableCellWithIdentifier(cellIdentifier: CellIdentifier, forIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        return self.dequeueReusableCellWithIdentifier(cellIdentifier.rawValue, forIndexPath: indexPath)
    }
} 

Sorry for so much code, but I felt like I had to include all this.

Now to the problem! The problem I'm getting is that when the view first loads everything looks great, but when I turn the device to landscape and then turn it back to portrait I lose the aspect ratio and the image gets squashed. Like this:

http://i.imgur.com/tcnBfyH.jpg

However, if I remove this line of code (in the addRatioConstraint(ratio: CGFloat) -method in the ImageTableViewCell-class):

ratioConstraint.priority = UILayoutPriorityDefaultHigh

(which means that the priority is now 1000 instead of 750 i think), everything works just as expected, except that I now get an error printed out in the console:

Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7fcfd4d3e690 UIImageView:0x7fcfd4e29a70.trailing == UITableViewCellContentView:0x7fcfd4e29900.trailingMargin>",
    "<NSLayoutConstraint:0x7fcfd4d3f5c0 UIImageView:0x7fcfd4e29a70.bottom == UITableViewCellContentView:0x7fcfd4e29900.bottomMargin>",
    "<NSLayoutConstraint:0x7fcfd4d3f610 UIImageView:0x7fcfd4e29a70.top == UITableViewCellContentView:0x7fcfd4e29900.topMargin>",
    "<NSLayoutConstraint:0x7fcfd4d3f660 UIImageView:0x7fcfd4e29a70.leading == UITableViewCellContentView:0x7fcfd4e29900.leadingMargin>",
    "<NSLayoutConstraint:0x7fcfd4d52010 UIImageView:0x7fcfd4e29a70.width == 1.34387*UIImageView:0x7fcfd4e29a70.height>",
    "<NSLayoutConstraint:0x7fcfd4e1f200 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x7fcfd4e29900(341)]>",
    "<NSLayoutConstraint:0x7fcfd4e1f250 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7fcfd4e29900(199.5)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7fcfd4d52010 UIImageView:0x7fcfd4e29a70.width == 1.34387*UIImageView:0x7fcfd4e29a70.height>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

So basically what Xcode does is it breaks my aspect constraint to try and fix some conflict. And it works. In my head that should mean that lowering the priority of that constraint should do the trick as well?

Any help would be MASSIVELY appreciated, I've been struggling with this for days now.

Answer 1

As in this answer , you're setting a variable width constraint as well as a trailing and leading constraint. This will cause a conflict.

Replace the trailing/leading constraints with a centerX constraint.

Answer 2

I'd suggest using anchors for this.

First, make sure to imageView.translatesAutoreisizingMaskIntoConstraints = false and imageView.contentMode = .scaleAspectFill

Then, set your anchors for each side as you see fit.

imageView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
imageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
imageView.bottomAnchor.constraint(self.bottomAnchor).isActive = true

You can also add ..,constant: Float) in the constraint parameters, to set a specific distance between the parent anchor point and your imageView .