Create a Editable Grid View as in iBooks

Question

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.

Answer 1

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

Answer 2

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/

Answer 3

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.