UICollectionViewFlowLayout implementation

Question

I am trying to accomplish the following, I've done this easily with UIScrollview but I've been experimenting with UICollectionView lately (I know I'm pretty late to the game) and would love to know if in order to do what I want I have to implement a custom layout or if FlowLayout already does this for me.

Basically, if you look at the attachment, you will notice that scrolling can happen both vertically and horizontally, the rows go all the way to beyond the UICollectionView height. The same happens with columns going beyond the width of the collection view.

Is this possible to do with Flowlayout?

Sample

Yes, you can do this with a subclass of flow layout. – rdelmar Jul 18 '13 at 21:23 — rdelmar, Jul 18 '13 at 21:23

rdelmar · Accepted Answer · 2013-07-19T15:20:14.017

I've done it like this.

#define space 5
#import "MultpleLineLayout.h"

@implementation MultpleLineLayout { // a subclass of UICollectionViewFlowLayout
    NSInteger itemWidth;
    NSInteger itemHeight;
}

-(id)init {
    if (self = [super init]) {
        itemWidth = 60;
        itemHeight = 60;
    }
    return self;
}

-(CGSize)collectionViewContentSize {
    NSInteger xSize = [self.collectionView numberOfItemsInSection:0] * (itemWidth + space); // "space" is for spacing between cells.
    NSInteger ySize = [self.collectionView numberOfSections] * (itemHeight + space);
    return CGSizeMake(xSize, ySize);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
    UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
    attributes.size = CGSizeMake(itemWidth,itemHeight);
    int xValue = itemWidth/2 + path.row * (itemWidth + space);
    int yValue = itemHeight + path.section * (itemHeight + space);
    attributes.center = CGPointMake(xValue, yValue);
    return attributes;
}


-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {
    NSInteger minRow =  (rect.origin.x > 0)?  rect.origin.x/(itemWidth + space) : 0; // need to check because bounce gives negative values  for x.
    NSInteger maxRow = rect.size.width/(itemWidth + space) + minRow;
    NSMutableArray* attributes = [NSMutableArray array];
    for(NSInteger i=0 ; i < self.collectionView.numberOfSections; i++) {
        for (NSInteger j=minRow ; j < maxRow; j++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForItem:j inSection:i];
            [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
        }
    }
    return attributes;
}

My data source was an array of arrays with each inner array providing the data for an individual row.

After Edit:

My collection view scrolled in both directions. This is what I had in my viewDidload to set things up:

- (void)viewDidLoad {
    self.theData = @[@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"], @[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"Z0",@"Z1",@"Z2",@"Z3",@"Z4",@"Z5",@"Z6",@"Z7",@"Z8",@"Z9",@"Z10",@"Z11",@"Z12",@"Z13",@"Z14",@"Z15",@"Z16",@"Z17",@"Z18",@"Z19",@"Z20"]];
    MultpleLineLayout *layout = [[MultpleLineLayout alloc] init];
    self.collectionView = [[RDCollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    self.view.backgroundColor = [UIColor blackColor];
    [self.view addSubview:self.collectionView];
    [self.collectionView registerClass:[DataCell class] forCellWithReuseIdentifier:@"DataCell"];
    [self.collectionView reloadData];
}

Problem remains scrolling stays to one direction only, I can scroll horizontally which is great, but I've got content that remains hidden scrolling vertically. Any ideas? — MrShoot, Jul 19 '13 at 14:54
@MrShoot, I updated my answer to show the setup in the controller. I didn't do anything special to make it scroll both ways. — rdelmar, Jul 19 '13 at 15:21
My bad! I completely missed the content size part! Silly me! Great answer, thanks a ton for the reference code — MrShoot, Jul 19 '13 at 15:35
is there a way to specify individual widths for the cells in a row? I added the delegate to my controller with different sizes for the cells but it's like the layout doesn't respect that. Do you have a solution to this? — MrShoot, Jul 19 '13 at 18:55
@MrShoot, I haven't tried that, but any place in the layout where I have itemWidth, you'd have to get the width you need for that particular cell instead of using the fixed value. — rdelmar, Jul 19 '13 at 19:52
Last question real quick, how do I figure out displaying the data. Seems the data just repeats over and over when requesting the array of objects at indexPath.row. I guess is not quite like UITableView? Seems the cell it returns is the same cell for the WHOLE row. — MrShoot, Jul 19 '13 at 21:06
@MrShoot, no, it should be just like a table view. Each row should be an inner array from an array of arrays. My labels were populated with: cell.label.text = self.theData[indexPath.section][indexPath.row]; — rdelmar, Jul 19 '13 at 23:42

UICollectionViewFlowLayout implementation

1 Answers1