UICollectionView special horizontal flow - multiple sections

Morten Holmgaard picture Morten Holmgaard · Jul 24, 2013 · Viewed 10.9k times · Source

I have a UICollectionView there is used differently depending on device orientation. The image describe what I have and what I need.

Is it possible to get "Horizontal scrolling as I need it" with default flowlayout or do I need to make customflowlayout(Guide appreciated) or multiple collectionviews?

Collection flow layout

Answer

Morten Holmgaard picture Morten Holmgaard · Jul 24, 2013

I solved it using DateFlowLayout. Strange name but it works, with some configurations.

This was my setup to you it(I only used it for the horizontal direction):

- (void)layoutForOrientation:(UIInterfaceOrientation)orientation {
    bool isPortrait = UIInterfaceOrientationIsPortrait(orientation);

    self.collectionView.frame = isPortrait ? CGRectMake(0, 0, 768, 180) : CGRectMake(0, 60, 246, 595);
    self.collectionView.collectionViewLayout = isPortrait ? DateFlowLayout.new : UICollectionViewFlowLayout.new;
    self.flowLayout = ((UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout);

    self.flowLayout.scrollDirection = isPortrait ? UICollectionViewScrollDirectionHorizontal : UICollectionViewScrollDirectionVertical;
    self.flowLayout.headerReferenceSize = isPortrait ? CGSizeMake(5, 30) : CGSizeMake(246, 40); //width is margin to the left of the header - must be bigger than 0 to show headers correct.
    self.flowLayout.minimumInteritemSpacing = isPortrait ? 10 : 0;
    self.flowLayout.minimumLineSpacing = isPortrait ? 17 : 7;
    self.flowLayout.sectionInset = isPortrait ? UIEdgeInsetsMake(27, 30, 25, 0) : UIEdgeInsetsMake(0, 14, 0, 0);
    //self.flowLayout.itemSize = CGSizeMake(58, 85); //You might need this
    self.collectionView.alwaysBounceVertical = isPortrait ? NO : YES;
}