collection view or table view

Question

I'm trying to get a simple collection view to work. Basically I would like the collection view to be exactly like a table in a database with rows and columns where I can scroll horizontally. Something like this:

Player 1 cell 1 cell 2 cell 3 cell 4 ... cell 20

Player 2 cell 1 cell 2 cell 3 cell 4 ... cell 20

<----------- scroll --------------------------->

I'm using a collection view so I can determine exactly what cell the player is clicking and it would seem that it would give me more flexibility overall as opposed to a tableview.

The problem is I cannot for the life of me get the collection view to display like I want. The cells are being stacked vertically... example (no way to make them stay in one row and scroll horizontally to see the other columns of the row. example...

Player 1 cell 1 cell 2 cell3

cell 4 cell 6 cell 7 ...

Player 2 cell 1 cell 2 cell4

cell 4...

I'm starting to think that maybe collection view is not a good api to use and maybe I should be simply using a tableview. Any help would be greatly appreciated.

Answer 1

UICollectionView is so powerfull and easy to extend because it adds a new feature: UICollectionViewFlowLayout. I'm afraid you cannot get perfect solution for what you need by default implement in Cocoa, but it is so esay to extend the UICollectionViewFlowLayout to a new layout in your case maybe a snake layout.

If any help, maybe you can see this github url: KMCollectionViewSnakeLayout to get some tips. It's not the style like:

Player 1 cell 1 cell 2 cell3

cell 4 cell 6 cell 7 ...

Player 2 cell 1 cell 2 cell4

cell 4...

but is a style like:

Player 1 cell 1 cell 2 | Player 2 cell 1 cell 2

cell3 cell 4 cell 6    | cell3 cell 4 cell6

cell 7 ...             | cell7

Take a while to read it or the Apple Doc, you will got a lot!

Answer 2

Here's my attempt to do this. It works, but as this is my first attempt at a custom layout, I'm sure there are things that could be done to improve it. I made a subclass of UICollectionViewFlowLayout called MultipleLineLayout with this code:

@implementation MultpleLineLayout {
    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 + 20) + 60;
    NSInteger ySize = [self.collectionView numberOfSections] * (itemHeight + 20) ;
    return CGSizeMake(xSize, ySize);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
    UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
    NSInteger xValue;
    if (path.row == 0) {
        itemWidth = 120;
        attributes.size = CGSizeMake(itemWidth,itemHeight);
        xValue = itemWidth/2 + path.row * (itemWidth +20);
    }else{
        itemWidth = 60;
        attributes.size = CGSizeMake(itemWidth,itemHeight);
        xValue = itemWidth/2 + path.row * (itemWidth +20) + 60;
    }
    NSInteger yValue = itemHeight + path.section * (itemHeight +20);
    attributes.center = CGPointMake(xValue, yValue);
    return attributes;
}


-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {
    NSInteger minRow =  (rect.origin.x > 0)?  rect.origin.x/(itemWidth +20) : 0; // need to check because bounce gives negative values  for x.
    NSInteger maxRow = rect.size.width/(itemWidth +20) + 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;
}

This is the code in the view controller:

#import "ViewController.h"
#import "MultpleLineLayout.h"

@interface ViewController ()
@property (strong,nonatomic) UICollectionView *collectionView;
@property (strong,nonatomic) NSArray *theData;
@end

@implementation ViewController

- (void)viewDidLoad {
    self.theData = @[@[@"Player 1",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"], @[@"Player 2",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"Player 3",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"Player 4",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"]];
    MultpleLineLayout *layout = [[MultpleLineLayout alloc] init];
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.view.backgroundColor = [UIColor blackColor];
    [self.view addSubview:self.collectionView];
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];
    [self.collectionView reloadData];
}


- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
    return [self.theData[section] count];
}

- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
    return [self.theData count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView  dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    [cell.contentView.subviews.lastObject removeFromSuperview]; //removes the label from a dequeued cell so we can make a new one of the right size.
    UILabel *label;
    if (indexPath.row == 0) {
        label = [[UILabel alloc]initWithFrame:CGRectMake(10, 15, 100, 30)];
    }else{
        label = [[UILabel alloc]initWithFrame:CGRectMake(10, 15, 40, 30)];
    }
    label.backgroundColor = [UIColor yellowColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = self.theData[indexPath.section][indexPath.row];
    [cell.contentView addSubview:label];
    cell.backgroundColor = [UIColor orangeColor];
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *item = [collectionView cellForItemAtIndexPath:indexPath];
    NSLog(@"%@",[(UILabel *)item.contentView.subviews.lastObject text]);

}

So, my data is set up as an array of arrays, with each subarray being one player and his scores. This layout does seem to keep each players cells in a horizontal line. I made the first cell of each line bigger to hold the players name -- I'm not sure what's the best way to deal with this one larger cell. I've hard coded some numbers, but that's probably not the best way.

I welcome any suggestions for improvement, or fixes.

Answer 3

I haven't used this personally, but it seems to be recommended on other SO posts:

https://github.com/TheVole/HorizontalTable

Perhaps this might work better than a UICollectionView ?

(See this post also: How to make a horizontal UI table view on iPhone?)

Good luck!