CODEWITHSUNDEEP
iosswiftuicollectionviewuicollectionviewlayoutuicollectionviewflowlayout
Umit Kaya
Umit Kaya

Reputation: 5961

UICollectionview has unwanted space between sections

I set sections for my horizontal UICollectionView. I want my cell item in second rows in each section to be double width of items in first row. This is what i set:

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

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    if section == 0 {
        return 2
    }
    return 1
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { //1.7, 2.7
    if indexPath.row == 0 {
        return CGSize(width: collectionView.frame.size.width/2,
        height: collectionView.frame.size.height/2)
    }
    return CGSize(width: collectionView.frame.size.width,
                  height: collectionView.frame.size.height/2)

}

But this is the end result:

enter image description here

How i can get rid of spaces in smaller size items and layout them nicely?

Note: Numbers on pictures represent section and row (0 1 -> Section 0, Row 1)

This is what i want to achieve:

enter image description here

Upvotes: 1

Views: 978

Answers (2)

Hayk Brsoyan
Hayk Brsoyan

Reputation: 186

Replace indexPath.row with indexPath.section.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { //1.7, 2.7
    if indexPath.section == 0 {
        return CGSize(width: collectionView.frame.size.width/2,
        height: collectionView.frame.size.height/2)
    }
    return CGSize(width: collectionView.frame.size.width,
                  height: collectionView.frame.size.height/2)

}

Upvotes: 0

Asif Newaz
Asif Newaz

Reputation: 587

First: if you use a storyboard, make sure you add collection view's constraints properly to its super view.

Second: Add collection view cell's constraints.

Third: From storyboard's size inspector, change collection view's estimate size to none.

Fourth: Add UICollectionViewDelegateFlowLayout in your viewcontroller

Fifth: Add those following code:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath.section == 0 {
        return CGSize(width: (collectionView.frame.size.width - 10)/2,
        height: (collectionView.frame.size.height - 10)/2) // your desired height
    }
    return CGSize(width: (collectionView.frame.size.width - 10),
                  height: (collectionView.frame.size.height - 10)/2)
}

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

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

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

Upvotes: 3

Related Questions