CODEWITHSUNDEEP
iosswiftuicollectionview
KexAri
KexAri

Reputation: 3977

Centering cells for paging UICollectionView

I have a UICollectionView setup like so:

In viewDidLoad:

func setupCollectionView() {
  collectionView.delegate = self
  collectionView.dataSource = self
  collectionView.register(UINib(nibName: "NewQuizzesCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "NewQuizzesCollectionViewCell")

  let flowLayout = UICollectionViewFlowLayout()
  flowLayout.scrollDirection = .horizontal
  flowLayout.minimumInteritemSpacing = 20
  flowLayout.minimumLineSpacing = 20
  collectionView.isPagingEnabled = true
  collectionView.setCollectionViewLayout(flowLayout, animated: false)
}

And my delegates:

extension NewQuizzesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

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

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: NewQuizzesCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "NewQuizzesCollectionViewCell", for: indexPath) as! NewQuizzesCollectionViewCell
        cell.backgroundColor = colors[indexPath.row]
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.size.width*0.8, height: collectionView.frame.size.height*0.8)
    }

}

When I run the app it looks like this:

enter image description here

My question is, how can I make the cells centered? I noticed I can adjust the spacing between the cells, but how would I add spacing to the left of the red cell? Any pointers on this would be really appreciated. Thanks!

Upvotes: 9

Views: 4817

Answers (3)

Nandkishor mewara
Nandkishor mewara

Reputation: 2562

for swift 3.0

minimumLineSpacingForSectionAt function use for set spacing between the cells of UICollectionView Layout..

and you need to add subclass of UICollectionViewDelegateFlowLayout so you can use the function minimumLineSpacingForSectionAt like this

class HomeBestSallingCatgCell: DatasourceCell ,UICollectionViewDelegate,UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
   .......
   ......

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
      return 0 //set return 0 for no spacing you can check to change the return value
    }
 }

i hope it will useful for you

Upvotes: 0

Jogendra.Com
Jogendra.Com

Reputation: 6454

Try this delegate function will help and you need to set width of cell according to you wants

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

Hope it will help you

Upvotes: 2

Sagar Bhut
Sagar Bhut

Reputation: 657

you try that code that may help you..

 override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {

    let offSet = self.collectionView.contentOffset
    let width = self.collectionView.bounds.size.width

    let index = round(offSet.x / width)
    let newPoint = CGPoint(x: index * size.width, y: offSet.y)


    coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) in

    },completion: {(UIVIewTransitionCoordinatorContext) in
        self.collectionView.reloadData()
        self.collectionView.setContentOffset(newPoint, animated: true)
    })

}


 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.size.width, height: collectionView.frame.size.height)
}

Upvotes: 0

Related Questions