CODEWITHSUNDEEP
iosuiscrollviewuicollectionview
Claus
Claus

Reputation: 5722

UICollectionView with custom header

I'm trying to develop a UICollectionView which supports a custom header containing a UIScrollview. The problem is that (according what I have found so far in the documentation) UICollection view doesn't support static headers view like UITableview (where I could just drop a view inside using storyboard). The header is a UICollectionResusableView instance which gets re-generated every time the Collection View is scrolled up and down. Clearly this kind of view cannot be connected to outlet because is a dynamic prototype like UITableViewCell. How I add a custom view (and relative view controller which I can wire up) as header of my collection view?

PS. I'm developing on iOS8

Upvotes: 0

Views: 2736

Answers (2)

Lucas van Dongen
Lucas van Dongen

Reputation: 9858

I could used a Table View Cell prototype as a header so I could do everything from Interface Builder. Perhaps this is applicable for a Collection View as well:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    AXSHomeSectionHeaderCell *sectionHeader = [tableView dequeueReusableCellWithIdentifier:@"Home Section Header"];

    return sectionHeader;
}

I would look at:

dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

--- edit ---

Maybe I'm not completely understanding your question with the above answer. You want a UIView instead that you can wire up directly to your View Controller but you want it to scroll together with the Collection View? A technique I used in the past was using a UIView and a UICollectionView inside one UIScrollView, where the width / height of the collection view is always as big as it needs so it doesn't get a scrollview itself, and then the size is applied to the scrollview both the UIView and the UICollectionView are in so they scroll as one.

This is how I handled that situation:

Example

I have a UIScrollView with a UIView as a header on the top and below that a UICollectionView. The UIScrollView has a height determining auto layout constraint that needs to be set to exactly the height (and maybe for you the width as well) of the content of both views that are inside it. I only know how large the collection view will be once I've loaded the data so I start measuring after I've reloaded and size after that.

// Method being called after I successfully fetched my data
- (void)handleSuccess:(HomeScreenData *)homeScreen {
    self.eventsCollectionViewDatasource.featuredEvents = homeScreen.events;

    [self.eventsCollectionView reloadData];

    float headerHeight = CGRectGetHeight(self.headerView.frame);
    float eventsCollectionHeight = self.eventsCollectionView.contentSize.height;

    float totalScrollerHeight = headerHeight + eventsCollectionHeight; // This is how tall the scroller should be, you can do more fancy stuff if you need the width as well

    self.scrollViewContainerViewHeight.constant = totalScrollerHeight; // With autolayouts, use whatever you like
}

It will also support scroll in scroll! In fact what I used it for is a carousel type of collection view on top with sideways scrolling and a table below it that has vertical scrolling together with the top collection view based carousel. It is approachable like any other non-repeater nested item in Interface Builder.

Upvotes: 1

rdelmar
rdelmar

Reputation: 104082

You can drop a Collection Reusable View from the object library and drop it on to your collection view. You can then do whatever design you want in the storyboard, and dequeue it using its identifier just like you do for a cell (but using dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: which you do inside the data source method, collectionView:viewForSupplementaryElementOfKind:atIndexPath:).

 -(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
     RDReusableHeader *headerView = nil; // this is my subclass of a  UICollectionReusableView
     if (kind == UICollectionElementKindSectionHeader){
         headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyView" forIndexPath:indexPath];
         // configure the view here
     }

    return headerView;
}

Upvotes: 0

Related Questions