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

Answer 1

Xcode 11+, Swift 5.

I solved my issue, I prepared video and code

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

You should embed a UITableView into a UIScrollView. ScrollView and TableView will have the same height but different widths. This way UITableView will scroll vertical and UIScrollView will scroll horizontal.

Answer 4

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 5

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 ?