Fix collection view header view issue on iOS 11, modify Airbnb example to showcase

Author: Jose Alcalá Correa

Example/GSKStretchyHeaderView/GSKAirbnbExampleViewController.h

@@ -1,5 +1,5 @@
-#import "GSKExampleBaseTableViewController.h"
+@import UIKit;
 
-@interface GSKAirbnbExampleViewController : GSKExampleBaseTableViewController
+@interface GSKAirbnbExampleViewController : UICollectionViewController
 
 @end

Example/GSKStretchyHeaderView/GSKAirbnbExampleViewController.m

@@ -1,7 +1,11 @@
 #import "GSKAirbnbExampleViewController.h"
 #import "GSKAirbnbStretchyHeaderView.h"
+#import "GSKExampleDataSource.h"
 
 @interface GSKAirbnbExampleViewController () <GSKAirbnbStretchyHeaderViewDelegate>
+@property (nonatomic, readonly) UICollectionViewFlowLayout *collectionViewFlowLayout;
+@property (nonatomic) GSKStretchyHeaderView *stretchyHeaderView;
+@property (nonatomic) GSKExampleDataSource *dataSource;
 @end
 
 @interface GSKPresentableViewController : UIViewController
@@ -10,18 +14,44 @@ @interface GSKPresentableViewController : UIViewController
 
 @implementation GSKAirbnbExampleViewController
 
+- (instancetype)init {
+    UICollectionViewFlowLayout *collectionViewFlowLayout = [[UICollectionViewFlowLayout alloc] init];
+    collectionViewFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
+    collectionViewFlowLayout.minimumLineSpacing = 0;
+    collectionViewFlowLayout.minimumInteritemSpacing = 0;
+    
+    return [super initWithCollectionViewLayout:collectionViewFlowLayout];
+}
+
+- (UICollectionViewFlowLayout *)collectionViewFlowLayout {
+    return (UICollectionViewFlowLayout *)self.collectionViewLayout;
+}
+
 - (void)viewDidLoad {
     [super viewDidLoad];
+    
+    self.collectionView.backgroundColor = [UIColor whiteColor];
+    if (@available(iOS 11.0, *)) {
+        self.collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
+    }
 
-    self.refreshControl = [[UIRefreshControl alloc] init];
-    [self.refreshControl addTarget:self action:@selector(beginRefreshing:) forControlEvents:UIControlEventValueChanged];
-
-    [self.tableView addSubview:self.refreshControl];
+    self.stretchyHeaderView = [self loadStretchyHeaderView];
+    [self.collectionView addSubview:self.stretchyHeaderView];
+    
+    self.dataSource = [[GSKExampleDataSource alloc] init];
+    [self.dataSource registerForCollectionView:self.collectionView];
+    
+    self.dataSource.numberOfSections = 10;
+    self.dataSource.numberOfRowsInEverySection = 6;
+    self.dataSource.displaysSectionHeaders = YES;
     self.dataSource.cellColors = @[[UIColor whiteColor], [UIColor lightGrayColor]];
+    
+    self.collectionView.refreshControl = [[UIRefreshControl alloc] init];
+    [self.collectionView.refreshControl addTarget:self action:@selector(beginRefreshing:) forControlEvents:UIControlEventValueChanged];
 }
 
 - (GSKStretchyHeaderView *)loadStretchyHeaderView {
-    CGRect frame = CGRectMake(0, 0, self.tableView.frame.size.width, 250);
+    CGRect frame = CGRectMake(0, 0, self.collectionView.frame.size.width, 250);
     GSKAirbnbStretchyHeaderView *headerView = [[GSKAirbnbStretchyHeaderView alloc] initWithFrame:frame];
     headerView.maximumContentHeight = 300;
     headerView.minimumContentHeight = 84;
@@ -42,10 +72,10 @@ - (void)airbnbStretchyHeaderView:(GSKAirbnbStretchyHeaderView *)headerView
 
 - (void)airbnbStretchyHeaderView:(GSKAirbnbStretchyHeaderView *)headerView
               didTapSearchButton:(id)sender {
-    CGPoint contentOffset = self.tableView.contentOffset;
+    CGPoint contentOffset = self.collectionView.contentOffset;
     if (contentOffset.y < -self.stretchyHeaderView.minimumContentHeight) {
         contentOffset.y = -self.stretchyHeaderView.minimumContentHeight;
-        [self.tableView setContentOffset:contentOffset animated:YES];
+        [self.collectionView setContentOffset:contentOffset animated:YES];
     }
 }
 
@@ -59,13 +89,22 @@ - (void)airbnbStretchyHeaderView:(GSKAirbnbStretchyHeaderView *)headerView didTa
 
 - (void)beginRefreshing:(id)sender {
     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
-        [self.refreshControl endRefreshing];
+        [self.collectionView.refreshControl endRefreshing];
     });
 }
 
-@end
+- (CGSize)collectionView:(UICollectionView *)collectionView
+                  layout:(UICollectionViewLayout *)collectionViewLayout
+  sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+    return CGSizeMake(collectionView.frame.size.width,
+                      [self.dataSource heightForItemAtIndexPath:indexPath]);
+}
 
+- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
+    return CGSizeMake(collectionView.frame.size.width, 20);
+}
 
+@end
 
 @implementation GSKPresentableViewController
 

Example/GSKStretchyHeaderView/GSKExampleBaseTableViewController.m

@@ -1,8 +1,6 @@
 #import "GSKExampleBaseTableViewController.h"
 #import "UINavigationController+Transparency.h"
 
-static const NSUInteger kNumberOfRows = 100;
-
 @interface GSKExampleBaseTableViewController ()
 
 @end
@@ -55,7 +53,7 @@ - (GSKStretchyHeaderView *)loadStretchyHeaderView {
 }
 
 - (GSKExampleDataSource *)loadDataSource {
-    return [[GSKExampleDataSource alloc] initWithNumberOfRows:kNumberOfRows];
+    return [[GSKExampleDataSource alloc] init];
 }
 
 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

Example/GSKStretchyHeaderView/GSKExampleCollectionViewController.m

@@ -5,8 +5,6 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-static const NSUInteger kNumberOfRows = 100;
-
 @interface GSKExampleCollectionViewController () <UICollectionViewDelegateFlowLayout>
 @property (nonatomic) GSKExampleData *data;
 @property (nonatomic) GSKStretchyHeaderView *stretchyHeaderView;
@@ -47,7 +45,7 @@ - (void)viewDidLoad {
     }
     [self.collectionView addSubview:self.stretchyHeaderView];
 
-    self.dataSource = [[GSKExampleDataSource alloc] initWithNumberOfRows:kNumberOfRows];
+    self.dataSource = [[GSKExampleDataSource alloc] init];
     [self.dataSource registerForCollectionView:self.collectionView];
 }
 

Example/GSKStretchyHeaderView/GSKExampleDataSource.h

@@ -1,14 +1,20 @@
 #import <Foundation/Foundation.h>
 
+static const NSUInteger kDefaultNumberOfRows = 100;
+
 @interface GSKExampleDataSource : NSObject<UITableViewDataSource,
                                            UICollectionViewDataSource>
 
-@property (nonatomic, readonly) NSUInteger numberOfRows;
+// set to true to display basic titles: "Section #X"
+@property (nonatomic) BOOL displaysSectionHeaders; // default value: false
+@property (nonatomic) NSUInteger numberOfSections; // default value: 1
+@property (nonatomic) NSUInteger numberOfRowsInEverySection;
 @property (nonatomic) NSArray<UIColor *> *cellColors;
 
-- (instancetype)initWithNumberOfRows:(NSUInteger)numberOfRows;
+- (instancetype)init;
 - (void)registerForTableView:(UITableView *)tableView;
 - (void)registerForCollectionView:(UICollectionView *)collectionView;
 - (CGFloat)heightForItemAtIndexPath:(NSIndexPath *)indexPath;
+- (NSString *)titleForSection:(NSInteger)section;
 
 @end

Example/GSKStretchyHeaderView/GSKExampleDataSource.m

@@ -7,22 +7,29 @@ @interface GSKExampleDataSource ()
 @property (nonatomic) NSMutableArray<NSNumber *> *rowHeights;
 @end
 
+@interface GSKAirbnbSectionTitleView: UICollectionReusableView
+@property (nonatomic) UILabel *label;
+@end
+
 @implementation GSKExampleDataSource
 
-- (instancetype)initWithNumberOfRows:(NSUInteger)numberOfRows {
+- (instancetype)init {
     self = [super init];
     if (self) {
-        _numberOfRows = numberOfRows;
-        self.rowHeights = [NSMutableArray arrayWithCapacity:numberOfRows];
-        for (NSUInteger i = 0; i < numberOfRows; ++i) {
-            CGFloat height = 40 + arc4random_uniform(160);
-            [self.rowHeights addObject:@(height)];
-        }
+        _displaysSectionHeaders = false;
+        _numberOfSections = 1;
+        _numberOfRowsInEverySection = kDefaultNumberOfRows;
+        [self updateRowHeights];
         self.cellColors = @[[UIColor grayColor], [UIColor lightGrayColor]];
     }
     return self;
 }
 
+- (void)setNumberOfRowsInEverySection:(NSUInteger)numberOfRowsInEverySection {
+    _numberOfRowsInEverySection = numberOfRowsInEverySection;
+    [self updateRowHeights];
+}
+
 - (void)registerForTableView:(UITableView *)tableView {
     _scrollView = tableView;
 
@@ -33,14 +40,32 @@ - (void)registerForTableView:(UITableView *)tableView {
 - (void)registerForCollectionView:(UICollectionView *)collectionView {
     collectionView.dataSource = self;
     [GSKCollectionViewCell registerIn:collectionView];
+    [collectionView registerClass:[GSKAirbnbSectionTitleView class]
+       forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
+              withReuseIdentifier:NSStringFromClass([GSKAirbnbSectionTitleView class])];
+}
+
+- (void)updateRowHeights {
+    self.rowHeights = [NSMutableArray arrayWithCapacity:self.numberOfRowsInEverySection];
+    for (NSUInteger i = 0; i < self.numberOfRowsInEverySection; ++i) {
+        CGFloat height = 40 + arc4random_uniform(160);
+        [self.rowHeights addObject:@(height)];
+    }
 }
 
 #pragma mark - table view
 
-- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
-    return self.numberOfRows;
+- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
+    return [self titleForSection:section];
 }
 
+- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
+    return self.numberOfSections;
+}
+
+- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
+    return self.numberOfRowsInEverySection;
+}
 
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
     GSKTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:[GSKTableViewCell reuseIdentifier]];
@@ -50,6 +75,10 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
 
 #pragma mark - collectionView
 
+- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
+    return self.numberOfSections;
+}
+
 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
     return self.rowHeights.count;
 }
@@ -61,8 +90,43 @@ - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cell
     return cell;
 }
 
+- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
+    if (!self.displaysSectionHeaders) {
+        return nil;
+    }
+    
+    GSKAirbnbSectionTitleView *titleView = [collectionView dequeueReusableSupplementaryViewOfKind:kind
+                                                                              withReuseIdentifier:NSStringFromClass([GSKAirbnbSectionTitleView class])
+                                                                                     forIndexPath:indexPath];
+    titleView.label.text = [self titleForSection:indexPath.section];
+    return titleView;
+}
+
+#pragma mark - generic
+
 - (CGFloat)heightForItemAtIndexPath:(NSIndexPath *)indexPath {
     return [self.rowHeights[indexPath.item] floatValue];
 }
 
+- (NSString *)titleForSection:(NSInteger)section {
+    return self.displaysSectionHeaders ? [NSString stringWithFormat:@"Section #%@", @(section)] : nil;
+}
+
+@end
+
+
+@implementation GSKAirbnbSectionTitleView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    self = [super initWithFrame:frame];
+    if (self) {
+        self.label = [[UILabel alloc] initWithFrame:self.bounds];
+        self.label.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+        [self addSubview:self.label];
+        
+        self.backgroundColor = [UIColor grayColor];
+    }
+    return self;
+}
+
 @end

Example/GSKStretchyHeaderView/GSKExampleListViewController.m

@@ -26,6 +26,8 @@ - (void)viewDidLoad {
     [super viewDidLoad];
 
     self.title = @"GSKStretchyHeaderView";
+    self.tableView.rowHeight = [GSKExampleDataCell height];
+    
     [GSKExampleDataCell registerIn:self.tableView];
 
     GSKExampleData *airbnb = [GSKExampleData dataWithTitle:@"airbnb-like header view"
@@ -73,10 +75,6 @@ - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger
     return self.exampleDatas.count;
 }
 
-- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
-    return [GSKExampleDataCell height];
-}
-
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
     GSKExampleDataCell *cell = [tableView dequeueReusableCellWithIdentifier:[GSKExampleDataCell reuseIdentifier]];
     cell.data = self.exampleDatas[indexPath.row];

Example/GSKStretchyHeaderView/GSKExampleTabsViewController.m

@@ -35,7 +35,7 @@ - (void)viewDidLoad {
 
     NSMutableArray *dataSources = [NSMutableArray array];
     for (NSUInteger i = 0; i < self.stretchyHeaderView.tabsCount; ++i) {
-        GSKExampleDataSource *dataSource = [[GSKExampleDataSource alloc] initWithNumberOfRows:100];
+        GSKExampleDataSource *dataSource = [[GSKExampleDataSource alloc] init];
         [dataSources addObject:dataSource];
     }
     self.dataSources = [dataSources copy];

Example/GSKStretchyHeaderView/GSKVisibleSectionHeadersViewController.m

@@ -3,15 +3,15 @@
 #import "UINavigationController+Transparency.h"
 #import "UIView+GSKLayoutHelper.h"
 
-@interface GSKVisibleSectionHeadersDataSource : GSKExampleDataSource
-
-@end
-
 @implementation GSKVisibleSectionHeadersViewController
 
 - (void)viewDidLoad {
     [super viewDidLoad];
 
+    self.dataSource.numberOfSections = 10;
+    self.dataSource.numberOfRowsInEverySection = 7;
+    self.dataSource.displaysSectionHeaders = YES;
+    
     // by setting contentInset.top, we set where the section headers will be fixed
     UIEdgeInsets contentInset = self.tableView.contentInset;
     contentInset.top = self.stretchyHeaderView.minimumContentHeight;
@@ -41,24 +41,4 @@ - (GSKStretchyHeaderView *)loadStretchyHeaderView {
     return headerView;
 }
 
-- (GSKExampleDataSource *)loadDataSource {
-    return [[GSKVisibleSectionHeadersDataSource alloc] init];
-}
-
-@end
-
-@implementation GSKVisibleSectionHeadersDataSource
-
-- (instancetype)init {
-    return [self initWithNumberOfRows:7];
-}
-
-- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
-    return 10;
-}
-
-- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
-    return [NSString stringWithFormat:@"Section #%@", @(section)];
-}
-
 @end

GSKStretchyHeaderView/Classes/GSKStretchyHeaderView.h

@@ -105,6 +105,19 @@ typedef NS_ENUM(NSUInteger, GSKStretchyHeaderViewExpansionMode) {
  */
 @property(nonatomic) BOOL manageScrollViewInsets;
 
+/**
+ * Indicates if the view hierarchy of the containing scroll view should be manipulated to fix some artifacts,
+ * such as section header and supplementary views appearing on top of this header view.
+ * This may involve moving views behind the header view, like UICollectionReusableView and UITableViewHeaderFooterView,
+ * and adjusting `zPosition` for some views on iOS 11.
+ *
+ * - Please see UIScrollView+GSKStretchyHeaderView.m for more information.
+ * - Have a look at this issue for more information: https://github.com/gskbyte/GSKStretchyHeaderView/issues/63
+ *
+ * Default value is YES
+ */
+@property(nonatomic) BOOL managesScrollViewSubviewHierarchy;
+
 /**
  *  Specifies wether the contentView height shrinks when scrolling up. Default is YES.
  */