UICollectionView replacement of UITableView. Do even more like Parallax Header, Sticky Section Header. Made for iOS 7.

Overview

CSStickyHeaderFlowLayout

Contributors

For anyone who'd like to be a contributor to the repository, please read the Contribution Guideline


Parallax, Sticky Headers, Growing image heading, done right in one UICollectionViewLayout.

Installation

Version Platform

Cocoapods

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

pod "CSStickyHeaderFlowLayout"

Carthage

CSStickyHeaderFlowLayout is also available with Carthage. Add github "CSStickyHeaderFlowLayout/CSStickyHeaderFlowLayout" to your Cartfile

Alternatively, you can just drag the files from CSStickyHeaderFlowLayout / Classes into your own project.

Usage (Swift/Code)

Documentation is coming soon. For now please open CSStickyHeaderFlowLayout.xcworkspace > SwiftDemo target.

Usage (CocoaPods/Objective-C/Storyboard)

To run the example project; clone the repo, and run pod install from the Project directory first.

1. Setting up the Sticky Section Header

Configure your collection view to use CSStickyHeaderFlowLayout. Here's an example on how you to do it in Storyboard.

Now all your section headers will get the sticky effect like table view. You can disable it with one line of code.

@property (nonatomic) BOOL disableStickyHeaders;

2. Setting up the Collection View Header

We'll be using supplementary views for our parallax header. Here's an example on how use a nib file for that purpose:

Register that nib file to your collection view controller in code:

#import "CSStickyHeaderFlowLayout.h"

- (void)viewDidLoad {

    [super viewDidLoad];

    // Locate your layout
    CSStickyHeaderFlowLayout *layout = (id)self.collectionViewLayout;
    if ([layout isKindOfClass:[CSStickyHeaderFlowLayout class]]) {
        layout.parallaxHeaderReferenceSize = CGSizeMake(320, 200);
    }

    // Locate the nib and register it to your collection view
    UINib *headerNib = [UINib nibWithNibName:@"CSGrowHeader" bundle:nil];
    [self.collectionView registerNib:headerNib
          forSupplementaryViewOfKind:CSStickyHeaderParallaxHeader
                 withReuseIdentifier:@"header"];

}

Implement -[UICollectionViewDataSource collectionView:viewForSupplementaryElementOfKind:atIndexPath:]

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

    // Check the kind if it's CSStickyHeaderParallaxHeader
    if ([kind isEqualToString:CSStickyHeaderParallaxHeader]) {

        UICollectionReusableView *cell = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                                            withReuseIdentifier:@"header"
                                                                                   forIndexPath:indexPath];

        return cell;

    } else if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        // Your code to configure your section header...
    } else {
        // other custom supplementary views
    }
    return nil;
}

That's it. You'll be able to get the header you wanted using the best practice.

Configuring other effects are really just the way how you setup the header cell, by combining different settings in the minimal exposed properties in CSStickyHeaderFlowLayout.h

@property (nonatomic) CGSize parallaxHeaderReferenceSize;
@property (nonatomic) CGSize parallaxHeaderMinimumReferenceSize;
@property (nonatomic) BOOL disableStickyHeaders;

Run the project examples and it'll shows you exactly how you achieve different effects.

Updates

  • 0.2.12: Add Swift 5 Demo

  • 0.2.11: Add support for carthage.

  • 0.2.10: Fixed issue because attributes were not copied and datasource might have been niled

  • 0.2.9: Remove Supplementry Header Layout Attribute to prevent crash when returning nil and while is CGSizeZero

  • 0.2.8: Fixed a visual issue when animating contentInsets #85 and crash when dragging cells #69

  • 0.2.7: Fixed scroll indicator covered by cell

  • 0.2.6: Fixing that section header being covered by cell after perform batch update

  • 0.2.5: Fixing a crash when quickly popping back to a view controller using the parallax header

  • 0.2.4: Possibly fix for a crash when parallaxHeaderReferenceSize is changed

  • 0.2.3: Enabled iPhone 6 screen sizes, reverted a patch and fixed a visual bug and content tapping bug.

  • 0.2.2: Fix 1px header and zIndex problem, thanks @m1entus and @Xyand

  • 0.2.1: Fix crash on reloadData in collection view when header is offscreen, thanks @jessesquires

  • 0.2: Added custom UICollectionViewLayoutAttributes to support more advanced example (Spotify App)

  • 0.1.1: Minor fixes for default number of sections, thanks @miwillhite

  • 0.1: Initial Release

Who's using it?

We've a wiki page for that, feel free to add your projects there!

Requirements

  • Xcode 5
  • iOS 7 (I haven't really test on iOS 6 but it should work if you're using iOS 6 compatible Storyboard)

Author

James Tang, [email protected]

License

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

Comments
  • NSInternalInconsistencyException when scrolling to the bottom

    NSInternalInconsistencyException when scrolling to the bottom

    Hi James. I'm struggling with an issue... I'm using your library in a collection view, and I noticed that sometimes the system raises an NSInternalInconsistencyException when scrolling to the bottom. It looks like it's correlated to the amount of cells displayed. I was able to recreate the issue in your sample, by providing only 2 sections, the first one with one item, the second one with 4. (You can find the sample in my fork).
    Here's the catch: it only happens when I compile with Xcode 5.1 on an iOS8 device (beta5). If I compile with Xcode6 everything goes smoothly. Given the circumstances it might not even be worth spending too much time fixing this, as it's probably a bug introduced in the latest beta, but if someone with the current iOS8 beta downloads an app from the store with this component, it might crash.
    Here's the full stack trace:

    2014-08-07 16:03:14.718 CSStickyHeaderFlowLayoutDemo[1538:270805] 
    *** Terminating app due to uncaught exception 'NSInternalInconsistencyException',
     reason: 'layout attributes for supplementary item at index path (<NSIndexPath: 0x1a07c410> {length = 2, path = 1 - 0}) 
    changed from <CSStickyHeaderFlowLayoutAttributes: 0x16d4a050> index path: (<NSIndexPath: 0x1a08e4c0> {length = 2, path = 1 - 0}); 
    element kind: (UICollectionElementKindSectionHeader); 
    frame = (0 330; 320 50); 
    zIndex = 1024;  
    to <CSStickyHeaderFlowLayoutAttributes: 0x1a097e80> index path: (<NSIndexPath: 0x1a07c410> {length = 2, path = 1 - 0}); 
    element kind: (UICollectionElementKindSectionHeader); 
    frame = (0 278.5; 320 50); 
    zIndex = 1024;  without invalidating the layout'
    

    anyway, thanks for your great work. :thumbsup:
    Cheers.

    opened by andreamazz 17
  • Error with  pods use_frameworks!

    Error with pods use_frameworks!

    "Definition of 'CSStickyHeaderFlowLayout' must be imported from module 'CSStickyHeaderFlowLayout.CSStickyHeaderFlowLayout' before it is required" and "duplicate interface definition" and "Property has a previous declaration" after start use pods with use_frameworks!

    help needed 
    opened by mblyk 10
  • Section header go behind cell when insert via performBatchUpdates

    Section header go behind cell when insert via performBatchUpdates

    If I use insert and performBatchUpdates instead of reloadData I always get the problem where header hidden behind cells output

    I also got example project https://dl.dropboxusercontent.com/u/2271974/CSStickyHeaderFlowLayout.zip, the part I change is this chunk of code

    - (void)add:(id)sender
    {
    
        [self.collectionView performBatchUpdates:^{
            NSArray *new = @[
                             @{@"Twitter":@"http://twitter.com"},
                             @{@"Facebook":@"http://facebook.com"},
                             @{@"Tumblr":@"http://tumblr.com"},
                             @{@"Pinterest":@"http://pinterest.com"},
                             @{@"Instagram":@"http://instagram.com"},
                             @{@"Github":@"http://github.com"},
                             @{@"Twitter":@"http://twitter.com"},
                             @{@"Facebook":@"http://facebook.com"},
                             @{@"Tumblr":@"http://tumblr.com"},
                             @{@"Pinterest":@"http://pinterest.com"},
                             @{@"Instagram":@"http://instagram.com"},
                             @{@"Github":@"http://github.com"},
                             ];
                self.sections = [self.sections arrayByAddingObjectsFromArray:new];
    
            NSMutableIndexSet *set = [NSMutableIndexSet indexSet];
            NSMutableArray *indexPaths = [NSMutableArray array];
    
            int startIndex = 0;
        [new enumerateObjectsUsingBlock:^(NSDictionary *item, NSUInteger idx, BOOL *stop) {
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:startIndex + idx];
            [indexPaths addObject:indexPath];
    
            [set addIndex:startIndex + idx];
    
        }];
    
            [self.collectionView insertSections:set];
            [self.collectionView insertItemsAtIndexPaths:indexPaths];
        } completion:nil];
    }
    
    opened by sarunw 10
  • NSInternalInconsistencyException crash in logs

    NSInternalInconsistencyException crash in logs

    Fatal Exception: NSInternalInconsistencyException layout attributes for supplementary item at index path (<NSIndexPath: 0xc000000000000016> {length = 2, path = 0 - 0}) changed from <CSStickyHeaderFlowLayoutAttributes: 0x14e6a1ad0> index path: (<NSIndexPath: 0xc000000000000016> {length = 2, path = 0 - 0}); element kind: (CSStickyHeaderParallexHeader); frame = (0 0; 0 0); to <CSStickyHeaderFlowLayoutAttributes: 0x151865db0> index path: (<NSIndexPath: 0xc000000000000016> {length = 2, path = 0 - 0}); element kind: (CSStickyHeaderParallexHeader); frame = (0 -1.33333; 414 311.833); without invalidating the layout

    Getting a lot of crashes like this with stacktrace:

    4 UIKit 0x0000000186c3a87c __45-[UICollectionViewData validateLayoutInRect:]_block_invoke + 1004

    5 UIKit 0x0000000186c39f74 -[UICollectionViewData validateLayoutInRect:] + 1492

    6 UIKit 0x0000000186c397a0 -[UICollectionView layoutSubviews] + 160

    help needed 
    opened by rounak 10
  • Stretch threshold?

    Stretch threshold?

    I've noticed that for some of my smaller images, it stops stretching and instead breaks and shows the bg. Is there a way to prevent this or set the threshold when and when not to break the stretching?

    opened by troypayne 9
  • Unexpected behaviour when inserting new cells.

    Unexpected behaviour when inserting new cells.

    I have my UICollectionView backed by a NSFetchedResultsController to insert/update cells.

    My cells get inserted as the user scrolls. What seems to happen is the sticky headers scroll down & then return once the bounce deceleration animation is complete.

    I think a solution would be to only insert cells once animation deceleration is complete.

    help needed 
    opened by markst 9
  • Allows to disable stretching view to more than set height.

    Allows to disable stretching view to more than set height.

    For me header was always stretching to more than set size which was not desired behaviour. So I added option to disable this.

    Thank you for possible merge.

    opened by Luzo 8
  • strange animation when increasing contentInset

    strange animation when increasing contentInset

    hi james,

    i use CSStickyHeaderFlowLayout for parallax CollectionView, and i add a pulling-to-refresh component on this UICollectionView. and after pulling, there is a strange animation. for clear shown, i set the animation duration to 3 seconds.

    stackoverflow

    and i setup a sample project, and email to you, thanks a lot @jamztang

    opened by kyfxbl 8
  • swift applyLayoutAttributes inconsistent

    swift applyLayoutAttributes inconsistent

    The sample you provided using "CSStickyHeaderFlowLayoutAttributes" as parameter type but when i used in swift it came with "UICollectionViewLayoutAttributes" base class

    your sample

    - (void)applyLayoutAttributes:(CSStickyHeaderFlowLayoutAttributes *)layoutAttributes {
    

    swift

    override func applyLayoutAttributes(layoutAttributes: UICollectionViewLayoutAttributes!) {
    

    i created another variable and used this way

    let attr = layoutAttributes as! CSStickyHeaderFlowLayoutAttributes
    
    opened by osmantuna 8
  • Fix cell positioning when using Size Classes

    Fix cell positioning when using Size Classes

    When a project is using Size Classes in interface builder, I've found that the collection view cells are not positioned correctly. Instead, they are shifted to the right and are therefore not completely visible on screen. I've found a workaround that fixes the cell positioning when the collection view will have one cell per row (similar to the UITableView layout). I'm not sure how this would affect other parts of the flow layout, however. Perhaps you could shed some light on this issue. Thanks!

    opened by ndmeiri 8
  • Using it in swift project and without storyboards

    Using it in swift project and without storyboards

    Hi,

    I am trying to use the library in a swift project. I am not using storyboards in the application. I took a look at the swift example and implemented it in similar fashion. I also took a look at the obj-c project and make some changes accordingly. But I am not able to achieve the effect where the header would scroll up and the section header of collection view would stick to the top of the view. Below is the link to the video. The example in swift is really basic. Can you please enhance it a bit to show the sticky section header effect.

    https://www.dropbox.com/s/26jph7gmswqdher/ScreenCap.mov?dl=0

    PS: This is not an issue. Just looking for some help/pointers. I guess people have been successful after a few attempts to get the required effect in swift.

    opened by bbhagat 7
  • Sticky Header scroll error

    Sticky Header scroll error

    iphonex ios11

    *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'layout attributes for supplementary item at index path (<NSIndexPath: 0xc000000000000516> {length = 2, path = 5 - 0}) changed from <CSStickyHeaderFlowLayout: 0x7fa0c758e060> indexPath: {5, 0} zIndex: 1024 valid: YES kind: UICollectionElementKindSectionHeader to <CSStickyHeaderFlowLayout: 0x7fa0c7592550> indexPath: {5, 0} zIndex: 1024 valid: YES kind: UICollectionElementKindSectionHeader without invalidating the layout' *** First throw call stack: ( 0 CoreFoundation 0x000000010f3701ab __exceptionPreprocess + 171 1 libobjc.A.dylib 0x000000010ea05f41 objc_exception_throw + 48 2 CoreFoundation 0x000000010f375372 +[NSException raise:format:arguments:] + 98 3 Foundation 0x000000010e4aa089 -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 193 4 UIKit 0x0000000110ba774a __45-[UICollectionViewData validateLayoutInRect:]_block_invoke + 1558 5 UIKit 0x0000000110ba6baf -[UICollectionViewData validateLayoutInRect:] + 2964 6 UIKit 0x0000000110ba9eff -[UICollectionViewData layoutAttributesForCellsInRect:validateLayout:] + 167 7 UIKit 0x0000000110b32767 -[UICollectionView _computePrefetchCandidatesForVisibleBounds:futureVisibleBounds:prefetchVector:notifyDelegateIfNeeded:] + 127 8 UIKit 0x0000000110b326d8 -[UICollectionView _computePrefetchCandidatesForVelocity:notifyDelegateIfNeeded:] + 225 9 UIKit 0x0000000110b325e3 -[UICollectionView _prefetchItemsForVelocity:maxItemsToPrefetch:invalidateCandidatesOnDirectionChanges:] + 921 10 UIKit 0x0000000110b3ba73 -[UICollectionView layoutSubviews] + 779 11 UIKit 0x00000001101396f5 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 1439 12 QuartzCore 0x000000010f8c03ee -[CALayer layoutSublayers] + 153 13 QuartzCore 0x000000010f8c44dd _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 401 14 QuartzCore 0x000000010f84cded _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 365 15 QuartzCore 0x000000010f878704 _ZN2CA11Transaction6commitEv + 500 16 QuartzCore 0x000000010f7c892c _ZN2CA7Display11DisplayLink14dispatch_itemsEyyy + 960 17 QuartzCore 0x000000010f904970 ZL22display_timer_callbackP12__CFMachPortPvlS1 + 248 18 CoreFoundation 0x000000010f2ff9c9 __CFMachPortPerform + 169 19 CoreFoundation 0x000000010f2ff909 CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE1_PERFORM_FUNCTION + 41 20 CoreFoundation 0x000000010f2ff871 __CFRunLoopDoSource1 + 465 21 CoreFoundation 0x000000010f2f7654 __CFRunLoopRun + 2596 22 CoreFoundation 0x000000010f2f69b9 CFRunLoopRunSpecific + 409 23 GraphicsServices 0x00000001158069c6 GSEventRunModal + 62 24 UIKit 0x00000001100685e8 UIApplicationMain + 159 25 CSStickyHeaderFlowLayoutDemo 0x000000010d5410af main + 111 26 libdyld.dylib 0x00000001167f7d81 start + 1 ) libc++abi.dylib: terminating with uncaught exception of type NSException

    opened by semnyqu 1
  • prepareLayout Errors : Swift4 + Xcode 9 + iOS 11

    prepareLayout Errors : Swift4 + Xcode 9 + iOS 11

    Anyone knows about this problems?

    Test Environment

    Swift 4 + XCode 9 + iOS 11

    I got an error "prepareLayout"

    @implementation CSStickyHeaderFlowLayout
    
    - (void)prepareLayout {
        [super prepareLayout];
    }
    
    opened by ShawnBaek 1
  • Please update documentation for storyboard users

    Please update documentation for storyboard users

    I am currently using storyboard to create the reusableview and cant make it to work. Appreciate it if you can update the documentation on how to use the class using storyboard. THank you for nice library.

    opened by gene-code 2
  • Crash on rotation

    Crash on rotation

    Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'layout attributes for supplementary item at index path (<NSIndexPath: 0x174037720> {length = 1, path = 0}) changed from <CSStickyHeaderFlowLayout.CSStickyHeaderFlowLayoutAttributes: 0x10dd20cd0> index path: (<NSIndexPath: 0x1700342a0> {length = 1, path = 0}); element kind: (CSStickyHeaderParallaxHeader); frame = (0 -12; 375 179.768); to <CSStickyHeaderFlowLayout.CSStickyHeaderFlowLayoutAttributes: 0x10df42610> index path: (<NSIndexPath: 0x174037720> {length = 1, path = 0}); element kind: (CSStickyHeaderParallaxHeader); frame = (0 -32; 375 199.768); without invalidating the layout'

    This occurred on an iPhone 6s running iOS 10.1.1. My app is written in Swift 3 in Xcode 8.1. CSStickyHeaderFlowLayout v0.2.11 is being used.

    opened by nickpodratz 0
Releases(0.2.12)
A generic stretchy header for UITableView and UICollectionView

GSKStretchyHeaderView, by gskbyte GSKStretchyHeaderView is an implementation of the stretchy header paradigm as seen on many apps, like Twitter, Spoti

Jose Alcalá Correa 1.7k Dec 30, 2022
Pull-to-refresh animation in UICollectionView with a sticky header flow layout, written in Swift :large_orange_diamond:

ReplaceAnimation Implementation of Zee Young's Dribbble animation (https://dribbble.com/shots/2067564-Replace) Info I really liked Zee Young's animati

Alex Türk 957 Sep 13, 2022
A complete Mac App: drag an image file to the top section and the bottom section will show you the text of any QRCodes in the image.

QRDecode A complete Mac App: drag an image file to the top section and the bottom section will show you the text of any QRCodes in the image. QRDecode

David Phillip Oster 2 Oct 28, 2022
A pixel perfect replacement for UITableView section index, written in Swift

MYTableViewIndex MYTableViewIndex is a re-implementation of UITableView section index. This control is usually seen in apps displaying contacts, track

Yury 520 Oct 27, 2022
Parallax scrolling effect on UITableView header view when a tableView is scrolled

ParallaxTableViewHeader Parallax scrolling effect on UITableView header view when a tableView is scrolled Usage Create a ParallaxHeaderView using eith

Vinodh Swamy 1.3k Nov 27, 2022
Simple way to add parallax header to UIScrollView/UITableView written in Swift.

ParallaxHeader Simple way to add parallax header to UIScrollView or it's subclasses. One image view Slider with images Blur vibrant text Blur round ic

Roman Sorochak 998 Dec 11, 2022
A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.

Scaling Header Scroll View A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI. We are a development agency building

Exyte 395 Dec 31, 2022
A generic stretchy header for UITableView and UICollectionView

GSKStretchyHeaderView, by gskbyte GSKStretchyHeaderView is an implementation of the stretchy header paradigm as seen on many apps, like Twitter, Spoti

Jose Alcalá Correa 1.7k Dec 30, 2022
Discover new programming concepts and more new SwiftUI 2 features in this section

Africa-Zoo One thing is sure, we will discover new programming concepts and more new SwiftUI 2 features in this section. TOPICS ARE COVERED: JSON with

Noye Samuel 2 Nov 8, 2022
Pull up controller with multiple sticky points like in iOS Maps

PullUpController Create your own pull up controller with multiple sticky points like in iOS Maps Features Multiple sticky points Landscape support Scr

Mario Iannotta 1.2k Dec 22, 2022
Simple parallax header for UIScrollView

MXParallaxHeader ⚠️ This project is no longer maintained, see #124 ⚠️ MXParallaxHeader is a simple header class for UIScrollView. In addition, MXScrol

Maxime Epain 1.7k Dec 9, 2022
HPParallaxHeader is a simple parallax header class for UIScrollView.

HPParallaxHeader is a simple parallax header class for UIScrollView.

null 40 Dec 15, 2022
ScrollView that supports a parallax header image and static overlay.

ScrollViewReactiveHeader A replacement ScrollView that provides a header with subtle scroll animations. example-video.mov Using ScrollViewReactiveHead

null 49 Dec 29, 2022
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)

FancyScrollView I spent a lot of time looking for a way to recreate the UI of the ScrollViews in Stock Apple Apps (i.e. App Store and Apple Music) ins

Mathias Quintero 696 Dec 30, 2022
Netflix and App Store like UITableView with UICollectionView, written in pure Swift 4.2

GLTableCollectionView Branch Status master develop What it is GLTableCollectionView is a ready to use UITableViewController with a UICollectionView fo

Giulio 708 Nov 17, 2022
Cool wave like transition between two or more UICollectionView

CKWaveCollectionViewTransition This is a cool custom transition between two or more UICollectionViewControllers with wave-like cell animation. Could b

Cezary Kopacz 1.9k Oct 4, 2022
Small app trying to recreate the Github's repos section from the iOS app with RxSwift and .nibs

Github Profile Repos Small app trying to recreate the Github's repos section from the iOS app with RxSwift and .nibs. This project is currently in pro

Leonardo 1 Apr 5, 2022
HoverConversion realized vertical paging with UITableView. UIViewController will be paged when reaching top or bottom of UITableView contentOffset.

HoverConversion ManiacDev.com referred. https://maniacdev.com/2016/09/hoverconversion-a-swift-ui-component-for-navigating-between-multiple-table-views

Taiki Suzuki 166 Feb 1, 2022
An iOS drop-in UITableView, UICollectionView and UIScrollView superclass category for showing a customizable floating button on top of it.

MEVFloatingButton An iOS drop-in UITableView, UICollectionView, UIScrollView superclass category for showing a customizable floating button on top of

Manuel Escrig 298 Jul 17, 2022
WLEmptyState is an iOS based component that lets you customize the view when the dataset of a UITableView or a UICollectionView is empty.

Table of Content Overview Running an Example Project Installing WLEmptyState Configuring WLEmptyState Using WLEmptyState Customizing WLEmptyState Cont

Wizeline 315 Dec 5, 2022