JEKScrollableSectionCollectionViewLayout 1.3.0

JEKScrollableSectionCollectionViewLayout 1.3.0

×

由 Joel Ekström 维护。

JEKScrollableSectionCollectionViewLayout 1.3.0

  • 由
  • Joel Ekström

JEKScrollableSectionCollectionViewLayout

是 UICollectionViewFlowLayout 的一个现成替代品，它允许水平滚动分区。使用 UICollectionViewDelegateFlowLayout 查询布局信息，因此通常不需要修改代码来将当前的流布局替换为此布局。

请注意，这 不是 UICollectionViewFlowLayout 的子类，所以它可能不会响应某些消息，例如 estimatedItemSize（尚未实现）。这也意味着它不会读取在接口构建器中设置的 UICollectionViewFlowLayout 的测量值，您必须以代码设置这些测量值。请检查示例项目以获取完整设置。

Animated example

功能

  • 正确支持插入/删除/移动（即使在不同的分区之间）
    • ... 因为它不会像通常解决此问题那样创建多个 UICollectionView。
  • (几乎)是 UICollectionViewFlowLayout 的现成替代品
  • 简单布局对象 - 不需要子类或以任何方式修改 UICollectionView。
    • ... 这导致高效重用单元格和支持预取。
  • 分区背景视图（作为可选补充视图）

安装

  • CocoaPods: pod 'JEKScrollableSectionCollectionViewLayout'
  • 只需将 JEKScrollableSectionCollectionViewLayout.h/.m 复制到您的项目中即可。

计划特性

  • 支持 sectionHeadersPinToVisibleBounds

章节背景

布局支持显示在每个章节后面的背景视图。要启用该功能，您需要在设置布局对象时将layout.showsSectionBackgrounds = YES设置。

然后，collectionView:viewForSupplementaryElementOfKind:atIndexPath:将在具有JEKCollectionElementKindSectionBackground类型的您的数据源中调用。就像通常处理章节头部和尾部一样，解列并返回一个视图。

监听章节滚动

JEKCollectionViewDelegateScrollableSectionLayout 协议允许您观察和操作每个横向章节的滚动。要使用它，只需通过这个协议而不是 UICollectionViewDelegateFlowLayout（如此，则隐式遵守）来遵守协议。

此协议与 UIScrollViewDelegate 非常相似，并公开了以下可选方法

- (void)collectionView:(UICollectionView *)collectionView layout:(JEKScrollableSectionCollectionViewLayout *)layout section:(NSUInteger)section didScrollToOffset:(CGFloat)horizontalOffset;
- (void)collectionView:(UICollectionView *)collectionView layout:(JEKScrollableSectionCollectionViewLayout *)layout sectionWillBeginDragging:(NSUInteger)section;
- (void)collectionView:(UICollectionView *)collectionView layout:(JEKScrollableSectionCollectionViewLayout *)layout sectionWillEndDragging:(NSUInteger)section withVelocity:(CGFloat)velocity targetOffset:(inout CGFloat *)targetHorizontalOffset;
- (void)collectionView:(UICollectionView *)collectionView layout:(JEKScrollableSectionCollectionViewLayout *)layout sectionDidEndDragging:(NSUInteger)section willDecelerate:(BOOL)decelerate;
- (void)collectionView:(UICollectionView *)collectionView layout:(JEKScrollableSectionCollectionViewLayout *)layout sectionWillBeginDecelerating:(NSUInteger)section;
- (void)collectionView:(UICollectionView *)collectionView layout:(JEKScrollableSectionCollectionViewLayout *)layout sectionDidEndDecelerating:(NSUInteger)section;

使用示例

由于这是一个对 UICollectionViewFlowLayout 的直接替换，通常您只需更改当前基于流布局的集合视图中的布局对象。

以下是一个带有两个横向章节的 UICollectionViewController 的基本示例。

class MyViewController: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let layout = JEKScrollableSectionCollectionViewLayout()
        layout.itemSize = CGSize(width: 50, height: 50);
        layout.headerReferenceSize = CGSize(width: 0, height: 22)
        layout.minimumInteritemSpacing = 5
        collectionView.collectionViewLayout = layout

        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "header")
    }

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

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

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = UIColor.gray
        return cell
    }

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "header", for: indexPath)
        header.backgroundColor = UIColor.blue
        return header
    }
}