ecerney / collectionviewwaterfalllayout

Pinterest inspired layout for UICollectionViews

CollectionViewWaterfallLayout

Pinterest inspired layout for UICollectionViews

Note: Updated for Swift 5.0. This was a big upgrade from Swift 2.0, so please submit an issue / fix if you run into anything. Thanks!

CollectionViewWaterfallLayout is a subclass of UICollectionViewLayout written completely in Swift. This class is based off CHTCollectionViewWaterfallLayout which was written by chiahsien in Objective-C. This class tries to use as many new Swifty things to keep the code updated with current design patterns.

The original layout was inspired by Pinterest.

Features

• Easy to use - If you are used to working with UICollectionViewFlowLayout, this should feel natural
• Highly Customizable
• Outstanding Performance
• Supports headers and footers

Screen Shots

Prerequisites

• ARC
• iOS 8+
• Xcode 10+
• Swift 5.0

Installation

CollectionViewWaterfallLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "CollectionViewWaterfallLayout"

How to Use

Make sure to import the pod in the files you plan to use it in:

import CollectionViewWaterfallLayout

Check out the demo project for an example using storyboards to set up the views, and that programmatically creates and customizes the waterfall layout.

Customizable Properties

Below are the public properties and their default values that you can change to customize the layout

var columnCount: Int = 2
var minimumColumnSpacing: Float = 10.0
var minimumInteritemSpacing: Float = 10.0
var headerHeight: Float = 0.0
var footerHeight: Float = 0.0
var headerInset: UIEdgeInsets = .zero
var footerInset: UIEdgeInsets = .zero
var sectionInset: UIEdgeInsets = .zero

Required Protocol

Your collection view's delegate must conforms to CollectionViewWaterfallLayoutDelegate protocol and implement the required method, all you need to do is return the original size of the item:

func collectionView(collectionView: UICollectionView, layout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize

Optional Protocol

You can customize the layout properties dynamically by using the following optional protocol methods:

func collectionView(_ collectionView: UICollectionView, layout: UICollectionViewLayout, heightForHeaderInSection section: Int) -> Float

func collectionView(_ collectionView: UICollectionView, layout: UICollectionViewLayout, heightForFooterInSection section: Int) -> Float

func collectionView(_ collectionView: UICollectionView, layout: UICollectionViewLayout, insetForSection section: Int) -> UIEdgeInsets

func collectionView(_ collectionView: UICollectionView, layout: UICollectionViewLayout, insetForHeaderInSection section: Int) -> UIEdgeInsets

func collectionView(_ collectionView: UICollectionView, layout: UICollectionViewLayout, insetForFooterInSection section: Int) -> UIEdgeInsets

func collectionView(_ collectionView: UICollectionView, layout: UICollectionViewLayout, minimumInteritemSpacingForSection section: Int) -> Float

Limitation

• Only vertical scrolling is supported.
• No decoration view.

License

CollectionViewWaterfallLayout is available under the MIT license. See the LICENSE file for more info.

collectionviewwaterfalllayout's Issues

collectionView property is now optional

The collectionView property of UICollectionViewLayout is now optional, which leads to errors compiling CollectionViewWaterfallLayout.

No decoration view

No decoration View means we cannot add any other subviews in the cell apart from the imageView..?

And please try to write comments in the class so that one trying to understand your code can do so!!

Dynamic cell sizes

Is there a way to achieve this? It seems the library wants to hardcode the size of the cells in the delegate :/

Switch layout

Let's say I would like to be able to switch between a gridlayout like this and a listlayout? (1 item per row) What would be the preferred way to do it?

Without StoryBoard ?

I am having a hard time getting this work without StoryBoard, Am I missing something ?

Bests

collection view margin from top

when view loads top constraint of collection view is ticket to top and after a second it comes down for about 20pt.

header height is = 0
insets are 0 .
all are 0 . how can i fix this ??

Using pod

I had to import CollectionViewWaterfallLayout to stop xcode from throwing error Use of undeclared type 'CollectionViewWaterfallLayout'. Should that be added to the instructions on the readme file?

Kindly update this library to latest swift it is not running in latest swift

Method 'collectionView(:layout:sizeForItemAt:)' with Objective-C selector 'collectionView:layout:sizeForItemAtIndexPath:' conflicts with method 'collectionView(:layout:sizeForItemAtIndexPath:)' with the same Objective-C selector

This repo is dead.

swift 2.0 update error

When i update xcode to 7.0 ,this will throw many erros. I wish you to update 'CollectionViewWaterfallLayout', thank you very much.

Looking to add subview within cell. How to customize the cells?

@ecerney
Looking to add subview within cell. How to customize the cells?

I'm looking for a way to customize / or even use an external xib file for this but still enable the dynamic cell width and height. But how should I be adding subviews into the layout? Thanks!

Getting error on compiling in xcode beta 5

Is there a good implementation of using this with Alamofire async requests for infinite scrolling?

Is there a good implementation of using this with Alamofire async requests for infinite scrolling? Thanks!

Will there be a swift 3 version of this?

Will there be a swift 3 version of this?

Updates for XCode 7.3?

Updates for XCode 7.3?

Collection View contentSize issue

While you delete cells using this layout the collection view does not update it's content size.
Crashing on deleting cells if you use cache if statement.

Cocoapods error?

I'm getting the following errors when using cocoapods following your demo:

Use of unresolved identifier 'CollectionViewWatefallElelementKindSectionHeader'
Use of unresolved identifier 'CollectionViewWatefallElelementKindSectionFooter'

Any reason why this may be?

Would it be possible for you to make a quick demo app with the coacopod ?

Is this updated to work with latest xcode and swift? i'm getting errors for overriding instance method optional result type

Is this updated to work with latest xcode and swift? i'm getting errors for overriding instance method optional result type

Possible to achieve "staggered columns"?

I really like this layout, you can do so much with it. However I've run into a layout that I'm having issues creating. It should look like this:

Can this be achieved with this layout? If so, can you point me in the right direction?

Thank you.