Grid view in iOS

Question

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.

catlan · Answer 1 · 2012-09-19T20:23:14.357

25

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

edited Sep 19 '12 at 20:23

answered Sep 18 '10 at 19:01

catlan

25,100
8
67
78

I would just like to add that at the current moment the horizontal layout mode is bugged. If you're in it for this feature consider using something else. – Nailer Sep 18 '12 at 14:29
@Nailer, I updated my answer a bit to recommend UICollectionView instead of AQGridView. – catlan Sep 19 '12 at 20:24

score 10 · Answer 2 · answered Dec 28 '11 at 00:30

10

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.

answered Dec 28 '11 at 00:30

morcutt

3,739
8
30
47

Since this post, I've recently switched to using KKGridView in my projects. Check it out at https://github.com/kolinkrewinkel/KKGridView. – morcutt Jun 21 '12 at 18:34
Care to comment on why you switched? Just curious about the differences. – Nailer Sep 18 '12 at 15:01
@morcutt I've used GMGridView and found it very good (so far). Would also like to know why you switched.. – Ben Clayton Sep 18 '12 at 16:33
@Ben Yeah, I find GMGridView to be quite good too. My only gripe with it was that it didn't support setting up vertical and horizontal grid cell spacing. I fixed that in 10 minutes by introducing separate values for this instead of just a single itemSpacing property. – Nailer Sep 20 '12 at 11:51

score 9 · Accepted Answer · answered Feb 15 '10 at 11:30

9

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 :)

answered Feb 15 '10 at 11:30

willcodejavaforfood

43,223
17
81
111

image will be displayed alright, but what can be done if I want to tap on an image. In that case the whole row will be selected not the single UIView inside the custom UITableViewCell. – vikmalhotra May 02 '12 at 12:25
2

use UITapGestureRecognizer attached to each UIImageView rather than using didSelectRowAtIndexPath – Doug Jul 29 '12 at 00:26

score 2 · Answer 4 · answered Sep 27 '12 at 14:03

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;
}

This is also the simplest way I can think of without using UICollectionView(only available since iOS 6) or 3rd party libraries. But I am also reading the source code of those 3rd libraries to see it there is any better way, but they seem to be more complicated to understand. Not sure if I missed any key part. — Dino Tw, Feb 27 '14 at 18:49

Ahsan · Answer 5 · 2012-05-26T19:29:38.520

1

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.

edited May 26 '12 at 19:29

answered May 03 '12 at 21:41

Ahsan

2,964
11
53
96

score -1 · Answer 6 · answered Feb 19 '12 at 20:34

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.

Grid view in iOS

6 Answers6

Linked