2

There have been some similar questions asked regarding Grid views, but none have been sufficiently answered (some have been left unanswered as the SDKs were under NDAs at the time).

The question is: Can anyone direct me towards a tutorial, or explain to me what steps to take to create a Grid View similar to iBooks, or the Yahoo! Entertainment app on the iPhone?

Here's a screenshot of what I mean.

3 Answers 3

13

AQGridView popped up over the weekend (due to an iPadDevCamp contest) which does the grid view thingy. I'm not sure if it's editable, though. If it's not, it is open source....

It's been designed to be an iPhone version of NSCollectionView, which supports automatic layout. AQGridView will also reflow your cells. It behaves very much like a UITableView from an implementor's point of view.

Announcement post: http://quatermain.tumblr.com/post/528737778/aqgridview-lives-for-my-ipad-dev-camp-hackathon

0
1

I don't know about iPad, but these types of grid view are always implemented as a UITableView with custom cells on iPhone. One example of this is the Apple Photos app. It looks like a grid with 4 columns, but in reality it's a table view and each cell has 4 photos in it.

If you're looking for sample code, have a look at the Three20 project:

http://joehewitt.com/post/the-three20-project/

2
  • I was thinking about this, but it would just seem to over-complicate things. I haven't looked at the three20 code in depth but I can't figure out intuitively how you would handle the indexPath stuff in a case such as this. However, I will check out the code before choosing an answer. Thanks nevan!
    – Tilo Mitra
    Apr 19, 2010 at 18:53
  • 1
    For the index path, if you have 4 columns, divide the array position by 4 and convert to an int. That will give you the table cell index. Find the modulus of 4 for the photo position in the table cell. My math is shaky, but I think it would work.
    – nevan king
    Apr 19, 2010 at 19:44
1

I would just place a bunch of UIButtons onto the view. You could do this in IB or just do it in code, like this:

self.newsView = [UIButton buttonWithType:UIButtonTypeCustom];
[self.newsView setImage:[UIImage imageNamed:@"news.png"] forState:UIControlStateNormal];
[self.newsView addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
self.newsView.tag = 1;

...where the tag property is used to keep track of what button is what. Then in your buttonAction method, look at the tag to determine what action to take.

1
  • Thanks for this Joe. It seems to me that this would work well for a static Grid, but not so much for a dynamic one. For a static grid, I agree this would probably be the easiest solution.
    – Tilo Mitra
    Apr 19, 2010 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.