Objective-C reusable scrollable grid view for Cocoa Touch modeled after UITableView.
(Above is two screenshots of CHGridView with CHImageTileView, one with Photos-style layout, and another with iPhoto-style layout.)
I want this to be the last grid view I make. Right now, it's basically a UITableView clone with tiles instead of cells, but in the future I want it to be customizable and flexible enough to reproduce paged icon views, handle un-scrollable grids, display 2000 images, show iPad-like photo stacks with pinch-to-open, and anything else that can be represented with a grid.
CHGridView is modeled after UITableView. You initialize CHGridView, set a delegate and data source, then give it tiles. It's designed to be as easy to use as UITableView.
NOTICE: CHGridView is not production-level software yet. Don't use it in shipping software.
rectfor a tile.
Exactly like UITableView. Just implement the two required data source methods:
tileForIndexPath. CHGridView assumes there is at least one section. The method
tileForIndexPathworks very much like UITableView; CHGridView reuses tiles like UITableView reuses cells. Call
dequeueReusableTileWithIdentifierto get a reusable tile, if it's
autoreleasea new tile and return it.
There's two basic styles to use in GHGridView, one that resembles the Photos application, and one that mimics iPhoto and the iPad photo grid. The property that controls it is called
centerTilesInGrid. Set it to
YESfor the iPhoto style. If you want the iPhoto style, you need to make sure
rowHeightis higher than your tallest image.
Row height, tiles per line, padding, section title height and shadow are all properties of CHGridView. These are not meant to change often like the data source and delegate methods. However, if you do change them, make sure to call
reloadDatato recalculate the layout.
Shadows are drawn in Core Graphics and add to your padding. Adjust shadow properties and padding until a desirable result is achieved.
Orientation changes and resizing are supported. Section titles and tiles are set to the correct autoresizing mask, but you should call
reloadDataafter you resize CHGridView for optimal re-layout, same goes for re-orientation.
If you disable scrolling with
setScrollingEnabled, you can probably use this as a un-scrollable grid view, but I haven't tested it.
CHGridView only loads visible tiles and section titles, plus four rows above and beneath (on the Original iPhone, iPhone 3G or first-generation iPod Touch, it only loads two rows). There's only about 30 or 50 tiles loaded at any single time.
CHGridView, like most scalable computer interfaces, makes trade-offs. It's currently optimized to for low memory usage, but requires more processor cyles. Performance is roughly the same if you use 3000 tiles or 200 tiles. Optimally CHGridView should be smart enough to switch this trade-off at some point (if < 400 tiles, for instance).
[self isOpaque]to compensate for transparency if needed.
I've tested CHGridView informally with a test application on both my iPhones. For my data source, I used 31 images to populate 2,976 tiles separated into 96 sections. They were exported from iPhoto as PNGs with a maximum width of 160 pixels, then were drawn centered and cropped in CHImageTileView. Scrolling performance is not as good as Apple's Photos grid view, especially on my original iPhone.
Admittedly, performance could be better. If you see something that could be improved, send an email to [email protected].