CollectionView不同大小，沒有任何庫

Question

我正在嘗試設計一個集合視圖，該布局的更改如所附圖像所示。 如果有人對此設計有任何想法，請提供幫助。

提前致謝

我需要那種類型的布局以用於沒有任何庫的集合視圖

Answer 1

• 您需要創建UICollectionViewLayout的子類，並需要重寫prepare方法。

• 計算UICollectionViewLayoutAttributes的框架並將其存儲在Cache字典中。

• 使用緩存字典實現layoutAttributesForElements和layoutAttributesForItem方法

這是代碼，請檢查：

import UIKit

class MJCollectionLayout: UICollectionViewLayout {
    fileprivate var cache = [IndexPath: UICollectionViewLayoutAttributes]()
    fileprivate var cellPadding: CGFloat = 1
    fileprivate var contentHeight: CGFloat = 0
    var oldBound: CGRect!
    fileprivate var contentWidth: CGFloat {
        guard let collectionView = collectionView else {
            return 0
        }
        let insets = collectionView.contentInset
        return collectionView.bounds.width - (insets.left + insets.right)
    }

    override var collectionViewContentSize: CGSize {
        return CGSize(width: contentWidth, height: contentHeight)
    }

    override func prepare() {
        super.prepare()
        contentHeight = 0
        cache.removeAll(keepingCapacity: true)
        guard cache.isEmpty == true, let collectionView = collectionView else {
            return
        }
        if collectionView.numberOfSections == 0 {
            return
        }
        oldBound = self.collectionView?.bounds
        for item in 0 ..< collectionView.numberOfItems(inSection: 0) {
            let indexPath = IndexPath(item: item, section: 0)
            let cellSize = self.getCellSize(index: item)
            let origin = self.getOrigin(index: item)
            let frame = CGRect(origin: origin, size: cellSize)
            let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = insetFrame
            cache[indexPath] = (attributes)
            contentHeight = max(contentHeight, frame.maxY)
        }
    }

    func getCellSize(index: Int) -> CGSize {
        let col = index % 6
        let width = contentWidth / 2.0
        if col == 2  {
            return CGSize.init(width: 2 * width, height: width)
        }
        if col == 4 {
            return CGSize.init(width:  width, height: 2 * width)
        }
        return CGSize.init(width: width, height: width)
    }

    func getOrigin(index: Int) -> CGPoint {
        let col = index % 6
        let multiplayer = index / 6
        let width = contentWidth / 2.0
        var y: CGFloat = 0.0
        var x: CGFloat = 0.0
        if col == 0 || col == 1 {
            y = CGFloat(multiplayer) * (8.0 * width) + 0
        }
        if col == 2 {
            y = CGFloat(multiplayer) * (8.0 * width) + width
        }
        if col == 3 || col == 4  {
            y = CGFloat(multiplayer) * (8.0 * width) + (2.0 * width)
        }
        if col == 5 {
             y = CGFloat(multiplayer) * (8.0 * width) + (3.0 * width)
        }
        if col == 0 || col == 2 || col == 3 || col == 5 {
            x = 0.0
        }
        if  col == 1 || col == 4 {
            x = width
        }

        return CGPoint(x: x, y: y)
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
        // Loop through the cache and look for items in the rect
        visibleLayoutAttributes = cache.values.filter({ (attributes) -> Bool in
            return attributes.frame.intersects(rect)
        })
        print(visibleLayoutAttributes)
        return visibleLayoutAttributes
    }

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

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        if newBounds.width != oldBound?.width {
            return true
        }
        return false
    }
}