How could we add margin in bottom and top of UICollectionView?

Question

I am new in swift, here is a solution to make a CollectionView with 4 cell in screen and in below line I said 15 margin for each side this working for left and right but this not working for top and button

return UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)

, How could we have same margin on top and bottom ?

Here is MainViewController :

import UIKit

class MainViewController: UIViewController , UICollectionViewDelegate, UICollectionViewDataSource {

    var listArray : [String] = []
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        print("MainViewController")
        collectionView.delegate = self
        collectionView.dataSource = self

        for index in 1 ..< 12 {
            listArray.append("Cell \(index)")
        }
    }


    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }


    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return listArray.count
    }


    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "mainCell", for: indexPath) as! MainCollectionViewCell
        let cellIndex = indexPath.item
        cell.cellLabelText.text = listArray[cellIndex]
        cell.backgroundColor = UIColor.blue

        return cell
    }


}


extension MainViewController : UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let bounds = collectionView.bounds

        return CGSize(width: (bounds.width / 2 ) - 30   , height:  ( bounds.height / 2 ) - 30   )
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

}

Here is MainCollectionViewCell :

import UIKit

class MainCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var cellLabelText: UILabel!

}

Possible duplicate of [UICollectionView spacing margins](https://stackoverflow.com/questions/13970950/uicollectionview-spacing-margins) — Kuldeep, Oct 01 '18 at 10:16

score 3 · Accepted Answer · answered Oct 01 '18 at 09:42

Since your collection view has only 1 section, you need to size the spacing between the different rows/columns inside a section and different items in the same row/column correctly rather than setting an inset for the sections.

UICollectionViewDelegateFlowLayout has the following two methods you should implement to achieve your goals: collectionView(_:layout:minimumLineSpacingForSectionAt:) and collectionView(_:layout:minimumInteritemSpacingForSectionAt:).

To copy the spacing you currently use for sections, you need to implement those methods like below:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return CGFloat(15)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return CGFloat(15)
}

score 1 · Answer 2 · answered Oct 01 '18 at 10:20

You should set "sectionInset" property of UICollectionViewFlowLayout like this

if let flowLayout = yourCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        flowLayout.sectionInset = UIEdgeInsetsMake(100, 0, 100, 0)
    }

This will add top and bottom margins by 100 points in your collection view. By the way the sequence is top, left, bottom, right in UIEdgeInsetsMake method.

score 0 · Answer 3 · answered Oct 01 '18 at 09:46

0

Select your storyboard:

1) Select UICollection view

2) Set Section Insets for TOP and BOTTOM

I hope this could help!!

answered Oct 01 '18 at 09:46

Dheeraj D

3,651
4
16
33

Thank you so much "Dheeraj D" this is working as well but I was looking for a solution with code . – PPPPPPPPP Oct 01 '18 at 15:13

score 0 · Answer 4 · answered Oct 01 '18 at 09:55

Try this

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {

                return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
            }

How could we add margin in bottom and top of UICollectionView?

4 Answers4