UICollection View Auto-layout Constraints Are Breaking

2
votes

I have a ViewController with a UICollectionView in it. In the storyboard I have laid out the cell.

Screen shot of layout

To the cell I added:

  • An image view
  • The image view is nested inside a container
  • Then I have a label under the container

I then added auto-layout constraints in the storyboard:

Screen shot of my constraints

This wasn't working when I ran the simulator. I think it didn't work because I am using a custom cell. So I fixed it and got it to run properly by setting up IBOutlets for all the constraints and resetting their values in the cellForItemAtIndexPath method:

    //Layout cell
    cell.img_Height.constant = 50
    cell.img_Width.constant = 50
    cell.leading_Img_to_Container.constant = 10
    cell.trailing_Img_to_Container.constant = 10
    cell.top_Img_to_Container.constant = 10
    cell.bottom_Img_to_Container.constant = 10

    cell.top_Container_to_Cell.constant = 10
    cell.bottom_Container_to_Label.constant = 0
    cell.horizontalCenter_Container_to_Cell.constant = 0

    cell.bottom_Label_to_Cell.constant = 0 //Flexible constraint: In storyboard this relation is 'Greater than or equal to'
    cell.horizontalCenter_Container_to_Label.constant = 0

When I run the app, the collection view looks good. However, when I check the console, it says it is breaking constraints:

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) ( "", "", "", "", "", "= UILabel:0x7fc0026d2580'Grocery List'.bottom>", "" ) Will attempt to recover by breaking constraint NSLayoutConstraint:0x7fc0026ba9d0 V:[UIImageView:0x7fc0026d2440(50)]>

I've been tweaking the constraints and trying to debug this but I can't figure out what I'm doing wrong. How do I set the layout properly?

2
iosswiftautolayoutuicollectionviewuicollectionviewlayout

2 Answers

1
votes

I was able to resolve my issue by eliminating the container I had my image in, which simplified the layout and so also simplified the needed constraints.

Since the cell is a predetermined size, my new approach just centers things and makes sure their y position is clear in reference to one another.

At this point, my constraints:

  • Dictate the distance to the cell edges using greater than 0 ( >=0 )and have a low priority given that effect should happen anyway since they are centered.
  • My highest priority constraints make sure there is the correct amount of space between the views within the cell.
0
votes
cell.img_Height.constant = 50
cell.img_Width.constant = 50
cell.leading_Img_to_Container.constant = 10
cell.trailing_Img_to_Container.constant = 10
cell.top_Img_to_Container.constant = 10
cell.bottom_Img_to_Container.constant = 10

You have add too much constrains to the cell.img.
The top_Img_toContainer And Bottom img_to_Container Constrain is unnecessary.

There is a principle that you need to know.

Every view you add to the storyboard must have enough constraints(neither more nor less) to confirm it's:

Width

Height

X position

Y position