如何通过自动布局设置集合视图单元格大小

Posted 2023-03-12

【中文标题】如何通过自动布局设置集合视图单元格大小

【英文标题】：How do I set collection view's cell size via the auto layout

【发布时间】：2016-06-25 04:56:40

【问题描述】：

您好，我正在尝试通过 auto layout 调整单元格的大小。

我想按 3 x 3 显示单元格。

第一个单元格的左边距=0

Last Cell 的右边距=0

并且所有单元格的空间都有 1pt。喜欢instagram。

我应该设置单元格的大小吗？我想通过自动布局设置约束。

我也尝试使用代码设置单元格的大小。

这是我的代码：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 
    return CGSizeMake(123, 123);


func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat 
    return 1;


func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat 
    return 1;

但是..我认为它不是精确计算单元格的大小。

如何根据屏幕大小设置单元格大小？

我必须在单元格之间设置 1pt 的空间。

有没有只使用情节提要设置？

如果没有，我如何通过代码设置？

谢谢。

【问题讨论】：

谢谢！效果很好。

【参考方案1】：

我不相信您可以仅使用情节提要来设置大小，因为您无法为重复项目设置约束，例如在运行时动态创建的集合视图单元格。

您可以根据提供的信息轻松计算大小。在collectionView(_:layout:sizeForItemAt:) 中，您可以访问collectionView 的边界来计算所需的单元格大小：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    // Compute the dimension of a cell for an NxN layout with space S between
    // cells.  Take the collection view's width, subtract (N-1)*S points for
    // the spaces between the cells, and then divide by N to find the final
    // dimension for the cell's width and height.

    let cellsAcross: CGFloat = 3
    let spaceBetweenCells: CGFloat = 1
    let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross
    return CGSize(width: dim, height: dim)

确保您的班级采用协议UICollectionViewDelegateFlowLayout。

这适用于各种尺寸的 iPhone 和 iPad。

【讨论】：

集合视图单元格现在不支持自动调整大小吗？

我不知道@ThuggishNuggets。您必须以某种方式提供与我在这里处理的相同类型的信息，例如跨单元格的数量和单元格之间的所需间距。如果您知道另一种或更好的方法，请添加答案。

非常感谢~！

我只是让差距稍大一点，以使差异不那么明显。

@vacawama 我明白感谢您的帮助。我真的很感谢你:)

【参考方案2】：

vacawama 的回答很好，但我有 2 个问题。我希望自动使用我在情节提要中定义的间距。

其次，我无法调用此函数，也没有人提到如何调用？为了调用 collectionView 的 sizeForItemAt，您需要扩展 UICollectionViewDelegateFlowLayout 而不是扩展 UICollectionViewDelegate。我希望这可以节省其他人一些时间。

extension MyViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource 

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        let cellsAcross: CGFloat = 3
        var widthRemainingForCellContent = collectionView.bounds.width
        if let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout 
            let borderSize: CGFloat = flowLayout.sectionInset.left + flowLayout.sectionInset.right
            widthRemainingForCellContent -= borderSize + ((cellsAcross - 1) * flowLayout.minimumInteritemSpacing)
        
        let cellWidth = widthRemainingForCellContent / cellsAcross
        return CGSize(width: cellWidth, height: cellWidth)
    

【参考方案3】：

我使用 CollectionView 的委托方法设置它。这将为您提供 2xN 设置，但您可以轻松地将其设置为 3xN。这是一个截图，你可以参考我在 GitHub 上的项目...

https://github.com/WadeSellers/GoInstaPro

【参考方案4】：

Swift 3 版本代码基于 vacawama 答案：

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

        let cellsAcross: CGFloat = 3
        let spaceBetweenCells: CGFloat = 1
        let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross

        return CGSize(width: dim, height: dim)
    

【参考方案5】：

这是另一种解决方案，但它只适用于 iPhone6。

我会尝试为 iphone5/6plus 更新

特别感谢@vacawama！

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 
        
        
        // Compute the dimension of a cell for an NxN layout with space S between
        // cells.  Take the collection view's width, subtract (N-1)*S points for
        // the spaces between the cells, and then divide by N to find the final
        // dimension for the cell's width and height.
        
        let cellsAcross: CGFloat = 3
        let spaceBetweenCells: CGFloat = 1
        let dim = (collectionView.bounds.width - (cellsAcross - 1) * spaceBetweenCells) / cellsAcross
                print(indexPath.row)
        
        var width = dim
        
        //last cell's width
        if(  (indexPath.row + 1) % 3 == 0)
            width = 124
            
        else 
            width = 124.5
        
        print(width)
        return CGSize(width: width , height: dim)
        
    
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat 
        return 1;
    
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat 
        return 1;