Single UIImageView in UITableViewCell using Autolayout

Question

I'm trying to place a UITableViewCell containing a single UIImageView in a UITableView using dynamic cell heights with AutoLayout (i.e. tableView.rowHeight = UITableViewAutomaticDimension).

The images I will be displaying have a specific ratio (1000:667), but there are other cells besides the image cells. I've built my constraint logic for this cell to respect the Aspect Ratio of the UIImageView.

Therefore, to avoid malformation or parts of the image not being shown (clip subviews) the aspect ratio constraint should determine the cell's height depending on the device screen width.

The cell was built in a Nib file with the following constraints:

Apparently this works, since the cell's height is set accordingly on runtime depending on the device (simulator) used.

The problem is I get lots of breaking constraint error logs (below). Any ideas why iOS/the table view complaints about this constraints?

Suggestions on different approaches to displaying a UITableViewCell that respects the aspect ratio would be appreciated too.

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. 
(
    "<NSLayoutConstraint:0x7ff5097a7910 UIImageView:0x7ff5097393a0.width == 1.49925*UIImageView:0x7ff5097393a0.height>",
    "<NSLayoutConstraint:0x7ff509739550 V:|-(0)-[UIImageView:0x7ff5097393a0]   (Names: '|':UITableViewCellContentView:0x7ff5097a8e10 )>",
    "<NSLayoutConstraint:0x7ff5097aa180 UIImageView:0x7ff5097393a0.centerY == UITableViewCellContentView:0x7ff5097a8e10.centerY>",
    "<NSLayoutConstraint:0x7ff5097a8c70 H:|-(0)-[UIImageView:0x7ff5097393a0]   (Names: '|':UITableViewCellContentView:0x7ff5097a8e10 )>",
    "<NSLayoutConstraint:0x7ff5097a8cc0 H:[UIImageView:0x7ff5097393a0]-(0)-|   (Names: '|':UITableViewCellContentView:0x7ff5097a8e10 )>",
    "<NSLayoutConstraint:0x7ff5097b6440 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7ff5097a8e10(276)]>",
    "<NSLayoutConstraint:0x7ff5097b4930 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x7ff5097a8e10(414)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7ff5097a7910 UIImageView:0x7ff5097393a0.width == 1.49925*UIImageView:0x7ff5097393a0.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.

I've also tried different constraint approaches, like replacing the `Align Center Y to: Superview` for `Equal Width to: SuperView` with the same result. — Fdo, Sep 05 '16 at 13:10
If you want UIImageView height to be fixed then you top or bottom constraint only. Also if you have center alignment and height thenno need for top and bottom constraint. If you want UIImageView width to be fixed then you need leading or trailing constraint. — sschunara, Sep 05 '16 at 13:21
Just remove fixed height and width of imageView as well as center alignment. will fix this issue. — Aadil Ali, Sep 05 '16 at 13:58
@Fdo Check this answer, this should help you get rid of troubles http://stackoverflow.com/questions/11664115/unable-to-simultaneously-satisfy-constraints-will-attempt-to-recover-by-breakin/19669288#19669288 You used many ambiguous constraints, you need just those right ones. — pedrouan, Sep 05 '16 at 18:15

Aakash Brahmbhatt · Accepted Answer · 2016-09-06T07:40:46.717

3

This one cause b'cos u gave unnecessary autolayouts (height, width and center y) conflits.

eg. you gave height then top and bottom, height is fixed still you gave top and bottom alignment... that's unnecessary...

you can try this suggestions.

1)center y + Trailing + Leading + Height. 2)Top + Bottom + Trailing + Leading. 3)height + width + center y + Leading and many more

I hope you understand...

edited Sep 06 '16 at 07:40

answered Sep 05 '16 at 13:58

Aakash Brahmbhatt

348
5
12

score 1 · Answer 2 · edited Sep 05 '16 at 14:08

Fdo, the logs that you have posted clearly explains what is going wrong in there :)

What is the issue?

You have aspect ratio being set on imageView. As a result imageView will try to resize itself on assigning the image, while maintaining the aspect ratio that you have specified. So ImageView's height and width can/may vary depending on the image that you are assigning.
You have applied trailing and leading space constraint from imageView to the cell's contentView. That means no matter what happens you want the image view to cover the entire width of the cell. You are conflicting with your own constraint. Just above you said imageView is free to change its frame now you are saying it should cover whole width of cell how is that even possible buddy?
Similarly, you applied top and bottom constraint on image view to the cell's contentView. Now why is that not breaking then? Simple because cells height is dynamically being calculated based on the image you pass to imageView. So obviously the imageView's size after resizing will be equal to the height of cell. So no issue with cell height.

How to solve ?

Simple remove trailing and leading space constraint on imageView to cell's contentView and instead apply horizontally centre constraint on imageView that will give imageViews x position as well and will not mess with the width of imageView. Hence no constraints breaks and everything will work like charm

Extra piece of advice

When you have specified that imageView will have top and bottom constraint to cells content view which means that imageView height will always be equal to the cell's height, dude does it seriously make any sense to say that imageView will be at vertically centre of cell? Because anyway your imageView will cover the whole cell top to bottom.Any way it won't break anything but passing constraints more than what is actually needed is not the best thing to do as it might result in other consequences in future.

Hope it helps.

score 0 · Answer 3 · answered Sep 05 '16 at 13:22

For autolayouting any view, only thing required to be satisfied is all views should get width, height,and x and y positions.

Now from your question, it looks that out of 6 constraints that you provided, only last 4 constaints are self sufficient to complete the requirements, so first 2 constraints are not required. Just remove them. All things will be fine.

The warning messages you are seeing is due to more than 2 constraints that you provided confuses system to take which out of them.

Single UIImageView in UITableViewCell using Autolayout

3 Answers3