Coder Social home page Coder Social logo

sugers3 / chtcollectionviewwaterfalllayout Goto Github PK

View Code? Open in Web Editor NEW

This project forked from chiahsien/chtcollectionviewwaterfalllayout

0.0 0.0 0.0 21.38 MB

The waterfall (i.e., Pinterest-like) layout for UICollectionView.

License: MIT License

Ruby 1.89% Objective-C 63.72% Swift 34.39%

chtcollectionviewwaterfalllayout's Introduction

CHTCollectionViewWaterfallLayout

Carthage compatible Swift Package Manager compatible Version Platform Build Status

CHTCollectionViewWaterfallLayout is a subclass of UICollectionViewLayout, and it trys to imitate UICollectionViewFlowLayout's usage as much as possible.

This layout is inspired by Pinterest.

Screen Shots

2 columns

Features

  • Easy to use, it tries to imitate UICollectionViewFlowLayout's usage as much as possible.
  • Highly customizable.
  • Outstanding performance, try 10,000+ items and see the smoothness for yourself.
  • Support header and footer views.
  • Different column counts in different sections.

Requirements

  • iOS 9+ / tvOS 9+
  • Objective-C or Swift 4.2

How to install

  • CocoaPods

    • Add pod 'CHTCollectionViewWaterfallLayout' to your Podfile.
    • If you prefer Objective-C, pod 'CHTCollectionViewWaterfallLayout/ObjC' is ready for you.
  • Carthage

    • Add github chiahsien/CHTCollectionViewWaterfallLayout to your Cartfile.
  • Swift Package Manager

    • Add it to the dependencies value of your Package.swift.
    dependencies: [
      .package(url: "https://github.com/chiahsien/CHTCollectionViewWaterfallLayout.git", from: "0.9.9")
    ]
    
  • Manual

    • Copy CHTCollectionViewWaterfallLayout.h/m or CHTCollectionViewWaterfallLayout.swift to your project.

How to Use

Read the demo codes and CHTCollectionViewWaterfallLayout.h header file for more information.

Step 1

Below lists the properties for you to customize the layout. Although they have default values, I strongly recommend you to set up at least the columnCount property to suit your needs. The itemRenderDirection property is an enum which decides the order in which your items will be rendered in subsequent rows. For eg. Left-Right | Right-Left | Shortest column filling up first.

@property (nonatomic, assign) NSInteger columnCount;
@property (nonatomic, assign) CGFloat minimumColumnSpacing;
@property (nonatomic, assign) CGFloat minimumInteritemSpacing;
@property (nonatomic, assign) CGFloat headerHeight;
@property (nonatomic, assign) CGFloat footerHeight;
@property (nonatomic, assign) UIEdgeInsets sectionInset;
@property (nonatomic, assign) ItemRenderDirection itemRenderDirection;

Step 2

Your collection view's delegate (which often is your view controller) must conforms to CHTCollectionViewDelegateWaterfallLayout protocol and implements the required method, all you need to do is return the original size of the item:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

Limitation

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

Who is using it

Please let me know if your app is using this library. I'm glad to put your app on the list :-)

  • F3PiX F3PiX is a series of apps which gives you a concise, curated collection of pictures by professional (Dutch) photographers according to a specific theme. You can use the pictures freely for your own work.
  • GroupMe for iOS GroupMe - A Home for All the Groups in Your Life.
  • Flickr Access and organize your photos from anywhere.
  • Tumblr Post whatever you want to your Tumblr. Follow other people who are doing the same. You’ll probably never be bored again.
  • Funliday The best trip planning app in the world!
  • Imgur Funny GIFs, Memes, and Images!
  • DealPad DealPad gives you access to the UK’s hottest Deals, Voucher Codes and Freebies in the palm of your hand.
  • Teespring Shopping Browse and purchase shirts, mugs, totes and more!

License

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

Changelog

Refer to the Releases page.

chtcollectionviewwaterfalllayout's People

Contributors

allevato avatar apollozhu avatar bm-i avatar bogidon avatar boradori avatar cbowns avatar ccwasden avatar chiahsien avatar demonnico avatar dlackty avatar flagoworld avatar jamztang avatar master-nevi avatar neilkimmett avatar olivercameron avatar przytua avatar rafaelcr avatar sebastiankumor avatar sfader avatar tcirwin avatar timkettering avatar tomcarey avatar u1tkzw avatar vvit avatar wcbyrne avatar wpk avatar yanamura avatar ywinters avatar yydd avatar zdavison 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.