如何减少具有大量项目的 UICollectionView 上的内存使用量？

Question

我正在尝试使用 UICollectionView 而不是 UITableView 来显示大量项目（> 15000），并且 UICollectionView 似乎为集合所需的整个 contentView 大小预先分配了一个像素缓冲区。根据项目大小，模拟器显示需要高达 6.75GB 的内存。

我希望集合视图基于其与 UITableView 非常相似的协议，不会分配任何像素缓冲区而仅依赖于单元格的支持/渲染。

我正在使用故事板文件来定义集合视图和单元格，它们都具有 Opaque = false。我看过很多关于 Stack Overflow 的文章，大部分都与内存泄漏有关，所以我对如何解决这个问题有点困惑。

出于好奇，这里是整个代码库（故事板除外）：

MyCollectionViewCell.swift

import UIKit    
class MyCollectionViewCell: UICollectionViewCell {
    static let identifier = "myCellIdentifier"
}

UIColor+Random.swift

import UIKit
extension UIColor {
    static func randomColor() -> UIColor {
        let red = CGFloat(drand48())
        let green = CGFloat(drand48())
        let blue = CGFloat(drand48())
        return UIColor(red: red, green: green, blue: blue, alpha: 1.0)
    }
}

视图控制器.swift

import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 10000
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 30000
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: MyCollectionViewCell.identifier, for: indexPath) as! MyCollectionViewCell
        cell.backgroundColor = UIColor.randomColor()
        return cell
    }


    @IBOutlet weak var collectionView: UICollectionView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
}

某些用例下的内存使用情况：

Answer 1

UICollectionView 适合管理有限数量的部分。使用大量的部分和项目总是会导致使用大量内存，因为 UIKit 试图跟踪部分中每个元素的位置以适当地缩放 contentView。

相反，创建一个自定义 UICollectionViewLayout 来管理大量项目之间的关系，它们应该被定位并与 UICollectionViewDataSource 协调以将相对较小的项目集作为“窗口”映射到更大的集。

例如，假设 UICollectionView 项目按照关于 100x100 的问题；UIKit 会一次在屏幕上渲染大约 80~100。假设 UICollectionView 在用户滚动时在所有侧缓存一些条目，在“缓存”中旋转 1024 个项目应该绰绰有余。UICollectionView 管理 1 个包含 1024 个项目的部分完全没有问题。

接下来，使用自定义 UICollectionViewLayout，定义一个足够大的自定义 contentViewSize 以容纳所有项目。UICollectionView 将通过以下方式询问布局哪些项目在可见矩形内layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?

确保每次集合视图查询时都返回一组新的项目。使用 1024 个项目缓存，从项目索引 0 开始显示在屏幕上的第一个元素，1 表示第二个元素，2 表示第三个元素，等等。与 UICollectionViewDataSource 协调，每次布局中的坐标与项目索引相关联时，通知数据关于应该与关联索引关联的真实部分/项目的来源。

首先，让我们定义一个协议和数据源，将大数据源的真实大小映射到 UICollectionView 可以处理的合理范围内。

LargeDataSourceCoordinator.swift:

import UIKit

protocol LargeDataSourceProtocol {
    func largeNumberOfSections() -> Int
    func largeNumberOfItems(in section: Int) -> Int
    func largeNumberToCollectionViewCacheSize() -> Int
    func associateLargeIndexPath(_ largeIndexPath: IndexPath) -> IndexPath
}

class LargeDataSourceCoordinator: NSObject, UICollectionViewDataSource, LargeDataSourceProtocol {

    var cachedMapEntries: [IndexPath: IndexPath] = [:]
    var rotatingCacheIndex: Int = 0

    func largeNumberToCollectionViewCacheSize() -> Int {
        return 1024 // arbitrary number, increase if rendering issues are visible like cells not appearing when scrolling
    }

    func largeNumberOfSections() -> Int {
        // To do: implement logic to find the number of sections
        return 10000 // simplified arbitrary number for sake of demo
    }

    func largeNumberOfItems(in section: Int) -> Int {
        // To do: implement logic to find the number of items in each section
        return 30000  // simplified arbitrary number for sake of demo
    }

    func associateLargeIndexPath(_ largeIndexPath: IndexPath) -> IndexPath {
        for existingPath in cachedMapEntries where existingPath.value == largeIndexPath {
            return existingPath.key
        }
        let collectionViewIndexPath = IndexPath(item: rotatingCacheIndex, section: 0)
        cachedMapEntries[collectionViewIndexPath] = largeIndexPath
        rotatingCacheIndex = (rotatingCacheIndex + 1) % self.largeNumberToCollectionViewCacheSize()
        return collectionViewIndexPath
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.largeNumberToCollectionViewCacheSize()
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = MyCollectionViewCell.dequeue(from: collectionView, for: indexPath)
        guard let largeIndexPath = cachedMapEntries[indexPath] else { return cell }

        // retrieve the data at largeIndexPath.section, largeIndexPath.item
        // configure cell accordingly
        cell.addDebugText("section: \(largeIndexPath.section)\nitem: \(largeIndexPath.item)")
        return cell
    }
}

接下来，让我们创建 UICollectionViewLayout 来帮助定位和协调数据源。为简单起见，单元格使用 100x100 的固定大小，每个部分都紧挨着显示，每行的单元格都排在左侧。

大数据源布局.swift：

import UIKit

class LargeDataSourceLayout: UICollectionViewLayout {

    let cellSize = CGSize(width: 100, height: 100)

    var cellsPerRow: CGFloat {
        guard let collectionView = self.collectionView else { return 1.0 }
        return (collectionView.frame.size.width / cellSize.width).rounded(.towardZero)
    }

    var cacheNumberOfItems: [Int] = []
    private func refreshNumberOfItemsCache() {
        guard
            let largeDataSource = self.collectionView?.dataSource as? LargeDataSourceProtocol
            else { return }
        cacheNumberOfItems.removeAll()
        for section in 0 ..< largeDataSource.largeNumberOfSections() {
            let itemsInSection: Int = largeDataSource.largeNumberOfItems(in: section)
            cacheNumberOfItems.append(itemsInSection)
        }
    }

    var cacheRowsPerSection: [Int] = []
    private func refreshRowsPerSection() {
        let itemsPerRow = Float(self.cellsPerRow)
        cacheRowsPerSection.removeAll()
        for section in 0 ..< cacheNumberOfItems.count {
            let numberOfItems = Float(cacheNumberOfItems[section])
            let numberOfRows = (numberOfItems / itemsPerRow).rounded(.awayFromZero)
            cacheRowsPerSection.append(Int(numberOfRows))
        }
    }

    override var collectionViewContentSize: CGSize {
        // To do: update logic as per your requirements
        refreshNumberOfItemsCache()
        refreshRowsPerSection()
        let totalRows = cacheRowsPerSection.reduce(0, +)
        return CGSize(width: self.cellsPerRow * cellSize.width,
                      height: CGFloat(totalRows) * cellSize.height)
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        // To do: implement logic to compute the attributes for a specific item
        return nil
    }

    private func originForRow(_ row: Int) -> CGFloat {
        return CGFloat(row) * cellSize.height
    }

    private func pathsInRow(_ row: Int) -> [IndexPath] {
        let itemsPerRow = Int(self.cellsPerRow)
        var subRowIndex = row
        for section in 0 ..< cacheRowsPerSection.count {
            let rowsInSection = cacheRowsPerSection[section]
            if subRowIndex < rowsInSection {
                let firstItem = subRowIndex * itemsPerRow
                let lastItem = min(cacheNumberOfItems[section],firstItem+itemsPerRow) - 1
                var paths: [IndexPath] = []
                for item in firstItem ... lastItem {
                    paths.append(IndexPath(item: item, section: section))
                }
                return paths
            } else {
                guard rowsInSection <= subRowIndex else { return [] }
                subRowIndex -= rowsInSection
            }
        }
        // if caches are properly updated, we should never reach here
        return []
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let largeDataSource = self.collectionView?.dataSource as? LargeDataSourceProtocol else { return nil }

        let firstRow = max(0,Int((rect.minY / cellSize.height).rounded(.towardZero)))
        var row = firstRow
        var attributes: [UICollectionViewLayoutAttributes] = []
        repeat {
            let originY = originForRow(row)
            if originY > rect.maxY {
                return attributes
            }

            var originX: CGFloat = 0.0
            for largeIndexPath in pathsInRow(row) {
                let indexPath = largeDataSource.associateLargeIndexPath(largeIndexPath)
                let itemAttribute = UICollectionViewLayoutAttributes(forCellWith: indexPath)
                itemAttribute.frame = CGRect(x: originX, y: originY, width: cellSize.width, height: cellSize.height)
                attributes.append(itemAttribute)
                originX += cellSize.width
            }

            row += 1
        } while true
    }
}

那里发生了一些事情，并且有大量基于用例的优化空间，但概念就在那里。为了完成，下面是相关的代码和应用程​​序预览。

MyCollectionViewCell.swift：

import UIKit

class MyCollectionViewCell: UICollectionViewCell {

    static let identifier = "MyCollectionViewCell"

    static func dequeue(from collectionView: UICollectionView, for indexPath: IndexPath) -> MyCollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath) as? MyCollectionViewCell ?? MyCollectionViewCell()
        cell.contentView.backgroundColor = UIColor.random()
        return cell
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        removeDebugLabel()
    }

    private func removeDebugLabel() {
        self.contentView.subviews.first?.removeFromSuperview()
    }

    func addDebugText(_ text: String) {
        removeDebugLabel()
        let debugLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        debugLabel.text = text
        debugLabel.numberOfLines = 2
        debugLabel.font = UIFont.systemFont(ofSize: UIFont.smallSystemFontSize)
        debugLabel.textColor = UIColor.black
        debugLabel.textAlignment = .center
        self.contentView.addSubview(debugLabel)
    }
}

UIColor+random.swift：

import UIKit

extension UIColor {
    static func random() -> UIColor {
        //random color
        let hue = CGFloat(arc4random() % 256) / 256.0
        let saturation = (CGFloat(arc4random() % 128) / 256.0) + 0.5 // 0.5 to 1.0, away from white
        let brightness = (CGFloat(arc4random() % 128) / 256.0 ) + 0.5 // 0.5 to 1.0, away from black
        return UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 1.0)
    }
}