一个轻量级的数据驱动列表框架 YHListKit

GitHub 源码地址

YHListKit 是一个基于 UICollectionView 的、轻量级的数据驱动列表框架，其核心思想在于经过 Adapter 模式将繁琐的 UICollectionView 相关代理方法转变成数据驱动的接口，更贴近人类的思惟方式，同时还将注册 cell 和 dequeue cell 的逻辑封装到了内部。另外，还经过借助消息转发机制，将 UICollectionViewDelegate、UIScrollViewDelegate 等代理方法由中间人转发出来，以供外面的业务方在须要时可使用。

特性

• 基于 UICollectionView 的适配器，不须要再面对繁琐的 register -> data source -> dequeue 流程
• 真正的数据驱动
• 自动缓存 cell/section header/section footer 的高度
• 使用了面向协议的设计，去耦合
• 不须要继承，即插即用，无侵入性

预览效果图

架构

原来建立实现一个列表须要跟 UICollectionView 繁琐的 API 打交道：

1. 建立 UICollectionView；
2. 注册 cell；
3. 解析数据/组装数据；
4. 至少实现 3 个代理方法，很是繁琐；
5. reload data；

使用 YHListKit 以后只须要跟数据搞好关系：

1. 建立 UICollectionView；
2. 解析数据/组装数据（包含 view model）；
3. 建立 YHCollectionViewAdapter，传入数据，绑定 UICollectionView；
4. reload data；

程序的本质就是处理数据，UI 是数据的表现层。对于软件工程师来说，最理想的效果就是写一个配置文件，就能看到效果。YHListKit 所作的就是，去掉解析数据以外的多余步骤，让咱们只须要关心数据，就是这么简单。

类、协议	功能
YHCollectionViewCellModel、YHCollectionViewSectionModel	表征 cell、 section header 和 section footer 相关数据的 view model
YHCollectionViewAdapter	包装 UICollectionView 代理方法的核心类，将代理回调形式的接口转换成 view model 形式的数据驱动接口
YHCollectionViewCell、YHCollectionViewSectionHeaderFooter	定义 cell 和 section header、footer 的通用接口，用来绑定 view model 数据，以及获取高度
MessageInterceptor	处理消息转发的拦截器

使用方法

1. 建立 collection view（这一步跟平时使用 UICollectionView 的代码同样）：

self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds
collectionViewLayout:self.collectionViewLayout]; // 这里也可使用本身的 layout
self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.collectionView.backgroundColor = [UIColor colorWithRed:244 green:244 blue:244 alpha:1.0];
self.collectionView.alwaysBounceVertical = YES;
[self.view addSubview:self.collectionView];

复制代码

2. 建立 YHCollectionViewAdapter ，绑定 collectionView，设置代理：

self.adapter = [[YHCollectionViewAdapter alloc] init];
self.adapter.collectionView = self.collectionView;    // 绑定 collection view
self.adapter.collectionViewDelegate = self;           // 设置代理不是必需的，视业务状况而定
self.adapter.delegate = self;                         // 设置代理不是必需的，视业务状况而定
复制代码

3. 设置 view model 数据，也就是建立 section model 和 cell model，配置相关数据（注：这里仅仅是举个例子，你能够配置任何你想要展现的数据，只要符合跟示例代码中相似的数据结构便可）：

// 能够理解为一个 table view 的数据源由多个 section model 组成，每一个 sectionModel 包括 header 和 footer 相关的信息、cell models、以及 section 自己的信息。详见 YHCollectionViewSectionModel 和 YHCollectionViewCellModel 的头文件。

NSMutableArray *sections = [NSMutableArray array];

for (int section = 0; section < 4; section++) {

	BOOL hasMultiColumns = section % 2;

    // 建立 section model
    YHCollectionViewSectionModel *sectionModel = [[YHCollectionViewSectionModel alloc] init];
    sectionModel.sectionIdentifier = [NSString stringWithFormat:@"section_id_%@", @(section)];  // 设置 section 的惟一标识，可选
    NSMutableArray *rows = [NSMutableArray array];
    for (int row = 0; row < 10; row++) {

        // 建立 cell model
        YHCollectionViewCellModel *cellModel = [[YHCollectionViewCellModel alloc] init];
        cellModel.dataModel = [NSString stringWithFormat:@"%i - %i", section, row]; // 设置 model 数据
        cellModel.cellClass = [SCCutomCollectionViewCell class];                    // 设置 cell class
        if (hasMultiColumns) {
                cellModel.cellWidth = 160;
                cellModel.cellHeight = 160;
         } else {
                cellModel.cellHeight = 70;  // 设置 cell 高度，也能够在对应的 cell 中实现相应的协议方法来实现
         }

        [rows addObject:cellModel];
    }

    sectionModel.cellModels = rows; // 设置该 section 的 cell model 集合
    sectionModel.headerClass = [SCCollectionSectionHeaderView class]; // 设置 section header 的 class
    sectionModel.headerHeight = 50;                                   // 设置 section header 的 高度
    sectionModel.footerClass = [SCCollectionSectionFooterView class]; // 设置 section footer 的 class
    sectionModel.footerHeight = 20;                                   // 设置 section footer 的 高度
    
    if (hasMultiColumns) {
       // 还能够设置 section 的一些布局参数，好比实现一行两列的效果
        sectionModel.sectionInsets = UIEdgeInsetsMake(10, 20, 10, 20);
        sectionModel.minimumLineSpacing = 15;
    }
    
    [sections addObject:sectionModel];
}

// 传入数据
self.adapter.sectionModels = sections;

[self.collectionView reloadData];
复制代码

4. 除了在 view model 层设置 cell 、 section header 和 section footer 的高度以外，还能够在对应的 view 层设置高度，只须要实现 YHCollectionViewCell 和 YHCollectionViewSectionHeaderFooter 协议中定义的方法便可：

@protocol YHCollectionViewCell <NSObject>

...

+ (CGFloat)cellHeightWithModel:(YHCollectionViewCellModel *)model;
+ (CGFloat)cellWidthWithModel:(YHCollectionViewCellModel *)model;


@end
复制代码

@protocol YHCollectionViewSectionHeaderFooter <NSObject>

...

+ (CGFloat)heightWithModel:(YHCollectionViewSectionModel *)model;
+ (CGFloat)widthWithModel:(YHCollectionViewSectionModel *)model;

@end
复制代码

更详细的使用介绍见示例代码 Example。

系统要求

该项目最低支持 iOS 7.0。

TODO

• 完善注释和文档
• Swift Version
• Carthage Support

致谢❤️

感谢 bestswifter 和 IGListKit 带来的启发。

若是你有好的想法和问题，欢迎提 issue 和 pull request。🤝

许可证

该项目使用的是 MIT 许可证。 详情见 LICENSE 文件。