中心不同高度的CollectionView项目

时间:2018-05-28 10:14:05

标签: ios swift uicollectionview


我遵循了本教程:https://www.raywenderlich.com/164608/uicollectionview-custom-layout-tutorial-pinterest-2 并提出以下代码。
我现在的问题是,如何将集合视图的项目集中在一起。
每个项目都有不同的高度。
(我启用了垂直滚动。)

class DynamicLayout: UICollectionViewFlowLayout {
    var delegate: DynamicLayoutDelegate?
    var numberOfColumns = 2
    fileprivate var cellPadding: CGFloat = 6
    fileprivate var contentHeight: CGFloat = 0
    var xOffset = 0
    fileprivate var contentWidth: CGFloat {
        guard let c = collectionView else { return 0  }
        return c.bounds.width - (c.contentInset.left + c.contentInset.right)
    }
    fileprivate var cache = [UICollectionViewLayoutAttributes]()

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }

    override func prepare() {
        guard cache.isEmpty == true, let collectionView = collectionView else { return }
        // let columnWidth = contentWidth / CGFloat(numberOfColumns)
        let columnWidth = CGFloat(310)
        var xOffset = [CGFloat]()
        for column in 0 ..< numberOfColumns {
            xOffset.append(CGFloat(column) * columnWidth)
        }
        var column = 0
        var yOffset = [CGFloat](repeating: 0, count: numberOfColumns)

        // 3. Iterates through the list of items in the first section
        for item in 0 ..< collectionView.numberOfItems(inSection: 0) {

            let indexPath = IndexPath(item: item, section: 0)

            // 4. Asks the delegate for the height of the picture and the annotation and calculates the cell frame.
            let cellHeight = delegate?.collectionView(collectionView, heightFor: indexPath)
            let height = cellPadding * 2 + cellHeight!
            let frame = CGRect(x: xOffset[column], y: yOffset[column], width: columnWidth, height: height)
            // let totalCellWidth = CGFloat(310 * numberOfColumns)
            // let totalSpacingWidth = cellPadding * CGFloat(numberOfColumns - 1)
            // let leftInset = (collectionView.frame.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
            // let leftInset = collectionView.frame.width - 310 / 2
            let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)

            // 5. Creates an UICollectionViewLayoutItem with the frame and add it to the cache
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = insetFrame
            cache.append(attributes)

            // 6. Updates the collection view content height
            contentHeight = max(contentHeight, frame.maxY)
            yOffset[column] = yOffset[column] + height

            column = column < (numberOfColumns - 1) ? (column + 1) : 0
        }
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()

        // Loop through the cache and look for items in the rect
        for attributes in cache {
            if attributes.frame.intersects(rect) {
                visibleLayoutAttributes.append(attributes)
            }
        }
        return visibleLayoutAttributes
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cache[indexPath.item] }
}

protocol DynamicLayoutDelegate: class {
    func collectionView(_ collectionView:UICollectionView, heightFor indexPath:IndexPath) -> CGFloat
}

问题是,我不希望在较小的单元格下方和上方留出空白区域。

问题的屏幕截图: enter image description here

0 个答案:

没有答案