collectionView 中的约束答案

【问题标题】：Constraints in collectionViewcollectionView 中的约束
【发布时间】：2016-10-21 13:25:59
【问题描述】：

我想在我的 collectionView 单元格中具有动态宽度和高度，因此每个屏幕中只有 2 个单元格。距离顶部、左侧、右侧和它们之间的距离为 10px。

例子：

如果我有 320px 宽度（屏幕），我想要每个单元格 145px 所以它会是左侧 10 像素 +145（单元格）+ 10 像素之间 + 145（第二个单元格）+ 右侧 10 像素。

【问题讨论】：

【解决方案1】：

使您的控制器符合UICollectionViewDelegateFlowLayout 协议并实现方法：

import UIKit

class ViewController: UIViewController
{
    let numberOfCells = 9
    let kCellHeight : CGFloat = 100
    let kLineSpacing : CGFloat = 10
    let kInset : CGFloat = 10

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad()
    {
        super.viewDidLoad()
    }
}

extension ViewController : UICollectionViewDataSource
{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        return numberOfCells
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "sampleCell", for: indexPath)
        return cell
    }
}

extension ViewController : UICollectionViewDelegateFlowLayout
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        return CGSize(width: (UIScreen.main.bounds.width - 2*kInset - kLineSpacing)/2, height: kCellHeight)
    }

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
    {
        return UIEdgeInsets(top: kInset, left: kInset, bottom: kInset, right: kInset)
    }
}

附上截图：

【讨论】：

感谢您的回答。这实际上改变了我的布局，但你能更新垂直的代码吗？
但是您指定的规格是根据横向布局的。即单元格宽度。根据垂直布局告诉您的规格。
我没听懂你的意思..我想在每个屏幕上显示 2 个单元格，然后在它们下面再显示 2 个单元格，依此类推..
在每个 scree 2 单元格上是什么意思？ Nd 你的收藏视图的高度是多少？等于全屏吗？
我的意思是，即使我有 iphone 5 或 ipad，我也想要 2 个单元格，在它们下面还有两个单元格取决于我将拥有多少个。是的，集合视图的高度是整个屏幕

【解决方案2】：

您可以使用堆栈视图，也可以设置单元格的宽度约束并将其拖到代码中以将常量设置为半屏大小。

还有为什么你在有的时候直接在单元格上使用约束：

func collectionView(collectionView : UICollectionView,layout collectionViewLayout:UICollectionViewLayout,sizeForItemAtIndexPath indexPath:NSIndexPath) -> CGSize
{
    return CGSizeMake(width ,height);
}

【讨论】：

如何使用 stackviews 到单元格？或宽度限制（所有这些都无法使用它们）。此函数返回错误“CGSizeMake”在 Swift 中不可用（我使用 swift 3）
好吧，单个单元格上的堆栈视图将其划分为相等的视图...例如。如果您有一个具有屏幕宽度的单元格，您可以在其内容中使用 stackview 来划分它。但事实并非如此。代码是用 Objective-C 编写的。 swift 版本是 CGSize(width: X, height: Y)

【解决方案3】：

使用下面的代码：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 让宽度 = (screenSize.width - 30) / 2 let height = width * aspectRatio // aspectRatio - someValue 或者把高度作为一个常数返回 CGSizeMake（宽度，高度） }

这对我很有效..

【讨论】：