How to add the appropriate padding to the UICollectionView?

Question

The background image of my UICollectionView always appears smaller than the UICollectionView in terms of width and height. Here is the picture (The background white color is the whole UICollectionView size):

As you see from the picture, this causes the content to go outside of the background image. and when I scroll right, this happens (I cleared the background color of the CollectionView):

This is the size inspector of the CollectionView:

How can I reduce the size of the cells container inside the CollectionView?

Or what is the proper way to solve this issue?

Answer 1

There are 3 ways to fix your problem:

1. On Storyboard or .xib: Split Image and Collection View into two different UI elements. Make CollectionView constraints to be inside the image view. Align leading, top, trailing, and bottom constraints of collection view to the same constraints of the image view with offset of 10, or 15 for leading and trailing.

2. In code: if you use UICollectionViewFlowLayout, you can use UICollectionViewDelegateFlowLayout method:

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { }

to return UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 15), so that left and right edges of your sections fill be a little bit deeper into background image.

3. In code: use collectionView.contentInset = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 15) to move the whole content of the collection view deeper into background image.

Answer 2

Look in your screen shot at the bottom section, the View section. Just give the size a bigger X and a smaller Width. Even better, use autolayout to size the collection view relative to its superview.

As for your image, don't make it the background image of the collection view. Just make it an image that's behind the collection view.