CODEWITHSUNDEEP
objective-cxcodeinterface-builderconstraints
Vincent
Vincent

Reputation: 4409

UITableViewCell Image full-size with right aspect ratio

I have created a tableviewcell. In it is a Image. I want to display the image over the full width of the column. For that I have added constraints all set to zero for: - Leading space - Trailing space - Top space - Bottom space I have also defined an Aspect Ratio constraint 8:6 to get the correct aspect ratio for the image.

In Interface Builder I get the "red arrow" error that "Need constraints for: X position of width".

When I run the code (it is compilable) it is displayed nicely. However I get runtime constraints warnings:

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:0x60800008cfd0 UILayoutGuide:0x6080001a5080'UIViewSafeAreaLayoutGuide'.bottom == UIImageView:0x7fc9fa90fa10.bottom + 8   (active)>",
    "<NSLayoutConstraint:0x60800008d2a0 UIImageView:0x7fc9fa90fa10.centerY == UILayoutGuide:0x6080001a5080'UIViewSafeAreaLayoutGuide'.centerY   (active)>",
    "<NSLayoutConstraint:0x60800008d2f0 UIImageView:0x7fc9fa90fa10.top == UILayoutGuide:0x6080001a5080'UIViewSafeAreaLayoutGuide'.top + 7   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60800008d2a0 UIImageView:0x7fc9fa90fa10.centerY == UILayoutGuide:0x6080001a5080'UIViewSafeAreaLayoutGuide'.centerY   (active)>

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 do not see what I'm doing wrong, can someone point me in the right direction?

Upvotes: 0

Views: 29

Answers (1)

LGP
LGP

Reputation: 4333

The problem is that whenever your cell size does not have a ratio of 8:6 your constraints will conflict.

There are several ways to fix this, but I think the easiest is to replace the leading and trailing constraints with a center horizontally constraint. The image will now be centered, its height is set by the cell's height, and its width will be set by the aspect constraint. The only thing to watch out for is if the cell becomes narrower than 8:6, in which case the image will extend outside the left/right edges.

Upvotes: 0

Related Questions