swiftuicollectionviewalignmentuicollectionviewcell

Align Cell of collection view to its bottom on resizing it


I have collection view that holds a cell. I am resizing that cell in sizeForItemAt function. But the problem is , the cell is centre aligned if the height is small. I want to align all the resized cells to the bottom of collection view. I am using Swift. I tried using constraints on the view by adding the view programatically. No results. I am trying to make a view similar to a scrollable design in Canva App. Please help. My collection view looks like this currently Simulator Image and i want to align the cell to the bottom always like canva view that i am trying to make

Code:
CollectionViewController - 

import UIKit

class CollectionViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var collectionView: UICollectionView!
    let columns: CGFloat = 6.0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(OneCollectionViewCell.self, forCellWithReuseIdentifier: "cellOne")
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return Int(columns)
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellOne", for: indexPath) as! OneCollectionViewCell
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let width : CGFloat
        let height : CGFloat

        if indexPath.item == 0 {
            width = 100
            height = 50
            } else if indexPath.item == 1{
            width = 80
            height = 100

        } else if indexPath.item == 2 {
            width = 50
            height = 70
        }else {
            width = 80
            height = 100
        }
        return CGSize(width: width, height: height)
    }
}


CollectionViewCell- 
import UIKit

class OneCollectionViewCell: UICollectionViewCell {
    
     public var view1: UIView = {
                let viewView = UIView()
                viewView.translatesAutoresizingMaskIntoConstraints = false
                viewView.contentMode = .scaleToFill
                viewView.clipsToBounds = true
                return viewView
            }()
    
     override init(frame: CGRect) {
                super.init(frame: frame)
              
                contentView.addSubview(view1)
                
                view1.backgroundColor = .black
                
                view1.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0).isActive = true
                view1.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true
                view1.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
                view1.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 5).isActive = true
        }
            required init?(coder aDecoder: NSCoder) {
                super.init(coder: aDecoder)
                //fatalError("init(coder:) has not been implemented")
            }
}

Solution

  • Code:
    CollectionViewController - 
    
    class CollectionViewController: UIViewController, UICollectionViewDelegate, 
    UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
        @IBOutlet weak var collectionView: UICollectionView!
        let columns: CGFloat = 6.0
    
        override func viewDidLoad() {
            super.viewDidLoad()
            collectionView.delegate = self
            collectionView.dataSource = self
            collectionView.register(OneCollectionViewCell.self, forCellWithReuseIdentifier: "cellOne")
    
        }
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return Int(columns)
        }
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellOne", for: indexPath) as! OneCollectionViewCell
        
            let height : CGFloat
        
            if indexPath.item == 0 {
                height = 50
            } else if indexPath.item == 1{
                height = 100
            
            } else if indexPath.item == 2 {
                height = 70
            }else {
                height = 100
            }
            cell.configCell(height: height)
            return cell
        }
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
            let width : CGFloat
            let height : CGFloat = 100
        
            if indexPath.item == 0 {
                width = 100
            }
            else if indexPath.item == 1{
                width = 100
            
            } else if indexPath.item == 2 {
                width = 50
            
            }else {
                width = 80
                
            }
            return CGSize(width: width, height: height)
        }
    
    }
    
    CollectionViewCell- 
    import UIKit
    
    class OneCollectionViewCell: UICollectionViewCell {
    
        public var view1: UIView = {
            let viewView = UIView()
            viewView.translatesAutoresizingMaskIntoConstraints = false
            viewView.contentMode = .scaleToFill
            viewView.clipsToBounds = true
            return viewView
        }()
        
        var cstHeightAnchor: NSLayoutConstraint!
        override init(frame: CGRect) {
            super.init(frame: frame)
        
            contentView.addSubview(view1)
        
            view1.backgroundColor = .black
            cstHeightAnchor = view1.heightAnchor.constraint(equalToConstant: 100)
            cstHeightAnchor.isActive = true
    
            view1.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true
            view1.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
            view1.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 5).isActive = true
        }
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            //fatalError("init(coder:) has not been implemented")
        }
    
        func configCell(height: CGFloat) {
            cstHeightAnchor.constant = height
        }
    }