CODEWITHSUNDEEP
iosswiftxcodeuicollectionviewuicollectionviewcell
Behrouz Riahi
Behrouz Riahi

Reputation: 1791

How to add the appropriate padding to the UICollectionView?

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):

The content is outside the UICollectionView

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):

enter image description here

This is the size inspector of the CollectionView:

collection view size inspector

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

Or what is the proper way to solve this issue?

Upvotes: 3

Views: 4982

Answers (3)

Illya Bakurov
Illya Bakurov

Reputation: 494

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.

  1. 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.

Upvotes: 8

matt
matt

Reputation: 535566

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.

Upvotes: 1

Riyan Fransen
Riyan Fransen

Reputation: 554

I don't quiet understand your question but you can change the size of a CollectionViewCell in the Size inspector.

enter image description here

Upvotes: 0

Related Questions