Make NSCollectionView render items vertically

Question

Is it possible to make the items in an NSCollectionView render top-down and then left-right instead of left-right and then top-down? To depict it visually, items are currently rendered in the following order:

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

I want them to appear like this:

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

Thanks.

rdelmar · Answer 1 · 2012-12-14T19:04:45.867

0

The order in which the items are displayed is determined by their order in the array the holds your data. You will get the order you want if you change the scrolling to horizontal, but if you want the scrolling to remain vertical, then you need to change the order of the objects in the array.

To make the scrolling horizontal, do this:

 flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

flowLayout is a reference to the UICollectionViewFlowLayout object used when the collection view was initialized (I'm assuming that you've already done that).

edited Dec 14 '12 at 19:04

answered Dec 14 '12 at 17:38

rdelmar

103,982
12
207
218

How can I go about changing the scrolling to be horizontal? – sohum Dec 14 '12 at 19:00
3

Uh, question is about NSCollectionView, this answer is about UICollectionView. – Jaanus May 14 '13 at 08:43

score 0 · Answer 2 · answered May 04 '17 at 01:53

Yes with one caveat.

If you set the Scroll Direction of the NSCollectionView to Horizontal that will cause the items in the collection view to be laid out in columns rather than rows.

[ 1 ] [ 5 ] [ 9 ]
[ 2 ] [ 6 ]   |
[ 3 ] [ 7 ]   |
[ 4 ] [ 8 ]   V

To do this in Interface Builder 8 select the collection view, open the Attributes Inspector and select Horizontal from the popup button:

You can also achieve the same effect in code by setting the scrollDirection property on the collection view's layout. N.B. The collection view's layout needs to be NSCollectionViewFlowLayout

NSCollectionViewFlowLayout *flowLayout = [NSCollectionViewFlowLayout alloc] init];
flowLayout.scrollDirection = NSCollectionViewScrollDirectionHorizontal;

NSCollectionView *collectionView = [NSCollectionView alloc] init];
collectionView.collectionViewLayout = flowLayout;

The caveat is that this doesn't work how you might expect with sections. You might expect sections to be stretched out across the view, flowing down the screen and then for items to laid out in columns nested in each section. That is not the case. Sections will become vertical separators and stretch the height of the view and are laid out across the screen along with the items like so:

⌈s⌉ [ 1 ]  ⌈s⌉ [ 1 ] [ 5 ] 
|s| [ 2 ]  |s| [ 2 ] [ 6 ] 
|s| [ 3 ]  |s| [ 3 ] 
⌊s⌋        ⌊s⌋ [ 4 ]

Make NSCollectionView render items vertically

2 Answers2