83

I have a UIScrollView that lays out a grid of icons. If you were to imagine the layout for the iOS Springboard, you'd be pretty close to correct. It has a horizontal, paged scroll (just like Springboard). However, it appears that the layout is not quite right. It appears as though it is laying out the items from top to bottom. As a result, my last column only has 2 rows in it, due to the number of items to be displayed. I'd rather have my last row on the last page have 2 items, like you would see in the Springboard.

How can this be accomplished with UICollectionView and its related classes? Do I have to write a custom UICollectionViewFlowLayout?

1
  • what was the solution you came up with? I too am trying to have a horizontal layout. Commented Apr 10, 2016 at 14:27

14 Answers 14

104

Have you tried setting the scroll direction of your UICollectionViewFlowLayout to horizontal?

[yourFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

And if you want it to page like springboard does, you'll need to enable paging on your collection view like so:

[yourCollectionView setPagingEnabled:YES];
1
  • 12
    Yes, but as I mentioned in the question, this fills in the collection view from top to bottom on each page. As a result, the last column is only partially filled. I would rather it fill the collection view from left to right, leaving the last ROW partially filled.
    – Shadowman
    Commented Oct 18, 2013 at 17:08
83
+50

1st approach

What about using UIPageViewController with an array of UICollectionViewControllers? You'd have to fetch proper number of items in each UICollectionViewController, but it shouldn't be hard. You'd get exactly the same look as the Springboard has.

2nd approach

I've thought about this and in my opinion you have to set:

self.collectionView.pagingEnabled = YES;

and create your own collection view layout by subclassing UICollectionViewLayout. From the custom layout object you can access self.collectionView, so you'll know what is the size of the collection view's frame, numberOfSections and numberOfItemsInSection:. With that information you can calculate cells' frames (in prepareLayout) and collectionViewContentSize. Here're some articles about creating custom layouts:

3rd approach

You can do this (or an approximation of it) without creating the custom layout. Add UIScrollView in the blank view, set paging enabled in it. In the scroll view add the a collection view. Then add to it a width constraint, check in code how many items you have and set its constant to the correct value, e.g. (self.view.frame.size.width * numOfScreens). Here's how it looks (numbers on cells show the indexPath.row): https://www.dropbox.com/s/ss4jdbvr511azxz/collection_view.mov If you're not satisfied with the way cells are ordered, then I'm afraid you'd have to go with 1. or 2.

4
  • Adopting the 1st approach, I have problems displaying the view controller via push, when a cell is selected. How to solve that?
    – Scott
    Commented Jul 23, 2014 at 12:17
  • @Scott: What kind of problems?
    – Arek Holko
    Commented Jul 23, 2014 at 12:52
  • I've posted a question earlier here. I'm able to load the different UICollectionViewController in each page, but have problem once I select cell, error stating Push segues can only be used when the source controller is managed by an instance of UINavigationController
    – Scott
    Commented Jul 23, 2014 at 13:11
  • 1
    In case anyone wants a working example of the 2nd approach stackoverflow.com/questions/25963987/…
    – harinsa
    Commented Jul 2, 2015 at 15:14
56

You need to reduce the height of UICollectionView to its cell / item height and select "Horizontal" from the "Scroll Direction" as seen in the screenshot below. Then it will scroll horizontally depending on the numberOfItems you have returned in its datasource implementation.

enter image description here

2
  • 3
    This does not answer the question though. Commented Mar 3, 2017 at 11:53
  • 3
    Thanks "You need to reduce the height of UICollectionView to its cell / item height" this tip perfectly worked for me. Commented Jun 19, 2018 at 17:13
24

If you are defining UICollectionViewFlowLayout in code, it will override Interface Builder configs. Hence you need to re-define the scrollDirection again.

let layout = UICollectionViewFlowLayout()
...
layout.scrollDirection = .Horizontal
self.awesomeCollectionView.collectionViewLayout = layout
1
  • This is the actual answer.
    – Fattie
    Commented Mar 21, 2021 at 11:12
18

This code works well in Swift 3.1 and Xcode 8.3.2

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        self.collectionView.collectionViewLayout = layout
        self.collectionView!.contentInset = UIEdgeInsets(top: -10, left: 0, bottom:0, right: 0)

        if let layout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.minimumInteritemSpacing = 0
            layout.minimumLineSpacing = 0
            layout.itemSize = CGSize(width: self.view.frame.size.width-40, height: self.collectionView.frame.size.height-10)
            layout.invalidateLayout()
        }

    }
2
  • 5
    Why don't you set those properties of the layout before you assign it to the collection view? - it would be much cleaner.
    – Wez
    Commented Jan 23, 2018 at 16:21
  • Isn't this piece of code producing an infinite loop? You call it in the viewDidLayoutSubviews, and then trigger the invalidateLayout(), which will call the viewWillLayoutSubviews and then viewDidLayoutSubviews again and again.
    – Starsky
    Commented Feb 16, 2021 at 13:53
15

From @Erik Hunter, I post full code for make horizontal UICollectionView

UICollectionViewFlowLayout *collectionViewFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[collectionViewFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
self.myCollectionView.collectionViewLayout = collectionViewFlowLayout;

In Swift

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Horizontal
self.myCollectionView.collectionViewLayout = layout

In Swift 3.0

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
self.myCollectionView.collectionViewLayout = layout

Hope this help

1
  • 1
    If your requirement for horizontal scroll with default direction to fill cell then it is fine (Default: Top to Bottom) But, if requirement is like to make horizontal scroll with cell filling horizontal (Left to Right) then need to customize it... (Refer : 5_Output_H-Scroll_H-Fill.png) Commented Jan 3, 2017 at 5:40
9

Just for fun, another approach would be to just leave the paging and horizontal scrolling set, add a method that changes the order of the array items to convert from 'top to bottom, left to right' to visually 'left to right, top to bottom' and fill the in-between cells with empty hidden cells to make the spacing right. In case of 7 items in a grid of 9, this would go like this:

[1][4][7]
[2][5][ ]
[3][6][ ]

should become

[1][2][3]
[4][5][6]
[7][ ][ ]

so 1=1, 2=4, 3=7 etc. and 6=empty. You can reorder them by calculating the total number of rows and columns, then calculate the row and column number for each cell, change the row for the column and vice versa and then you have the new indexes. When the cell doesn't have a value corresponding to the image you can return an empty cell and set cell.hidden = YES; to it.

It works quite well in a soundboard app I built, so if anyone would like working code I'll add it. Only little code is required to make this trick work, it sounds harder than it is!

Update

I doubt this is the best solution, but by request here's working code:

- (void)viewDidLoad {
    // Fill an `NSArray` with items in normal order
    items = [NSMutableArray arrayWithObjects:
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 1", @"label", @"Some value 1", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 2", @"label", @"Some value 2", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 3", @"label", @"Some value 3", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 4", @"label", @"Some value 4", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 5", @"label", @"Some value 5", @"value", nil],
              nil
              ];

    // Calculate number of rows and columns based on width and height of the `UICollectionView` and individual cells (you might have to add margins to the equation based on your setup!)
    CGFloat w = myCollectionView.frame.size.width;
    CGFloat h = myCollectionView.frame.size.height;
    rows = floor(h / cellHeight);
    columns = floor(w / cellWidth);
}

// Calculate number of sections
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return ceil((float)items.count / (float)(rows * columns));
}

// Every section has to have every cell filled, as we need to add empty cells as well to correct the spacing
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return rows*columns;
}

// And now the most important one
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier@"myIdentifier" forIndexPath:indexPath];

    // Convert rows and columns
    int row = indexPath.row % rows;
    int col = floor(indexPath.row / rows);
    // Calculate the new index in the `NSArray`
    int newIndex = ((int)indexPath.section * rows * columns) + col + row * columns;

    // If the newIndex is within the range of the items array we show the cell, if not we hide it
    if(newIndex < items.count) {
        NSDictionary *item = [items objectAtIndex:newIndex];
        cell.label.text = [item objectForKey:@"label"];
        cell.hidden = NO;
    } else {
        cell.hidden = YES;
    }

    return cell;
}

If you'd like to use the didSelectItemAtIndexPath method you have to use the same conversion that is used in cellForItemAtIndexPath to get the corresponding item. If you have cell margins you need to add them to the rows and columns calculation, as those have to be correct in order for this to work.

7
  • Could you share your code for this? It sounds like the best solution!
    – ebi
    Commented Apr 7, 2015 at 14:00
  • Added working code. Let me know if you have any questions about it!
    – Tum
    Commented Apr 9, 2015 at 7:54
  • 1
    Answer is good but Not Specify DataType of rows,columns,cellHeight,cellWidth.
    – Mihir Oza
    Commented Jul 3, 2015 at 13:05
  • if(newIndex < items.count) { Due to this line, app is crashing. So I updated it as following if(newIndex < items.count-1) { So if my array is having 4 objects, it displayed only 3 items in collection view. Any help please? Commented Aug 12, 2015 at 13:09
  • This was a really nice idea and easy to implement. Commented Oct 16, 2016 at 14:25
8

for xcode 8 i did this and it worked:

8

We can do same Springboard behavior using UICollectionView and for that we need to write code for custom layout.

I have achieved it with my custom layout class implementation with "SMCollectionViewFillLayout"

Code repository:

https://github.com/smindia1988/SMCollectionViewFillLayout

Output as below:

1.png

First.png

2_Code_H-Scroll_V-Fill.png

enter image description here

3_Output_H-Scroll_V-Fill.png enter image description here

4_Code_H-Scroll_H-Fill.png enter image description here

5_Output_H-Scroll_H-Fill.png enter image description here

3
  • I want to implement like "5_Output_H-Scroll_H-Fill.png". Please suggest me, how can I achieve this?
    – iPhoneDev
    Commented Jan 21, 2017 at 9:02
  • @iPhoneDev i have shared code repository link. You can download code from there. Hope my code help you !!! :) Commented Mar 6, 2017 at 6:10
  • 2
    @Sandy I know the OP didn't ask for this, but is there any chance you have your code in Swift?
    – lwdthe1
    Commented Mar 28, 2017 at 0:04
6

I am working on Xcode 6.2 and for horizontal scrolling I have changed scroll direction in attribute inspector.

click on collectionView->attribute inspector->scroll Direction->change to horizontal

enter image description here I hope it helps someone.

3

You can write a custom UICollectionView layout to achieve this, here is demo image of my implementation:

demo image

Here's code repository: KSTCollectionViewPageHorizontalLayout

@iPhoneDev (this maybe help you too)

1

If you need to set the UICollectionView scrolling Direction Horizental and you need to set cell width and height static. Please set the collectionview estimate size Automatic into None .

View The ScreenShot

0

Create UICollectionView and Make it horizontal Scroll

lazy var collectionView: UICollectionView = {
    
    let layout = UICollectionViewFlowLayout()
    // horizontal scroll
    layout.scrollDirection = .horizontal
    
    //CollectionCellView width autoSize
    layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    
    collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: cellId)
    
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.alwaysBounceHorizontal = true
    
    return collectionView
}()
0

For iOS 13 and above, try UICollectionViewCompositionalLayout.

Below is just sample for understanding.

collectionView.collectionViewLayout = createCompositionalLayout()

private func createCompositionalLayout() -> UICollectionViewLayout {
        let layouts = UICollectionViewCompositionalLayout.init { sectionIndex, environment in
            self.horizontalSection()
        }
        return layouts
    }
    
    private func horizontalSection() -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                              heightDimension: .fractionalHeight(1))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                               heightDimension: .estimated(200))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                       subitems: [item])
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 16
        section.orthogonalScrollingBehavior = .paging
        return section
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.