How can I get my UICollectionView to be the same width as my device when using Auto Layout?

Question

I created a UICollectionView in the storyboard editor and added it to my (custom) ViewController. Like every view controller in storyboard, it says the size is 600x600 and so the UICollectionView, which takes up the whole view, is also 600x600.

This is not correct though, as I am writing an iPhone app and so the real dimensions should be 320x568!

Because of this, when I add items to my collection, they are placed off the right side of the screen. For example, I first add a cell with an image in of size 160x213. It is left justified and it takes up exactly the left half of the screen. When I add the next image, there is a huge gap and it appears on the left side, partly cut off. The third image I would expect to appear below the first, but it doesn't appear at all. I believe it is off the right side of the screen. This implies that the size of the UICollectionView is 600x600 and not 320x568.

I should mention that I've tried everything I could think of to fix this. For example:

• I tried adjusting the size of the collection view:

  self.photoCollection.frame = CGRectMake(0, 0, 320, 568);
  

• I tried unchecking "Use Size Classes" in the storyboard editor.

It seems to work if I uncheck "Use Auto Layout" but I would like to use auto layout. How do I get this work?

Answer 1

1. You can set the "Simulated Metrics" of the view in your storyboard like this below. Personally, I prefer using 3.5/4-inch to construct my layout, as with auto layout, i only need to add some constraints to elements and iOS will automatically support the 4.7 and 5 inch screen size.

2. I think you should google for some "Auto Layout" tutorials, and I don't think its too hard for you to pick up :D. For instance, if you want to set the collection view frame equal to your view frame. You can do it like this

Feel free to ask any follow up question if your have any, Cheers!