How to center horizontally UICollectionView Cells?

I have done some research, but I couldn’t find any code example on how to center cells in a UICollectionView horizontally.

instead of the first cell being like this X00, I want it to be like this 0X0. is there any way to accomplish this?

  • For loop for Dictionary don't follow it's order in Swift
  • Should I learn Swift or Objective C for iOS
  • localization in ios swift. how can i change application language at run time
  • How to I turn off the ambient light in Scene Kit (with Swift)?
  • AVFoundation audio processing using AVPlayer's MTAudioProcessingTap with remote URLs
  • this class is not key value coding-compliant for the key authView
  • EDIT:

    to visualize what I want:

    enter image description here

    I need it to look like version B when there is only one element in the CollectionView. When I got more than one element, then it should be like version A but with more elements.

    At the moment it looks like Version A when I have only 1 element, and I wonder how I can make it look like B.

    Thanks for the help!

    7 Solutions Collect From Internet About “How to center horizontally UICollectionView Cells?”

    Its not a good idea to use a library, if your purpose is only this i.e to centre align.

    Better you can do this simple calculation in your collectionViewLayout function.

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    
        let totalCellWidth = CellWidth * CellCount
        let totalSpacingWidth = CellSpacing * (CellCount - 1)
    
        let leftInset = (collectionViewWidth - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
        let rightInset = leftInset
    
        return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
    }
    

    I use KTCenterFlowLayout for this, and it works great. It’s a custom subclass of UICollectionViewFlowLayout that centres cells as you want. (Note: this isn’t a trivial thing to solve by posting some code, which is why I’m linking to a GitHub project!)

    swift 3

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    
            let totalCellWidth = 80 * collectionView.numberOfItems(inSection: 0)
            let totalSpacingWidth = 10 * (collectionView.numberOfItems(inSection: 0) - 1)
    
            let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
            let rightInset = leftInset
    
            return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
    
        }
    

    don’t forget to add the protocol

    UICollectionViewDelegateFlowLayout
    

    An objective-C version of Darshan Patel’s answer:

    - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
        CGFloat totalCellWidth = kItemWidth * self.dataArray.count;
        CGFloat totalSpacingWidth = kSpacing * (self.dataArray.count - 1);
        CGFloat leftInset = (self.bounds.size.width - (totalCellWidth + totalSpacingWidth)) / 2;
        CGFloat rightInset = leftInset;
        UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, leftInset, 0, rightInset);
        return sectionInset;
    }
    

    Slightly modifying @Safad Funy’s answer, this is what worked for me in the lattest version of Swift & iOS. In this case I wanted the cells’s width to be a third of the size of the collection view.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    
      let totalCellWidth = Int(collectionView.layer.frame.size.width) / 3 * collectionView.numberOfItems(inSection: 0)
      let totalSpacingWidth = (collectionView.numberOfItems(inSection: 0) - 1)
    
      let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
      let rightInset = leftInset
    
      return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
    }
    

    You can try my solution it works fine,

    func refreshCollectionView(_ count: Int) {
        let collectionViewHeight = collectionView.bounds.height
        let collectionViewWidth = collectionView.bounds.width
        let numberOfItemsThatCanInCollectionView = Int(collectionViewWidth / collectionViewHeight)
        if numberOfItemsThatCanInCollectionView > count {
            let totalCellWidth = collectionViewHeight * CGFloat(count)
            let totalSpacingWidth: CGFloat = CGFloat(count) * (CGFloat(count) - 1)
            // leftInset, rightInset are the global variables which I am passing to the below function
            leftInset = (collectionViewWidth - CGFloat(totalCellWidth + totalSpacingWidth)) / 2;
            rightInset = -leftInset
        } else {
            leftInset = 0.0
            rightInset = -collectionViewHeight
        }
        collectionView.reloadData()
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
    }
    

    I think you need to centre cell , so instead of using collectionView I’ld like UITableView will be of great use. Just use a UIViewController and place two UIViews in front and back and place a UITableView in middle
    Hope this helps