How can I change the scroll direction in UICollectionView?

Question

I have a UICollectionView in my storyboard based iOS app. When the device is in the portrait orientation I'd like it to scroll vertically, and when it's in Landscaper I'd like it to scroll horizontally.

In UICollectionView I can see the scrollEnabled member, but I can see no way to set the scroll direction. Have I missed something?

score 69 · Accepted Answer · edited Mar 22 '16 at 14:16

69

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];

Note too that it seems to be fine to call this in prepareForLayout in your flow layout...

@interface LayoutHorizontalThings : UICollectionViewFlowLayout
@end

@implementation LayoutHorizontalBooks
-(void)prepareLayout
    {
    [super prepareLayout];

    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    self.minimumInteritemSpacing = 0;
    self.minimumLineSpacing = 0;
    self.itemSize = CGSizeMake(110,130);
    self.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
    }

edited Mar 22 '16 at 14:16

Fattie

27,874
70
431
719

answered Dec 06 '13 at 10:59

user3040186

706
6
2

I'm seeing issues with this, where prepareLayout is intermittently not called early enough or called too late. The results are one of 3 things: 1) the horizontalSizeClass hasn't changed yet and scrolling direction is set incorrectly 2) scrollingDirection is set correctly but it's too late and doesn't take effect and 3) everything lines up properly and the scrolling direction actually takes effect as desired. It seems maybe Apple intends for scrolling direction to be managed in the view controller instead of the layout. – BTRUE Apr 17 '17 at 02:40

Gurjinder Singh · Answer 2 · 2018-10-08T10:01:13.083

16

Swift 4 and 4.2

if let layout = collectionViewObj.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.scrollDirection = .vertical  // .horizontal
    }

edited Oct 08 '18 at 10:01

answered Dec 11 '17 at 18:03

Gurjinder Singh

9,221
1
66
58

score 13 · Answer 3 · answered Aug 27 '13 at 11:37

13

Set the scrollDirection of the collection view's collectionViewLayout.

Docs are here.

answered Aug 27 '13 at 11:37

Mundi

79,884
17
117
140

5

This only applies if you're using a `UICollectionViewFlowLayout`. – Edward Dale Nov 02 '13 at 20:24
2

Thanks @Mundi, how do you know this stuff? Anyway, some code this for my own notes: `if let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout { flowLayout.scrollDirection = .Horizontal }` – Dan Rosenstark Aug 04 '16 at 16:36

Allan Scofield · Answer 4 · 2015-07-15T02:10:56.763

You should try this:

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{

  UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)[self.collectionView collectionViewLayout];

  if ((toInterfaceOrientation == UIInterfaceOrientationLandscapeRight) || (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft)){
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
  }
  else{
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
  } 
}

In Swift:

override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {

    var layout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout

    if ((toInterfaceOrientation == UIInterfaceOrientation.LandscapeLeft) || (toInterfaceOrientation == UIInterfaceOrientation.LandscapeRight)){

        layout.scrollDirection = UICollectionViewScrollDirection.Vertical
    }
    else{
       layout.scrollDirection = UICollectionViewScrollDirection.Horizontal
    }

}

Travis M. · Answer 5 · 2019-01-03T19:35:17.650

6

Kudos to Mundi and Dan Rosenstark for their answer, here's the swift 4.2 version.

if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowLayout.scrollDirection = .horizontal
}

edited Jan 03 '19 at 19:35

answered Sep 14 '17 at 20:08

Travis M.

10,930
1
56
72

Wide Angle Technology · Answer 6 · 2020-09-05T12:07:47.593

4

Do that in your Storyboard. From identity inspector and select the Scroll Direction and choose your direction.

edited Sep 05 '20 at 12:07

answered Sep 15 '17 at 04:47

Wide Angle Technology

1,184
1
8
28

How can I change the scroll direction in UICollectionView?

6 Answers6

Linked