Grid view in iOS [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

I would like to create a grid view开发者_开发问答 in my iPhone app similar to that shown in the iPad photos app. Is there a library or framework available for adding this kind of functionality (non-SDK)? Ideally I would like to eventually develop an iPad version of the app, where the grid would be 3 items wide in portrait and 4 in landscape, however for the time being I would like 2 items wide in portrait and 3 wide in landscape.

The only way I can think of doing this is by subclassing UITableView and having a custom cell that creates the 2 or 3 items. This however seems messy and I am sure that there is a better way.

A typical item will have a picture, label and button - nothing too complicated.

---

For iOS 6 and above I recommend UICollectionView and PSTCollectionView.

The goal is to use PSTCollectionView on iOS 4/5 as a fallback and switch to UICollectionView on iOS6. We even use certain runtime tricks to create UICollectionView at runtime for older versions of iOS. Ideally, you just link the files and everything works on older systems.

In the year 2010 I recommended AQGridView

---

I'm aware this is very old but I was searching for answer to this and tested several solutions. I found GMGridView was one of the best, least buggy solutions. Check it out at https://github.com/gmoledina/GMGridView.

---

You can still use the UITableView for this and you would not need to subclass it. Like you said all you have to do is create your own custom cell which it is not complicated. Not messy at all :)

---

To make simple grid view in your table view create class "GridViewCell" and in header file add:

@interface GridViewCell : UITableViewCell

@property (nonatomic, strong)  UIButton *column1;
@property (nonatomic, strong)  UIButton *column2;
@property (nonatomic, strong)  UIButton *column3;

@end

in .m file add this code:

#define CELL_WIDTH 100
#define CELL_HEIGHT 80

#import "GridViewCell.h"

@implementation GridViewCell

@synthesize column1, column2, column3;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
    column1 = [[UIButton alloc] initWithFrame:CGRectMake(5, 5, CELL_WIDTH, CELL_HEIGHT)];
    [self addSubview:column1];
    column2 = [[UIButton alloc] initWithFrame:CGRectMake(CELL_WIDTH+ 10, 5, CELL_WIDTH, CELL_HEIGHT)];
    [self addSubview:column2];
    column3 = [[UIButton alloc] initWithFrame:CGRectMake(CELL_WIDTH + CELL_WIDTH + 15, 5, CELL_WIDTH, CELL_HEIGHT)];
    [self addSubview:column3];
}
return self;
}

@end

and when you create your table use new class "GridView" in delegate cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    GridViewCell *cell = (GridViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[GridViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    [cell.column1 setBackgroundColor:[UIColor blackColor]];
    [cell.column2 setBackgroundColor:[UIColor blackColor]];
    [cell.column3 setBackgroundColor:[UIColor blackColor]];

    return cell;
}

---

NRGridView seems to be the best way around. You can find it here.

It has the similar methods as UITableView. The cells can be customized as necessary.

---

I would recommend using custom UITableViewCells. In iOS 5 you don't have to subclass them. Just add a tableView to your project, add a prototype cells (=custom cell) using Xcode to the tableView, give them a unique identifier and use this identifier in cellForRowAtIndexPath to dequeue and instantiate your custom cell. Then set the cell and return it.