ios - 如何创建向用户显示一堆卡片的 Collection View ？

Question

我正在编写一个 iOS 纸牌游戏。我想向用户展示他手中的卡片。我寻找以美观的方式执行此操作的 CocoaPods，但找不到，所以我决定自己使用水平 UICollectionView 创建这样的 View 。

这里有一些要求:

• Collection View 的高度由屏幕高度动态确定。我用一些自动布局约束做了这个
• Collection View 单元格的高度应与 Collection View 的高度相同。我不知道该怎么做。我只找到this question ，这是关于如何使 Collection View 高度适合项目的高度。我想要相反的方式 - 项目的高度适合 Collection View 。
• Collection View 单元格的宽度应等于其高度 * 5/7。这是卡片的宽高比。我想我也可以在有约束的情况下做到这一点。
• 每个单元格内都有一个 ImageView 。 ImageView 应完全填满整个单元格。

这是我的尝试:

我在 Storyboard的原型(prototype)单元格中为 Collection View 和 ImageView 添加了约束。然后我添加了这段代码。

extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.addConstraint(NSLayoutConstraint(item: cell, attribute: .height, relatedBy: .equal, toItem: cell, attribute: .width, multiplier: 5.0 / 7.0, constant: 0))
        // here I am just setting all the cells to have the same image for testing purposes
        (cell.viewWithTag(1) as! UIImageView).image = someCardImage
        return cell
    }
}

结果:

只有 Collection View 的约束似乎有效。其他一切都不是。我在上面以编程方式添加的宽高比约束显然与我不知道的其他一些约束冲突:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x604000290810 UICollectionViewCell:0x7fd536610300.height == 0.714286*UICollectionViewCell:0x7fd536610300.width   (active)>",
    "<NSLayoutConstraint:0x600000292390 'UIView-Encapsulated-Layout-Height' UICollectionViewCell:0x7fd536610300.height == 99   (active)>", <---- What is this constraint?
    "<NSLayoutConstraint:0x600000292340 'UIView-Encapsulated-Layout-Width' UICollectionViewCell:0x7fd536610300.width == 68   (active)>" <---- What is this constraint?
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600000292390 'UIView-Encapsulated-Layout-Height' UICollectionViewCell:0x7fd536610300.height == 99   (active)>

并且 ImageView 没有完全填满整个单元格，如 UI 层次结构所示:

---

如何创建满足我要求的 Collection View ？

Answer 1

我在互联网上多看了一会后发现了这一点。

显然，CollectionViewDelegateFLowLayout 中有一个名为collectionView(_:layout:sizeForItemAt:) 的方法。第一次知道有这种方法!

如果我覆盖该方法，我可以根据需要设置单元格的大小:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = collectionView.height
    let width = height * 5 / 7
    return CGSize(width: width, height: height)
}

所以我以编程方式添加的约束根本不需要。

对于image view的frame问题，我通过反复试验解决了。我在约束的属性检查器中取消选中这个“相对于边距”选项:

我的猜测是单元格的“边距”是 8 个像素，因此相对于边距设置它会留下 8 个像素的空间。