IGListKit实现支付宝首页简述

前言

IGListKit是GitHub上Instagram开源的UICollectionView框架。

image.png

简单了解一下IGListKit的API

• ListAdapter调用更新UI的API的入口, 它帮我们桥接了UICollectionView的一些API

• IGListAdapterDataSource是一个DataSource协议

/// 返回数据源数组
- (NSArray<id <IGListDiffable>> *)objectsForListAdapter:(IGListAdapter *)listAdapter;
/// 返回不同的sectionController
- (IGListSectionController *)listAdapter:(IGListAdapter *)listAdapter sectionControllerForObject:(id)object;
- (nullable UIView *)emptyViewForListAdapter:(IGListAdapter *)listAdapter;

• ListSectionController

就是每一个模块对应的SectionController，单独的模块数据，单独的cell样式

• ListDiffable

model实现的协议方法

- (nonnull id<NSObject>)diffIdentifier {
    return self;
}
- (BOOL)isEqualToDiffableObject:(nullable id<IGListDiffable>)object {
    return [self isEqual:object];
}

IGListKit框架笔者了解的也不多，毕竟刚简单了解查看了一下，本着直接莽的原则，先写个demo看下实现方式，记录一下实现的过程, 实现方式比较常规化。

写之前先说一下笔者遇到的场景问题：

1. 类文件创建很多，很多，写的时候有时候都忘了自己该往哪里写了，本项目所用都是本地数据，网络处理、刷新的一些场景逻辑加入的话，会更多一些。

2. UICollectionView的FlowLayout自定义问题，支付宝首页模块有非默认类型的Layout布局，因此首先考虑自定义Layout，自定义Layout计算布局尝试了好几次实现都达不到效果(对IGListKit自定义Layout暂无了解...)，最后在当前SectionController自己处理cell里面的不同布局。

3. UICollectionView的圆角问题，遇到了圆角一直未生效的问题，圆角写惯了这种方式

self.cycleScrollControl.layer.masksToBounds = YES;
self.cycleScrollControl.layer.cornerRadius = 10;

或者这种方式

self.contentView.layer.masksToBounds = YES;
self.contentView.layer.cornerRadius = 10;

但是CollectionViewCell的圆角貌似需要这种方式

self.layer.masksToBounds = NO;
self.layer.cornerRadius = 10;

大致实现的UI布局样式

Simulator.png

支付宝首页结构分析

把支付宝分成几个sectionController，头部的sectionController，消息提醒模块的sectionController，轮播图的的sectionController以及最后新闻列表页的sectionController

1. 初始化IGListKit

实现IGListAdapterDataSource协议的三个方法

image.png

2. 本地数据的处理及刷新布局

image.png

3. 项目里面数据结构处理

本地数据是创建了两个模型嵌套，因为我不知道支付宝首页这种页面，首页会有几个接口，当然，也不可能是笔者这种串行等待场景，一般都是merge和concat嵌套使用，这里的本地数据仅当个参考和demo使用

image.png

4. 首页头部的SectionController又分为 自定义View页面和UICollectionView的场景处理

我是在首页SectionController的cell里面初始化创建了自己需要的View页面和一个新的collectionView，去处理里面的业务UI，因为高度是根据ViewModel里面的数据已经动态计算好了，因此collectionView的高度布局，仅需要距离底部间距即可。

image.png

在cell里面添加collectionView 并在当前页面实现IGListAdapterDataSource的三个方法。

image.png

总结

项目结构就是不停的创建SectionController、UICollectionViewCell, 然后计算每一个SectionController的itemSize、sectionEdgeInsets、sectionLineSpacing、sectionItemSpacing。

总而言之、、因为笔者写代码实现比较常规化，因此用IGListKit的感想就是，代码和类整体是很多的，不过每个类的代码很少，看着项目结构清晰一下，改动起来比较方便些。

demo地址