xcode 如何为每个大小类配置 UICollectionView 单元格大小？

How to configure a UICollectionView Cell Size per Size Class?

提问by Tristan Warner-Smith

I'm finding friction when trying to create responsive / adaptive UICollectionViewCellsin the UIStoryboard.

我在尝试UICollectionViewCells在UIStoryboard.

The issue I'm seeing is that you don't seem to be able to set the Cell Sizeper Size Classand I'm trying to ascertain the right approach to this. I've designed the cells to adjust to their containers, so that they shouldautosize regardless of size class. This mostly works in that if I change the size class, select my cell view and do Update Framesthen they all resize to fit their new size. However it's a one shot deal, if I go back to the Any/Any size class then I'm still seeing that resized version.

我看到的问题是您似乎无法设置Cell Sizeper Size Class，我正在尝试确定正确的方法。我设计了单元格以适应它们的容器，因此无论大小等级如何，它们都应该自动调整大小。这主要是因为如果我更改大小类，选择我的单元格视图，Update Frames然后它们都会调整大小以适应它们的新大小。然而，这是一次性交易，如果我回到任何/任何尺寸类别，那么我仍然会看到调整后的版本。

Here's what I'm aware I could try:

这是我知道我可以尝试的：

• Create multiple cells, with fixed dimensions, one per size class and in the Storyboard view. I could then only usethe right one at runtime but I could then seethem at design time.
• I couldcreate a collection view Per Size class, each one only being installed for that size. This would work, but would be a pain to manage the multiple UICollectionViews
• Create my interface and/or constraints programmatically (losing visibility of the design).

• 在 Storyboard 视图中创建多个具有固定尺寸的单元格，每个大小类一个。然后我只能在运行时使用正确的，但我可以在设计时看到它们。
• 我可以创建一个集合视图 Per Size 类，每个类只针对该大小安装。这会奏效，但管理多个UICollectionViews
• 以编程方式创建我的界面和/或约束（失去设计的可见性）。

I'm hoping this is a solved scenario and I'm just missing something, but I'm aware that it could be that the IB tools don't match the code at this point.

我希望这是一个已解决的场景，我只是遗漏了一些东西，但我知道这可能是 IB 工具在这一点上与代码不匹配。

采纳答案by Tristan Warner-Smith

The solution I came up with was just to implement the UICollectionViewDelegateFlowLayoutand implement the sizeForItemAtIndexPathmethod. This means that the cell dimensions can be set to match the available Size Classdimensions.

我想出的解决方案只是实现UICollectionViewDelegateFlowLayout和实现sizeForItemAtIndexPath方法。这意味着可以设置单元格尺寸以匹配可用Size Class尺寸。

This still isn't ideal as you can't seethe changes in the storyboard and you can't create a universal design and see it in each of the different formats.

这仍然不理想，因为您看不到故事板中的变化，并且您无法创建通用设计并以每种不同的格式查看它。

I'm still hoping someone has a better option.

我仍然希望有人有更好的选择。

回答by Martin Woolstenhulme

Here's a similar solution coded-out in Swift. I just styled both of my cells in the storyboard and leave them viewable for any size class combination. When the trait collection changes I update the cellSize and cellReuseID I want to use and tell the collectionView to reload all the visible cells. Then

这是在 Swift 中编码的类似解决方案。我只是在情节提要中为我的两个单元格设置了样式，并让它们对于任何大小的类组合都是可见的。当特征集合更改时，我更新要使用的 cellSize 和 cellReuseID，并告诉 collectionView 重新加载所有可见单元格。然后

collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize

and

和

override func collectionView(collectionView: UICollectionView,
    cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

(not shown in sample code) are called which lets me update the size of the cell and update the cell's storyboard styling. So not entirely done in storyboard, but good enough until more support is provided in Xcode.

（未在示例代码中显示）被调用，它让我更新单元格的大小并更新单元格的故事板样式。所以没有完全在故事板中完成，但在 Xcode 中提供更多支持之前已经足够好了。

struct MyCollectionViewConstants{
    static let CELL_ANY_ANY_REUSE_ID = "cell";
    static let CELL_COMPACT_REGULAR_REUSE_ID = "cellSmall"
    static let CELL_ANY_ANY_SIZE = 100;
    static let CELL_COMPACT_REGULAR_SIZE = 70;
}

class MyCollectionView: UICollectionViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    var cellSize = MyCollectionViewConstants.CELL_ANY_ANY_SIZE
    var cellReuseID = MyCollectionViewConstants.CELL_ANY_ANY_REUSE_ID


    func collectionView(collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{

        return CGSize(width: cellSize, height: cellSize)
    }

    override func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)

        if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClass.Compact
            && self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClass.Regular){
            cellSize = MyCollectionViewConstants.CELL_COMPACT_REGULAR_SIZE
            cellReuseID = MyCollectionViewConstants.CELL_COMPACT_REGULAR_REUSE_ID
        } else {
            cellSize = MyCollectionViewConstants.CELL_ANY_ANY_SIZE
            cellReuseID = MyCollectionViewConstants.CELL_ANY_ANY_REUSE_ID
        }

        self.collectionView.reloadItemsAtIndexPaths(
            self.collectionView.indexPathsForVisibleItems())
    }
}

回答by A.G

I was stuck with same problem after implementing size class(iPad and iPhone).Well, I figured out a solution. Hope it helps!

在实现 size class（iPad 和 iPhone）后，我遇到了同样的问题。好吧，我想出了一个解决方案。希望能帮助到你！

Implement UICollectionViewDelegateFlowLayout.

实现 UICollectionViewDelegateFlowLayout。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
    {
         var device = UIDevice.currentDevice().model  
         var cellSize:CGSize = CGSizeMake(155, 109)

         if (device == "iPad" || device == "iPad Simulator") {
            cellSize = CGSizeMake(240, 220) 
         }

         return cellSize
    }

回答by Ariven Nadar

Swift 4
Hi Fellow Developers,

Swift 4
各位开发人员，

This is easy to do if the height and width of the UICollectionViewCell are same.

如果 UICollectionViewCell 的高度和宽度相同，这很容易做到。

Steps
1. Import ** UICollectionViewDelegateFlowLayout**
2. Add the sizeForItem IndexPathmethod of UICOllectionView as follows

步骤
1. 导入** UICollectionViewDelegateFlowLayout**
2. 添加UICOllectionView的sizeForItem IndexPath方法如下

func collectionView(_ collectionView : UICollectionView,layout collectionViewLayout:UICollectionViewLayout,sizeForItemAt indexPath:IndexPath) -> CGSize {
    return CGSize(width: collectionVw.frame.size.height, height: collectionVw.frame.size.height)
}   

Note: What happening is you are setting the height of the UICollectionView as height and width of the UICollectionViewCell

注意：发生的事情是您将 UICollectionView 的高度设置为 UICollectionViewCell 的高度和宽度

Happy Coding :)

快乐编码:)