How to remove the space of cells in UICollectionView

Question

I'm using UICollectionView. in Collection View > Size Inspector > Min Spacing, I changed to 0 and 1 .

I would like to remove any space between any cells. how can I do ?

how can I remove space between two cells without any writing code (white space)?

class FirstPageViewController: UIViewController ,UICollectionViewDataSource, UICollectionViewDelegate
....   
    let reuseIdentifier = "cellFirstPage"
    var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48","49","50"]


    // MARK: - UICollectionViewDataSource protocol

    // tell the collection view how many cells to make
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }

    // make a cell for each cell index path
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! ViewHolderFirstMainControllerCollectionViewController

        // Use the outlet in our custom class to get a reference to the UILabel in the cell

        print(self.items[indexPath.item])
        cell.lbl_title.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.cyan // make cell more visible in our example project

        return cell
    }

    // MARK: - UICollectionViewDelegate protocol

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }

    func collectionView(collectionView: UICollectionView, layout
        collectionViewLayout: UICollectionViewLayout,
                        minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1.0
    }

if I cannot without using writing code, please write swift code.

Check this post http://stackoverflow.com/questions/40131349/enforce-collectionview-to-have-only-2-rows/40133928#40133928 and set all spacing to zero. — Joe, Feb 16 '17 at 15:58

score 0 · Answer 1 · answered Feb 16 '17 at 12:16

You have to increase your cell width to remove spacing between cell. Or you can create 3 cells in one row. Try

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: view.bounds.width/2 - 2, height: *yourcustomheightforcell*)
}

score 0 · Answer 2 · answered Feb 16 '17 at 12:22

You need to set Item size and change the layout of collection view.

Try this code

private let minItemSpacing: CGFloat = 8
private let itemWidth: CGFloat      = 100
private let headerHeight: CGFloat   = 32

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    // Create our custom flow layout that evenly space out the items, and have them in the center
    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: itemWidth, height: itemWidth)
    layout.minimumInteritemSpacing = minItemSpacing
    layout.minimumLineSpacing = minItemSpacing
    layout.headerReferenceSize = CGSize(width: 0, height: headerHeight)

    // Find n, where n is the number of item that can fit into the collection view
    var n: CGFloat = 1
    let containerWidth = collectionView.bounds.width
    while true {
        let nextN = n + 1
        let totalWidth = (nextN*itemWidth) + (nextN-1)*minItemSpacing
        if totalWidth > containerWidth {
            break
        } else {
            n = nextN
        }
    }

    // Calculate the section inset for left and right. 
    // Setting this section inset will manipulate the items such that they will all be aligned horizontally center.
    let inset = max(minItemSpacing, floor( (containerWidth - (n*itemWidth) - (n-1)*minItemSpacing) / 2 ) )
    layout.sectionInset = UIEdgeInsets(top: minItemSpacing, left: inset, bottom: minItemSpacing, right: inset)

    collectionView.collectionViewLayout = layout
}

score 0 · Answer 3 · answered Feb 16 '17 at 12:32

This magic code is working for me, 3 cell at each row,

var gridWidth_Height: Float

gridWidth_Height = floorf((self.view.frame.size.width - 24.0) / 3.0)



override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: CGFloat(gridWidth_Height), height: CGFloat(gridWidth_Height))
}

override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionat section: Int) -> CGFloat {
    return 5.0
}

  override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionat section: Int) -> CGFloat {
    return 5.0
}
// Layout: Set Edges

override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionat section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(7.0, 7.0, 7.0, 7.0)
    // top, left, bottom, right
}

How to remove the space of cells in UICollectionView

3 Answers3