Question

I’m building an iPad app, and would like to use a “tiled” display with objects arranged in a scrollable grid, similar to the iPhone/iPad home screen and the iPad photos app.

What I’m trying to achieve:

http://dl.getdropbox.com/u/413086/mzl.nbioluoe.480×480-75.jpg

(iTunes link)

Is there any pre-built way in the SDK to do this? If not, how should I go about creating my own?

Update: I think I understand how to do a basic arrangement of the “objects” in a grid, but I don’t know how to make this work with thousands of objects and a scrollable view without using tons of memory and making everything really slow (then again, I still don’t have a device to test on).

Update 2:

Half a month later, I finally found the ideal solution: AQGridView

Answer 1

Use or derive from UIScrollView for the view that contains all the tiles. Either implement the delegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView; method or override the - (void)setContentOffset:(CGPoint)contentOffset method. Set the content size of the scroll view as if all the tiles were present.

When the scroll view scrolls, figure out which tiles will be shown on screen. Then either use a recycling scheme like UITableView does with cells, or just add newly created tiles as needed and delete ones that are farthest from the visible area when you have reached your memory quota. Your example shows 2×3 tiles fully visible so you would need to keep at least 4×5 tiles present.

If you have two columns of tiles and no horizontal scrolling (not clear from picture), you can just use a UITableView directly and implement a custom UITableViewCell that displays two tiles.

If you are deriving from UIScrollView, a best practive would be to mirror the interface used by UITableView with dataSource and delegate callbacks. You would have numberOfRows:, numberOfColumns: and tileForRow:column: instead of numberOfRows:, numberOfSections:, and cellForIndexPath: but the principal is the same. It looks like you can use fixed sized tiles which simplifies things a lot.