UICollectionView scrolling in both directions

Question

I made a UICollectionView with a vertical scroll.

The width of the cell is more than than the screen width, so I created a customFlowLayout based on UICollectionViewFlow layout returning the right calculated content size.

However, this doesn't work. When the width of the cell is less than the screen width it works. Does it mean that we can't have width more than than screen width in vertical scroll?

It is the same for horizontal scroll, but then the height of the CollectionView is limited to screen height.

Is there any way to make it work?

Solution

As others have already said, the UICollectionView can only scroll one direction using a flow layout. However you can accomplish this very easily without creating a custom layout or using a third party library.

When you lay your view out in story board, you can put your UICollectionView embedded in a UIScrollView. Have the scrollview set up to scroll horizontally and the UICollectionView to scroll Vertically. Then set the UICollectionView.delaysContentTouchesto true so touches will pass through to the UIScrollView and not think you are trying to scroll the collectionview.

When you set up the UICollectionView, set it's size and the size of the cells to be what you actually want them to be (Wider than the actual screen) and lay them out accordingly.

Now in the containing UIViewController put this code in the view lifecycle

    - (void)viewDidLayoutSubviews {
        self.myScrollView.contentSize = self.myCollectionView.frame.size;
    }

That's literally all you have to do to accomplish what you are describing. Now your scrollview should allow you to scroll horizontally to view your entire cell and your collectionView should scroll vertically through your cells.

Happy programming.

Comments

[Janusz Chudzynski]

I had to revisit it recently. I created a demo project hosted here: github.com/izotx/ScrollableCollectionView It's using collection view embedded in a scroll view to scroll content in both ways. Hopefully you will find it useful.

[last-Programmer]

I am subclassing UICollectionViewFlowLayout... i have specified the collectionViewContentSize. in the preparelayout i am setting the itemsize [self setItemSize:CGSizeMake(10.0f*200.0f, 30)]; my requirement is, the cell width is above the screen width and has rows more than screen height. i dont know how to achieve this using uicollectionview...

[Nerrolken]

This worked for me, but beware: this layout will force the CollectionView to generate all of its cells at once, so this solution is impractical with larger numbers of cells. I ended up needing to find a different solution (stackoverflow.com/q/15549233/1418688), because my CollectionView was very large.

[johnrechd]

@AlexanderWinn, thanks for the feedback. The linked solution is great. In this specific question, you actually shouldn't need to load more cells than you need. I use this in a continuously scrollable calendar week (vertical hours). So it has potentially infinite cells and I load them as needed. The linked solution is for a collectionview with rows and columns where you need to scroll both directions (in a sort of zoomed state). This question is more specifically for a collection view with a single row, where each individual cell is larger than the viewable screen. Good clarification though.

[johnny]

Where should i add the Delay Content Touches?

[johnrechd]

@johnny - probably in viewDidLoad or in the storyboard or xib if you are using one.

[stonedauwg]

@Nerrolken curious, why does it force the CV to load all cells at once?