Autolayout constraints on custom UITableViewCell failing at runtime

Question

My app uses a table view controller to display a custom prototype table view cell containing image views and labels embedded in stack views. Unfortunately, at run time, the primary imageView (on the left) seems to abandon its constraints and display the image in an unanticipated manner.

While I have successfully implemented essentially the same configuration of components embedded in stack views in a view on the prior view controller (top), this same configuration doesn't seem to work in the custom table view cell (bottom).

This is how it appears in XCode:

This is how it appears in simulator:

In first diagnosing the issue, my debugger suggested I set up a symbolic breakpoint by adding a UIViewAlertForUnsatisfiableConstraint, since it was "attempting to recover by breaking a constraint", as described here: How to trap on UIViewAlertForUnsatisfiableConstraints?

That error disappeared after a few attempts at fixing the problem, and was replaced by what appears to be an Apple bug:

Is there a way around this latter bug or am I doing something to trigger it that I can fix?

FYI: I am mostly using IB to lay out constraints since the views are somewhat dense.

@D.Desai yes... that's the default setting. It behaves in the same manner when I choose that as the content type, unfortunately. What else might it be? — Pigpocket, Feb 05 '18 at 06:11

McDonal_11 · Accepted Answer · 2018-02-06T08:25:32.290

1

You are using UITableViewCell's default UIImageView. You have to create Outlet connection for ImageView which is in UITableViewCell

Your Code:

class TableViewCell: UITableViewCell {
     @IBOutlet weak var thumbImgVw: UIImageView!
}


if let url = URL(string: location.imageUrl) {
    if let imageData = try? Data(contentsOf: url) {

         let image = UIImage(data: imageData)
         cell.thumbImgVw?.layer.cornerRadius = 10
         cell.thumbImgVw?.clipsToBounds = true
         cell.thumbImgVw?.image = image
    }
}

edited Feb 06 '18 at 08:25

answered Feb 05 '18 at 06:27

McDonal_11

3,935
6
24
55

I have tried this, with the exception of deleting my labels. I actually had the imageView's height and width constrained, rather than constraining to left, right, top, bottom, etc, as you suggest. Both approaches yield the same result, however. – Pigpocket Feb 05 '18 at 06:32
remove ur stack view and add UIImageView alone. then give following constraints. try to run. U ll get good result. Then, U may add UIStackView. – McDonal_11 Feb 05 '18 at 06:34
That didn't seem to work. Yes, the stackview doesn't seem like it would be necessary, but in the prior view controller it was much easier to create the proper margins and manage it's behavior relative to the stackview on the right containing labels and another stackview with embedded uiimageviews. – Pigpocket Feb 05 '18 at 06:42
Can u tell, what constraints u gave to UIStackView [thumbnail] and Spacing and UIImageView [Thumbnail] constraints ? – McDonal_11 Feb 05 '18 at 06:45
Horizontal StackView [topMost], top, left, bottom, right .. ?? Am I right ?? – McDonal_11 Feb 05 '18 at 06:47
Give, **Inner StackView, Left [thumbNail StackView], give Width as 90** [for eg]. Then, For, Horizontal StackView [topMost], give **Fill** for both Distribution and alignment, Spacing as 5. – McDonal_11 Feb 05 '18 at 06:50
The Horizontal StackView, interestingly enough, was missing a right hand (trailing space to superview) constraint. However, constraining it to the superview has no effect. The vertical stack view containing the image view simply has a fixed layout margin of 8 pixels on all sides. The imageViews height and width are constrained at 80 pixels each – Pigpocket Feb 05 '18 at 06:51
The Horizontal StackView Distribution and Alignment are both set to Fill. Spacing is -8, because I want the labels to begin 8 pixels from the image--this essentially overrides the fixed margins that help float the stackviews from the edges of the tableviewcell borders – Pigpocket Feb 05 '18 at 06:53
Here, I gave, H_StkVw as, 5,5,5,5 and spacing as 5, fill for Distrib and alignment. I have added, two stckView in Vertical Axis. I have added, One to imageview with only one constraints as Width as 90, then, another StkVw, Fill equally in Distribution and Axis vertical, I have added 3 UIView, Vertically.. – McDonal_11 Feb 05 '18 at 07:06
Give ur mail, I will send screenshot. – McDonal_11 Feb 05 '18 at 07:10
Check, Updated answer. – McDonal_11 Feb 05 '18 at 07:14
Hmm. I appreciate your suggestions, but that still isn't working in my project. It doesn't seem that constraining the horizontalStackView has any impact either? My email is trsidenfaden@yahoo.com. Thanks for your help so far! – Pigpocket Feb 05 '18 at 07:25
Just give constraint for h_StkVw as 5,5,5,5 inside UITableViewCell – McDonal_11 Feb 05 '18 at 08:29
That did not work. When I set those constraints, it breaks most of the others. Once I fix them all, I still have the same problem. – Pigpocket Feb 05 '18 at 22:57
That was it! When I tried to create an outlet for that imageView originally I called it, creatively, "imageView". XCode wouldn't let me do that because it apparently conflicted with the TableViewCell's built-in imageView. I thought I could just use that, but I needed to create a separate dedicated outlet for it, like you said. – Pigpocket Feb 06 '18 at 16:14
ya go ahead. Any doubt. Let me know. – McDonal_11 Feb 06 '18 at 16:15

Autolayout constraints on custom UITableViewCell failing at runtime

1 Answers1