Swift - How to fill collectionview with cells

Question

I would like to fill my collectionview with cells. So I sized them differently but they should fit next to each other. My current situation is following:

I would like to have the cells next to eachother. As following:

My Collectionview-Class looks as following:

class OverviewViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

override func viewDidLoad() {
    super.viewDidLoad()
    setupCollection()
    setupView()
}

private func setupCollection() {
    self.collectionView!.register(GoalCell.self, forCellWithReuseIdentifier: goalCellIdentifier)
    self.collectionView?.dataSource = self
    self.collectionView?.delegate = self
    self.collectionView?.backgroundColor = .white
}

private func setupView() {
    self.navigationItem.title = "Goals"
    if #available(iOS 11.0, *) {
        self.navigationController?.navigationBar.prefersLargeTitles = true
    }
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

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


override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return DataProvider.sharedInstance.getGoals().count
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: goalCellIdentifier, for: indexPath) as! GoalCell
    cell.goalEntry = DataProvider.sharedInstance.getGoals()[indexPath.row]
    cell.setup()
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellHeight = UIScreen.main.bounds.height / 4.0 - 20
    let cellWidth = UIScreen.main.bounds.width / 3.0 - 1.0
    let cell = DataProvider.sharedInstance.getGoals()[indexPath.row]
    switch cell.type! {
    case GoalType.daily:
        return CGSize(width: cellWidth, height: cellHeight)
    case GoalType.yearly:
        return CGSize(width: cellWidth * 2, height: cellHeight * 2)
    case GoalType.lifely:
        return CGSize(width: cellWidth * 3, height: cellHeight * 3)
    }
}

I initialized my collectionview with following code:

let overviewFlowLayout = UICollectionViewFlowLayout()
    overviewFlowLayout.minimumLineSpacing = 0.0
    overviewFlowLayout.minimumInteritemSpacing = 0.0
    let overviewVC = OverviewNavViewController(rootViewController: OverviewViewController(collectionViewLayout: overviewFlowLayout))

I really don't know what to do anymore... I hope someone can help me a little! Thanks!

Answer 1

You are using UICollectionViewFlowLayout, which doesn't work the way you have in mind. To get the kind of layout shown in your second screen shot, you would have to write your own layout class.

Answer 2

您将必须实现自己的自定义collectionViewLayout ，或者您可能尝试找到现成的开源解决方案，也许CHTCollectionViewWaterfallLayout可能与您要寻找的足够接近。

Answer 3

Eventually You need to use flowlayout,you can't use constrains for collectionviewcell in storyboard,

This function will make custom cells sizes with boundaries,i used mine to present 2 cells in a row

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let paddomg:CGFloat = 25
    let collectionviewsize = collectionView.frame.size.width - paddomg


    return CGSize(width: collectionviewsize/2 ,height: 120)
}

If i were you i would use two custom cells, and based on index i would assign sizes and position in viewlayout