How Can I align the colectionViewCells to the left?

Question

I have ac UIolectionView that sometimes has only 1 item. If that is the case, the item is aligned in the middle, see picture:

But what I want, is that the item is aligned to the left.

I have found this answer on StackOverflow, leftAlign cells in UIColectioniew - StackOverFlow , but when I added the class given in the accepted answer to my codeBase, and added this to the viewControler :

        let leftAlignLayout = AlignedCollectionViewFlowLayout(horizontalAlignment: .left, verticalAlignment: .top)
        gamesColectionView.collectionViewLayout = leftAlignLayout

it did align the way I wanted, but it made the cells very small(see picture)

I also tried to add this from Github: AlignedCollectionViewFlowLayout - GitHub but that had the same result.

I tried fixing that bug by adding this to my viewController File:

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

but that didn't work.

does anybody have a suggestion on how I can fix this? I don't know what I did wrong or what I forgot to do.

thanks a lot! BSM

Answer 1

Try this:

var layout: UICollectionViewFlowLayout = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    layout.minimumLineSpacing = 8.0
    layout.minimumInteritemSpacing = 8.0
    let width = (UIScreen.main.bounds.size.width - 40.0) / 4
    layout.estimatedItemSize = CGSize(width: width, height: 98.0)
    return layout
}()

And:

override func viewDidLoad() {
    super.viewDidLoad()
    self.collectionView?.collectionViewLayout = layout
    self.collectionView!.contentInset = UIEdgeInsets(top: 0, left: 0, bottom:0, right: 0)
}

You don't need to use sizeForItemAt. If you want more you can look my project . Check constraints of your imageView with it's superview

Answer 2

You can manage your cell with below code. Do not forget to add UICollectionViewDelegateFlowLayout

func collectionView(_ collectionView: UICollectionView,
                layout collectionViewLayout: UICollectionViewLayout,
                sizeForItemAt indexPath: IndexPath) -> CGSize {
// your code here
} 

Answer 3

You don't need to do anything special to get the collectionViewCells left aligned.

If the constraints are proper, the cells will automatically start rendering from the left.

class VC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
            return cell
        }

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

Simply set the scrollDirection to vertical or horizontal as per your requirement within the storyboard itself.

There is no need to use any 3rd party library to get that working.