Search code examples
iosheaderuicollectionviewflowlayout

UICollectionView header position in horizontal scroll direction mode with flow layout


I have ios UICollectionView with Flow layout with horizontal scroll direction. In this situation typical header position is on the left side of cells.

I want to make header on the top of section cells

Have you any idea how can I do this?


Solution

  • I think you can get what you need using standard behavior for the header.

    Set it up (probably in viewDidLoad):

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.headerReferenceSize = CGSizeMake(self.collectionView.bounds.size.width, 30);
    // other setup
    [self.collectionView setCollectionViewLayout:flowLayout];
    

    Then answer a header view:

    #define MY_HEADER_LABEL_TAG 128
    
    - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:
                                                UICollectionElementKindSectionHeader withReuseIdentifier:@"SectionHeader" forIndexPath:indexPath];
        UILabel *label = (UILabel *)[headerView viewWithTag:MY_HEADER_LABEL_TAG];
        if (!label) {
            label = [[UILabel alloc] initWithFrame:CGRectInset(headerView.bounds, 5, 5)];
            label.tag = MY_HEADER_LABEL_TAG;
            label.font = [UIFont boldSystemFontOfSize:12];
            label.textColor = [UIColor darkGrayColor];
            [headerView addSubview:label];
        }
    
        label.text = [NSString stringWithFormat:@"Section %d", indexPath.section];
        return headerView;
    }