Objective-C 960 Grid is here (Update: added android version)

960 grid view running on iphone simulator

More goodies.If you are like me and you break into a cold sweat at the very thought of using xcode’s interface builder to make a .nib file, and would much rather open up a code file and design your UIView then you are in for a treat.

Back Story

Feel free to skip pass this section if all you want is some free code, I wont judge you. Once upon a time…There was a guy who liked to build websites and mobile applications. Through his time in web design he grew to love the wonder that is the 960 grid layout, and more than that the

960 grid system website and their amazing css files. For those of you who haven’t already had a play with 960 css, have a play! So in short the 960 system divides a browser page (960px of it) into grids of equal width. You can specify the number of grids you would like, 12,16 or 24. once you have included this little magic css file you can assign grid values to your HTML sections. From here you are riding on easy street as the css will handle the widths and margins of your page sections. All you need to do is make sure your rows add up to 12,16 or 24 depending on the grid system you picked. and the result is a beautifully laid out web page (in theory). The nice thing with HTML is that when you add something new to your page it appears directly after the previous element, sadly when working with UIViews in objective-c this is not the case. You have too specify the CGRect frame for your interface elements, so you need to be on the ball and keep track of locations yourself. Not such a big issue if you are displaying static content, however this can be rather annoying when your content is dynamic and not always a consistent size/shape. Sadly objective-c doesn’t have the magical 960 grid system, until now!

Whats in the bag

So what do you get? and what can it do? You get two things, the ‘960’ and ‘960View’ and together they provide you with all the delights of HTML + 960 Grid System. The 960 file will set up the grid positions, paddings and widths. The 960View is a substitute for the UIView class. within which exists a overwritten methods for adding subviews, which will place each new interface element within the appropriate grid positions. You can use also of the 960 grid features, prefix, suffix, alpha, omega and choose from either 12,16 or 24 grids. Now something to mention before you dive in, obviously the iphone screen is not a full 960px wide. It’s 320px in portrait and 480px in landscape. So to have the 960 grid work for these dimensions I have simply scaled it down for these devices.

How to use it.

Create an instance of the 960View, by default it will use the 12 grids system, but you can change this by calling the setGridType method

-(void)setGridType:(int)type; Then to add an item into your interface simply call the addSubview method, and passing it the subview to be added, number of grids wide you would like it too be, prefix and suffix values then if it is an alpha or omega element. DONE. -(void)addSubview:(UIView *)view grid:(int)g prefix:(int)p suffix:(int)s alpha:(BOOL)alpha omega:(BOOL)omega; The 960View will check that your subview will fit inline, if not then just pop it on the next line. Likewise if you would like to take a new line within your interface you can call the *-(void)insertClear; *method and a clear line will be inserted like you would in the HTML version. For those of you that don’t want to use the grid widths for sizing your interface elements, you can still take advantage of the page flow method within the 960View, simply call the *-(void)addSubview:(UIView *)view *method which will just insert your subview at the next possible location (either next too the previous element, or on a new line). Enjoy. Goodies: 960 Grid iphone+android  

Leave a Comment