Giter Club home page Giter Club logo

jekscrollablesectioncollectionviewlayout's Introduction

JEKScrollableSectionCollectionViewLayout

A drop-in replacement of UICollectionViewFlowLayout which allows horizontally scrolling sections. Uses UICollectionViewDelegateFlowLayout to query layout information, so usually no code changes are needed to replace your current flow layout with this one.

Note however that this is not a subclass of UICollectionViewFlowLayout, so it might not respond to certain messages, for example estimatedItemSize which is not implemented (yet). This also means that it will not read measurements set in interface builder on a UICollectionViewFlowLayout, and you have to set the measurements in code. Check the example project for a full setup.

Animated example

Features

  • Properly supports inserts/deletes/moves (even between different sections)
    • ... since it does not create multiple UICollectionViews like this problem is normally solved
  • (almost) drop in replacement for UICollectionViewFlowLayout
  • A simple layout object - doesn't need to subclass or modify UICollectionView in any way
    • ... leading to efficient reuse of cells and support for prefetching
  • Section background views (as optional supplementary views)

Installation

  • CocoaPods: pod 'JEKScrollableSectionCollectionViewLayout'
  • Simply copy JEKScrollableSectionCollectionViewLayout.h/.m into your project

Planned features

  • Support for sectionHeadersPinToVisibleBounds

Section backgrounds

The layout has support for showing background views behind each seaction. To enable it, you have to set layout.showsSectionBackgrounds = YES when setting up your layout object.

Then, collectionView:viewForSupplementaryElementOfKind:atIndexPath: will be called in your data source with the JEKCollectionElementKindSectionBackground kind. Dequeue and return a view like you would normally with section headers and footers.

Observing section scrolling

The JEKCollectionViewDelegateScrollableSectionLayout-protocol allows you to observe and manipulate scrolling per horizontal section. To use it, simply conform to this protocol instead of UICollectionViewDelegateFlowLayout (which is then implicitly conformed).

The protocol closely resembles UIScrollViewDelegate and exposes the following optional methods:

- (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;

Usage example

Since this is a drop-in replacement for UICollectionViewFlowLayout, normally you can just change the layout object in your current flow-layout based collection views.

Here's an example of a bare minimum UICollectionViewController with two horizontal sections.

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
    }
}

jekscrollablesectioncollectionviewlayout's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.