Swift 中的集合视图单元格格式不正确

Question

我是 Swift 的新手，我正在尝试创建一个 UICollectionViewCell。它构建成功，但单元格不是我认为我正在创建的大小。应该有两列，并且应该包含图像、描述和价格。我知道这很简单，但我不知道我做错了什么。请参见下图。我想我需要在尺寸检查器中修复一些东西，但我不知道是什么。

import UIKit

class ProductsVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{

    @IBOutlet weak var productsCollection: UICollectionView!

    private(set) public var products = [Product]()

    override func viewDidLoad() {
        super.viewDidLoad()

        productsCollection.dataSource = self
        productsCollection.delegate = self
    }

    func initProducts(category: Category){
        products = DataService.instance.getProducts(forCategoryTitle: category.title)

    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return products.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ProductCell", for: indexPath) as? ProductCell {
            let product = products[indexPath.row]
            cell.updateViews(product: product)
            return cell
        }
        return ProductCell()
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let height: CGFloat = 280
        return CGSize(width: (collectionView.frame.size.width - 10) / 2, height: height)
        //10 is minimum line spacing between two columns
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
}

Answer 1

FYI

试试这个：

// MARK: - UICollectionViewDelegateFlowLayout
extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // You can change collection view cell height here, It's up to your design
        let height: CGFloat = 150
        let width: CGFloat = (collectionView.frame.size.width - 10 - a) / 2 // a is extra spacing of collection view (like leading or trailing constraints)
        // Converting CGFloat to Int make sure the width of total cells are less than or equal the screen width
        return CGSize(width: Int(width), height: Int(height)) // 10 is minimum line spacing between two columns
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
}

请检查下图的额外间距示例：

a = 20 我的示例设计（前导 = 10，尾随 = 10）

Answer 2

在声明 collectionView:

时只需提供 itemSize

let layout = UICollectionViewFlowLayout()
layout.itemSize = sizeForEachItem
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)

Swift 中的集合视图单元格格式不正确

Collection View cell in Swift is not formatting correctly

ios

uicollectionviewcell

swift