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?

Answer 1

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.

Answer 2

Before you can do that you MUST use a different type of layout. The flow layout represents its items as a list and it spans these items in cells based on the available width. If you want to have both horizontal and vertical scrolling you need to somehow specify the number of columns for your grid. the FlowLayout doesn't have that. A simple sollution is to make a subclass of UICollectionViewLayout and override collectionViewContentSize to make it retun a width = to the added sum of the cells widths of one row (this is where knowing how many collumns you want is necessary), plus any additional spacing between them. This will work fine if your cells have the same size per column, similar to a grid.

Answer 3

i found this UICollectionView: How to define a UICollectionViewLayout that supports horizontally and vertically scrolling?

the example provided by Jirune seems to be the key. But if it possible to use collectionview rows instead of sections for rows it would be nice..

Answer 4

I'm not sure I've understood your problem.

But if you have made a custom layout, make sure you have implemented :

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

and that your layout attributes frame and size are set with correct values for your "large cell" index path.

Also make sure you have implemented :

- (CGSize) collectionViewContentSize;

This method returns the contentSize of the collection View. If contentSize.width > youAppFrame.width you should have horizontal scrolling. Same for height and vertical scrolling.

Also make sure your collectionView allows scrolling and that your layout is prepared correctly using :

- (void)prepareLayout

By the way, for your layout have you overloaded UICollectionViewLayout or UICollectionViewFlowLayout ?