GithubHelp home page GithubHelp logo

miguelramosfdz / chtcollectionviewwaterfalllayout Goto Github PK

View Code? Open in Web Editor NEW

This project forked from chiahsien/chtcollectionviewwaterfalllayout

0.0 1.0 0.0 2.28 MB

The waterfall (i.e., Pinterest-like) layout for UICollectionView introduced in iOS 6.

License: MIT License

chtcollectionviewwaterfalllayout's Introduction

CHTCollectionViewWaterfallLayout

iOS 6 introduced a new feature called UICollectionView. CHTCollectionViewWaterfallLayout is a subclass of UICollectionViewLayout. This layout is inspired by Pinterest. It also is compatible with PSTUICollectionView.

Screen Shots

2 columns 3 columns

Prerequisite

  • ARC
  • Xcode 4.4+, which supports literals syntax.
  • iOS 6+, or
  • iOS 4.x/5.x, with [PSTUICollectionView][1].

How to Use

Read the demo codes for detail information.

Step 1

There are four properties for you to set up.

@property (nonatomic, weak) id<CHICollectionViewDelegateWaterfallLayout> delegate;
@property (nonatomic, assign) NSUInteger columnCount; // How many columns
@property (nonatomic, assign) CGFloat itemWidth; // Width for every column
@property (nonatomic, assign) UIEdgeInsets sectionInset; // The margins used to lay out content in a section

It's your responsibility to set up delegate, columnCount, and itemWidth, they are required. But sectionInset is optional.

Step 2

And you also need to implement one method in your delegate for the CHTCollectionViewDelegateWaterfallLayout protocol.

- (CGFloat)collectionView:(UICollectionView *)collectionView
                   layout:(CHTCollectionViewWaterfallLayout *)collectionViewLayout
 heightForItemAtIndexPath:(NSIndexPath *)indexPath;

Step 3 (Optional)

If you need to support iOS 4.x/5.x and you have installed PSTUICollectionView, then you NEED to modify some codes.

Quoted from PSTUICollectionView README file:

If you want to have PSTCollectionView on iOS4.3/5.x and UICollectionView on iOS6, use PSUICollectionView (basically add PS on any UICollectionView class to get auto-support for older iOS versions)* If you always want to use PSTCollectionView, use PSTCollectionView as class names. (replace the UI with PST)

That's all! Easy, right?

Limitation

  • Only one section is supported.
  • Only vertical scrolling is supported.
  • No supplementary view and decoration view.

License

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

Known Issue

None, so far.

chtcollectionviewwaterfalllayout's People

Contributors

bm-i avatar chiahsien avatar jamztang avatar

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.