调整集合视图的单元格大小时将其与其底部对齐

Question

我有一个包含单元格的集合视图。我正在 sizeForItemAt 函数中调整该单元格的大小。但问题是，如果高度很小，单元格就会居中对齐。我想将所有调整大小的单元格对齐到集合视图的底部。 我正在使用斯威夫特。我尝试通过以编程方式添加视图来对视图使用约束。没有结果。我正在尝试在 Canva 应用程序中制作类似于可滚动设计的视图。 请帮忙。 我的集合视图目前看起来像这样 ，我想将单元格与底部对齐，就像

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

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

Answer 3

为了存档底部的单元格，我们需要在您的项目中添加以下类

class BottomAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
override init() {
    super.init()
    self.scrollDirection = .horizontal
    self.minimumLineSpacing = -2
    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]? {
    guard var attributes = super.layoutAttributesForElements(in: rect) else {
        return nil
    }
    attributes = attributes.map { attribute in
        var updatedAttribute = attribute
        updatedAttribute.frame.origin.y = self.collectionViewContentSize.height - attribute.frame.height - self.sectionInset.bottom
        return updatedAttribute
    }
    
    return attributes
}

}

之后，您需要将以下行添加到我们的代码中

    collectionView.collectionViewLayout = BottomAlignedCollectionViewFlowLayout()