【问题标题】：UICollectionView Custom Cell to fill width In SwiftUICollectionView 自定义单元格在 Swift 中填充宽度
【发布时间】：2015-05-01 11:54:51
【问题描述】：

我一直在试图弄清楚如何使单元格填充宽度，正如您在图片中看到的单元格之间的宽度太大。我正在使用只有一个 imageView 的自定义单元格。

我尝试从情节提要中对其进行自定义，但我想没有选择，或者应该以编程方式完成。

我的 UICollectionViewController ：

 @IBOutlet var collectionView2: UICollectionView!

    let recipeImages = ["angry_birds_cake", "creme_brelee", "egg_benedict", "full_breakfast", "green_tea", "ham_and_cheese_panini", "ham_and_egg_sandwich", "hamburger", "instant_noodle_with_egg.jpg", "japanese_noodle_with_pork", "mushroom_risotto", "noodle_with_bbq_pork", "starbucks_coffee", "thai_shrimp_cake", "vegetable_curry", "white_chocolate_donut"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Do any additional setup after loading the view.

    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
         return recipeImages.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! RecipeCollectionViewCell

        // Configure the cell
        cell.recipeImageView.image = UIImage(named: recipeImages[indexPath.row])

        return cell
    }

【问题讨论】：

看看这个答案stackoverflow.com/questions/29649687/…
你的图像视图的 contentResizingMode 是什么？ ...你在使用自动布局吗？
嗯，它有不同的尺寸，例如：560 × 350，不，我没有使用任何类型的自动布局。

标签： ios swift uicollectionview uicollectionviewlayout

【解决方案1】：

您需要以编程方式执行此操作。

在您的视图控制器中实现UICollectionViewDelegateFlowLayout 并在collectionView:layout:sizeForItemAtIndexPath: 中提供大小

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let kWhateverHeightYouWant = 100
        return CGSizeMake(collectionView.bounds.size.width, CGFloat(kWhateverHeightYouWant))
}

您还需要在视图控制器的viewWillLayoutSubviews() 中调用collectionView.collectionViewLayout.invalidateLayout()，这样当主视图的尺寸发生变化时（例如旋转时），集合视图会重新布局。

Swift 4 更新

func collectionView(_ collectionView: UICollectionView,
                            layout collectionViewLayout: UICollectionViewLayout,
                            sizeForItemAt indexPath: IndexPath) -> CGSize {
            let kWhateverHeightYouWant = 100
            return CGSize(width: collectionView.bounds.size.width, height: CGFloat(kWhateverHeightYouWant))
}

【讨论】：

我完全按照你说的做了，但是当我运行该应用程序时，它会挂在启动屏幕上，并且 Xcode 显示此消息“来自调试器的消息：由于内存错误而终止”！！
看来内存错误来自其他地方。你有我可以查看的堆栈跟踪吗？或者在没有日志的情况下给 Debug Navigator 或断点拍照。
它是一个没有任何堆栈跟踪的窗口，它说..“** iPhone”上的应用程序“CollectionView”意外退出。来自调试器的消息：因内存错误而终止。和确定按钮
谷歌错误信息。我猜你在某个地方有一个保留周期。
您关于使布局无效的提示是我数小时以来一直在寻找的。谢谢。

【解决方案2】：

在您的视图控制器内部覆盖 viewDidLayoutSubviews 方法

@IBOutlet weak var collectionView: UICollectionView!

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        let itemWidth = view.bounds.width / 3.0
        let itemHeight = layout.itemSize.height
        layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
        layout.invalidateLayout()
    }
}

(collectionView 属性是你的collectionView)

【讨论】：

它在运行时给我“因内存错误而终止”？
可能是因为它导致了无限循环。当视图完成子视图的布局（viewDidLayoutSubviews 的用途）时，您会使布局无效并重新布局。

【解决方案3】：

使用以下代码设置UICollectionViewCell的宽度。

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {        
    return CGSize(width: screenWidth/3, height: screenWidth/3);
}

【讨论】：

从哪里可以得到屏幕尺寸作为变量？
让 screenSize: CGRect = UIScreen.mainScreen().bounds 让 screenWidth = screenSize.width
它不像我预期的那样工作，因为它实际上增加了单元格之间的宽度。

【解决方案4】：

也在 Swift 3 中，

确保您的视图控制器符合以下要求：

UICollectionViewDelegate，
UICollectionViewDataSource，
UICollectionViewDelegateFlowLayout

【讨论】：

【解决方案5】：

斯威夫特 3

如果您使用的是 swift 3，请使用此方法：

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

    }

注意变化：

在方法名称中的collectionView之前添加_
NSIndexPath 更改为 IndexPath

【讨论】：

【解决方案6】：

我有同样的要求，在我的情况下，下面的解决方案是有效的。我在 UICollectionviewCell

内将 UIImageView 上、左、下和右约束设置为 0

@IBOutlet weak var imagesCollectionView: UICollectionView!

override func viewDidLoad() {
    super.viewDidLoad()
    // flowlayout
    let screenWidth = UIScreen.main.bounds.width
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 10, right: 0)
    layout.itemSize = CGSize(width: screenWidth/3 - 5, height: screenWidth/3 - 5)
    layout.minimumInteritemSpacing = 5
    layout.minimumLineSpacing = 5
    imagesCollectionView.collectionViewLayout = layout

}

【讨论】：

【解决方案7】：

就我而言，我想在 UICollectionView 中显示两列和 3 行

我将 UICollectionViewDelegateFlowLayout 委托添加到我的班级

然后我覆盖 sizeForItemAt indexPath

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellHeight = (collectionView.bounds.size.height - 30) / 3 // 3 count of rows to show
    let cellWidth = (collectionView.bounds.size.width - 20) / 2 // 2 count of colomn to show
    return CGSize(width: CGFloat(cellWidth), height: CGFloat(cellHeight))
}

30 是行间距，20 是单元格之间的间距

【讨论】：

【解决方案8】：

以编程方式将itemSize 设置为[UIScreen mainScreen].bounds.size.width/3

【讨论】：

您是指 imageView 还是单元格（用于项目大小）？谢谢
单元格，我假设您的图像将自动调整大小以填充宽度/高度

【解决方案9】：

在我的情况下，假设每个单元格的宽度为 155，高度为 220。如果我想在纵向模式下每行显示 2 个单元格，在横向模式下显示 3 个单元格。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var itemsCount : CGFloat = 2.0
    if UIApplication.sharedApplication().statusBarOrientation != UIInterfaceOrientation.Portrait {
        itemsCount = 3.0
    }
    return CGSize(width: self.view.frame.width/itemsCount - 20, height: 220/155 * (self.view.frame.width/itemsCount - 20));
}

【讨论】：

【解决方案10】：

最好的解决方案是在viewDidLayoutSubviews 中更改UICollectionViewFlowLayout 的itemSize。在那里您可以获得最准确的UICollectionView 大小。你不需要在你的布局上调用 invalidate，这已经为你完成了。

【讨论】：

【解决方案11】：

就我而言，自动布局仅允许单元格增长到其内容大小，即使我覆盖了情节提要中的单元格大小，符合UICollectionViewDelegateFlowLayout，并实现了sizeForItemAt。所以我做了一个虚拟 UIView 单元格边界的宽度。

UICollectionViewController：

extension CollectionViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width - 40
        return CGSize(width: width, height: collectionView.bounds.height / 3)
    }
}

Cell（我在依赖注入上调用这个方法）：

private func updateViews() {
    let padding:CGFloat = 8
    let innerView = UIView()
    innerView.translatesAutoresizingMaskIntoConstraints = false
    innerView.layer.cornerRadius = 8
    innerView.layer.borderColor = UIColor.black.cgColor
    innerView.layer.borderWidth = 1
    contentView.addSubview(innerView)
    NSLayoutConstraint.activate([
        innerView.widthAnchor.constraint(equalToConstant: bounds.width - padding*2),
        innerView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: padding),
        innerView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -padding),
        innerView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor, constant: padding),
        innerView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor, constant: -padding)
    ])
}

【讨论】：