CODEWITHSUNDEEP
swiftuicollectionviewuikitalignment
BSM
BSM

Reputation: 107

How Can I align the colectionViewCells to the left?

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

enter image description here

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)

enter image description here

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

Upvotes: 0

Views: 677

Answers (3)

PGDev
PGDev

Reputation: 24341

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.

enter image description here

Upvotes: 1

Kasım Özdemir
Kasım Özdemir

Reputation: 5634

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

Upvotes: 1

Vikas Rajput
Vikas Rajput

Reputation: 1874

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
}

Upvotes: 1

Related Questions