在容器中居中 UICollectionView 单元格答案

【问题标题】：Centering UICollectionView Cells in Container在容器中居中 UICollectionView 单元格
【发布时间】：2016-07-18 01:06:50
【问题描述】：

您好，我需要帮助通过 UICollectionViewFlowLayout 将我的集合视图单元格居中。我的最终目标是让第一个单元格位于中间，而其他所有单元格都位于中间。谢谢！

这是现在的样子：

以及我希望它的样子：

我在 SO 上找到了这个“解决方案”，但它似乎无法正常工作。

class CenterAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

    let attributes = super.layoutAttributesForElementsInRect(rect)

    // Constants
    let leftPadding: CGFloat = 8
    let interItemSpacing: CGFloat = 5

    // Tracking values
    var leftMargin: CGFloat = leftPadding // Modified to determine origin.x for each item
    var maxY: CGFloat = -1.0 // Modified to determine origin.y for each item
    var rowSizes: [[CGFloat]] = [] // Tracks the starting and ending x-values for the first and last item in the row
    var currentRow: Int = 0 // Tracks the current row
    attributes?.forEach { layoutAttribute in

        // Each layoutAttribute represents its own item
        if layoutAttribute.frame.origin.y >= maxY {

            // This layoutAttribute represents the left-most item in the row
            leftMargin = leftPadding

            // Register its origin.x in rowSizes for use later
            if rowSizes.count == 0 {
                // Add to first row
                rowSizes = [[leftMargin, 0]]
            } else {
                // Append a new row
                rowSizes.append([leftMargin, 0])
                currentRow += 1
            }
        }

        layoutAttribute.frame.origin.x = leftMargin

        leftMargin += layoutAttribute.frame.width + interItemSpacing
        maxY = max(layoutAttribute.frame.maxY, maxY)

        // Add right-most x value for last item in the row
        rowSizes[currentRow][1] = leftMargin - interItemSpacing
    }

    // At this point, all cells are left aligned
    // Reset tracking values and add extra left padding to center align entire row
    leftMargin = leftPadding
    maxY = -1.0
    currentRow = 0
    attributes?.forEach { layoutAttribute in

        // Each layoutAttribute is its own item
        if layoutAttribute.frame.origin.y >= maxY {

            // This layoutAttribute represents the left-most item in the row
            leftMargin = leftPadding

            // Need to bump it up by an appended margin
            let rowWidth = rowSizes[currentRow][1] - rowSizes[currentRow][0] // last.x - first.x
            let appendedMargin = (collectionView!.frame.width - leftPadding  - rowWidth - leftPadding) / 2
            leftMargin += appendedMargin

            currentRow += 1
        }

        layoutAttribute.frame.origin.x = leftMargin

        leftMargin += layoutAttribute.frame.width + interItemSpacing
        maxY = max(layoutAttribute.frame.maxY, maxY)
    }

    return attributes
}

【问题讨论】：

标签： ios swift uicollectionview

【解决方案1】：

确保您的视图控制器是集合视图的委托，并从UICollectionViewDelegateFlowLayout 实现以下方法：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    let sideInset = (collectionView.frame.size.width - myCollectionViewCellSize.width) / 2
    return UIEdgeInsets(top: 0, left: sideInset, bottom: 0, right: sideInset)
}

【讨论】：

如何引用myCollectionViewCellSize？
对不起，我应该澄清一下。你需要用你的单元格大小替换它。
好的。我的单元格大小是指我在界面生成器中定义的单元格宽度吗？因为 Xcode 不允许我输入整数。例如我输入(collectionView.frame.size.width - 690.width) 并给了我错误Value of type 'Int' has no member 'width'
随便(collectionView.frame.size.width - 690) / 2

【解决方案2】：

使用UICollectionViewDelegateFlowLayout，有方法collectionView:collectionViewLayout:sizeForItemAtIndexPath。

在那里你可以定义你想要多少边距（假设在这个例子中它是一个定义为 10.0 的变量）只需对你的宽度进行一些计算，如下所示：

让 width = collectionView.frame.size.width - (margin * 2)

然后从那里你会返回你的宽度和高度的 CGSize。

您的应用是否支持多种布局（纵向/横向以及 iPad 上的多任务处理）？不要忘记同时实现 willTransitionToTraitCollection 和 viewWillTransitionToSize，因为您的视图宽度都会发生变化，并且在这些情况下您也应该更新单元格。

【讨论】：