Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UICollectionView special horizontal flow - multiple sections

Tags:

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

like image 817
Morten Holmgaard Avatar asked Jul 24 '13 06:07

Morten Holmgaard


People also ask

How do you create a collection view with multiple sections?

You need to implement a custom UICollectionViewLayout. With a horizontal flow layout it's going to fill from top to bottom first, then move to the right. Since you have two rows, as specified in sizeForItemAt, section 0 will fill from top to bottom, then right to left, and so will section 1.

What is Uicollectionview flow layout?

A layout object that organizes items into a grid with optional header and footer views for each section.

How do I add a section in Collectionview?

So for your first task, you'll add a new section header using the search text as the section title. To display this section header, you'll use UICollectionReusableView . This class is like UICollectionViewCell , except it's usually used to display headers and footers.

What is compositional layout in Swift?

A compositional layout is a type of collection view layout. It's designed to be composable, flexible, and fast, letting you build any kind of visual arrangement for your content by combining — or compositing — each smaller component into a full layout.


1 Answers

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;
}
like image 174
Morten Holmgaard Avatar answered Nov 09 '22 13:11

Morten Holmgaard