IGListKit入门指南：构建高效iOS列表界面-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00274/article/details/148392360

IGListKit入门指南：构建高效iOS列表界面

IGListKit Instagram/IGListKit: 是 Instagram 开发的一个 iOS 列表库。适合对 iOS 和列表展示有兴趣的人，特别是想实现高效、简洁的列表展示的人。特点是提供了一套易用的 iOS 列表组件，支持可变高度单元格、自动布局、空数据占位图等功能，同时提供了示例代码和应用模板，具有很高的参考价值。项目地址: https://gitcode.com/gh_mirrors/igl/IGListKit

什么是IGListKit

IGListKit是Instagram团队开发的一个数据驱动的UICollectionView框架，专门用于构建灵活、高性能的列表界面。它通过创新的数据差异算法和模块化设计，解决了传统UICollectionView开发中的诸多痛点。

核心概念

在开始使用IGListKit之前，我们需要理解三个核心概念：

Section Controller：负责管理集合视图中的每个独立部分
List Adapter：连接数据源和集合视图的桥梁
Diffable Models：支持差异比较的数据模型

创建第一个列表

1. 创建Section Controller

Section Controller是IGListKit的核心组件，每个控制器负责管理一个数据段及其对应的UI。创建一个基本的Section Controller需要继承ListSectionController类并实现两个关键方法：

class MySectionController: ListSectionController {
    // 返回单元格大小
    override func sizeForItem(at index: Int) -> CGSize {
        return CGSize(width: collectionContext!.containerSize.width, height: 50)
    }
    
    // 配置并返回单元格
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(
            of: MyCell.self, 
            for: self, 
            at: index
        ) as? MyCell else {
            fatalError("无法获取单元格")
        }
        cell.configure(with: object as! MyModel)
        return cell
    }
}

2. 设置UI基础结构

在视图控制器中，我们需要配置UICollectionView和ListAdapter：

class MyViewController: UIViewController {
    lazy var adapter: ListAdapter = {
        let updater = ListAdapterUpdater()
        return ListAdapter(updater: updater, viewController: self)
    }()
    
    let collectionView = UICollectionView(
        frame: .zero, 
        collectionViewLayout: UICollectionViewFlowLayout()
    )
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        collectionView.frame = view.bounds
    }
}

3. 实现数据源

数据源协议是连接数据和UI的关键：

extension MyViewController: ListAdapterDataSource {
    // 返回数据对象数组
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return dataArray // 你的数据模型数组
    }
    
    // 根据数据类型返回对应的Section Controller
    func listAdapter(
        _ listAdapter: ListAdapter,
        sectionControllerFor object: Any
    ) -> ListSectionController {
        if object is MyModel {
            return MySectionController()
        }
        return DefaultSectionController()
    }
    
    // 空视图（可选）
    func emptyView(for listAdapter: ListAdapter) -> UIView? {
        return nil
    }
}

数据差异比较

IGListKit的核心优势在于其高效的差异比较算法，它基于Paul Heckel的论文"A technique for isolating differences between files"实现，时间复杂度为O(n)。

实现Diffable协议

要使自定义模型支持差异比较，需要实现ListDiffable协议：

class User: ListDiffable {
    let id: Int
    var name: String
    
    init(id: Int, name: String) {
        self.id = id
        self.name = name
    }
    
    // 唯一标识符，不应改变
    func diffIdentifier() -> NSObjectProtocol {
        return id as NSObjectProtocol
    }
    
    // 比较内容是否相等
    func isEqual(toDiffableObject object: ListDiffable?) -> Bool {
        guard let other = object as? User else { return false }
        return name == other.name
    }
}

差异比较的工作原理

当数据更新时，IGListKit会：

比较新旧数据集的差异标识符
对相同标识符的对象调用isEqual方法
自动计算出插入、删除、移动和更新操作
以最小化变更的方式更新UI

高级功能

工作范围(Working Range)

工作范围允许你对即将显示的Section Controller进行预处理：

let adapter = ListAdapter(
    updater: ListAdapterUpdater(),
    viewController: self,
    workingRangeSize: 2 // 屏幕外2个单位就开始预处理
)

// 在Section Controller中实现
class MySectionController: ListSectionController {
    weak var workingRangeDelegate: ListWorkingRangeDelegate?
    
    // 进入工作范围时调用
    func listAdapter(
        _ listAdapter: ListAdapter,
        sectionControllerWillEnterWorkingRange sectionController: ListSectionController
    ) {
        // 预加载数据或图片
    }
}

补充视图(Supplementary Views)

添加页眉、页脚等补充视图：

class MySectionController: ListSectionController {
    override init() {
        super.init()
        supplementaryViewSource = self
    }
}

extension MySectionController: ListSupplementaryViewSource {
    func supportedElementKinds() -> [String] {
        return [UICollectionView.elementKindSectionHeader]
    }
    
    func viewForSupplementaryElement(
        ofKind elementKind: String,
        at index: Int
    ) -> UICollectionReusableView {
        // 返回配置好的补充视图
    }
    
    func sizeForSupplementaryView(
        ofKind elementKind: String,
        at index: Int
    ) -> CGSize {
        return CGSize(width: collectionContext!.containerSize.width, height: 40)
    }
}