Align Cell of collection view to its bottom on resizing it - swift

Question

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")
}
}

Answer 1

class BottomAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
override init() {
super.init()
self.scrollDirection = .horizontal
// self.minimumInteritemSpacing = 10.0
// self.minimumLineSpacing = 10.0
self.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributes = super.layoutAttributesForElements(in: rect)?
.map { $0.copy() } as? [UICollectionViewLayoutAttributes]
attributes?
.reduce([CGFloat: (CGFloat, [UICollectionViewLayoutAttributes])]()) {
guard $1.representedElementCategory == .cell else { return $0 }
return $0.merging([ceil($1.center.y): ($1.frame.origin.y, [$1])]) {
($0.0 < $1.0 ? $0.0 : $1.0, $0.1 + $1.1)
}
}
.values.forEach { minY, line in
line.forEach {
$0.frame = $0.frame.offsetBy(
dx: 0,
dy: minY + $0.frame.origin.y
)
}
}
return attributes
}
}
In viewDidLoad
collectionView.collectionViewLayout = BottomAlignedCollectionViewFlowLayout()

Answer 2

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
}
}