CODEWITHSUNDEEP
iosuicollectionviewswift4uicollectionviewcelluicollectionviewlayout
Vignesh J
Vignesh J

Reputation: 25

How to display CollectionViewCell in center in swift 4

Collectionview cell has a two item in one row, But Collectionview cell doesn't center in my design.

enter image description here

How can I display the collectionViewCell in center alignment? I want to display like the following image

enter image description here

I am trying many times, can't display the center of CollectionView. Please Help me!

Upvotes: 1

Views: 3098

Answers (2)

Vinodsagar
Vinodsagar

Reputation: 11

Make the following changes:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    let numberOfItemsPerRow: CGFloat = 2.0
    let minimumCellSpacing: CGFloat = 10.0
    let totalSpacing = (numberOfItemsPerRow + 1)*minimumCellSpacing //left + right + in-between padding
    let width = (collectionView.frame.width - totalSpacing)/numberOfItemsPerRow
    return CGSize(width: width, height: width) 

}

Once this is done.

Reload your collection view in main thread with a bit delay:

DispatchQueue.main.asyncAfter(deadline: .now() + 0.10) {
   self.myCollectionView.reloadData()
}

Upvotes: -1

Nikunj Kumbhani
Nikunj Kumbhani

Reputation: 3924

Working code Swift 4 | Swift 5

You need to use UICollectionViewDelegateFlowLayout method like this

class CardListViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    
    // UICollectionViewDelegateFlowLayout Delegate method

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        let leftAndRightPaddings: CGFloat = 45.0
        let numberOfItemsPerRow: CGFloat = 2.0
    
        let width = (collectionView.frame.width-leftAndRightPaddings)/numberOfItemsPerRow
        return CGSize(width: width, height: width) // You can change width and height here as pr your requirement
    
    }
}

Output :

enter image description here

Upvotes: 2

Related Questions