Open Source Ecosystems

#Description Responsive iOS Grid System (prefix of RGS) is a responsively designed frame that creates system of points for use in iOS apps. Basically, it's a class that does some fractions so you can use the points as locations for positioning views. It means you can use the same code on all iOS screen sizes and it will still be in proportion. I've used a 12-column/row system, but you can add your own sizes really easily (even with percentages). You could probably use xibs for this, but I could never work out how so I made this. Programmatically is better for using git anyway.

I know it's kind of not really responsive in the same sense as it is on the web, but it's kind of similar. Maybe it would be better to describe it as fluid.

If you see anywhere in the docs the prefix of GS used instead of RGS please open an issue and I'll fix it up. My attempts at Perl scripting might not have gone very well.

#Quick Use

Add the RGSSystem.h and RGSSystem.m files and import them
Instantiate a new RGSSystem in a viewController file
Call createPoints:withView on that New System
Use the fractions for the co-ordinates on any view you want to position.

#The Project I've set the included project up as a sample app. This is the easiest way to get an understanding of the class and how to use it if my instructions are terrible. The RGSSystem files are the guts of the fractions, the viewController files are just the implementation. Thus, if you want to use the Grid System, you just have to add the RGSSystem files to your project.

#####Screenshots If you're running this on an actual device, it would be awesome if you sent me a photo.

Retina iPad

Normal iPad

iPhone 4 inch iPhone 5 (4 inch screen

iPhone 3.5 inch 3.5 inch iPhone

Sorry about the huge images. As you can see, everything stays in place and in proportion. Perfect for quickly doing an iPad and an iPhone app.

#Installation instructions ###You only need the RGSSystem.h and RGSSystem.m to use the Grid System in your app. The rest is just there as an example project.

Requires:

ARC. Probably not. It would be easy to change it over anyway.

Instructions:

Download the RGSSystem.h and RGSSystem.m files
Add them to your Xcode project
Import them in any view's (viewController's?) .h file and use them
Look through the Usage docs and the sample project

#Usage ###Sample Uses: Please see the xcodeproject for some basic usage patterns. It's pretty easy to pick up.

I've tried to make naming them as verbose as possible. Xcode autocompletes everything anyway so don't think you're going to be typing a lot. Essentially, the fractions are named from left to right and from top to bottom. ##Naming ###Left to Right

oneTwelfthLeft - 1/12 of the distance across the view
twoTwelfthsLeft - 2/12 (1/6) of the distance across the view
threeTwelfthsLeft - 3/12 (1/4) of the distance across the view
…
twelveTwelfthsLeft - 12/12 (the whole way) of the distance across the view

###Top to Bottom

oneTwelfthTop - 1/12 of the distance down the view
twoTwelfthsTop - 2/12 of the distance down the view
and so on.

Note the 's' on the plurals. I was debating whether to include this. Let me know what you think

##Co-ordinates Basically, xTwelfthsLeft is the grid co-ordinate (starting from the top left) that is x/12 distance across the view from the left. Same with the vertical co-ordinates in xTwelfthsTop from the top.

##Implementation

Instantiate a new RGSSystem with RGSSystem *someNewSystem = [[RGSSystem alloc]init];
(Note: It would be nice to incorporate the next step into the init method. I haven't decided what is ideal yet. It's only one extra line)
Call createPoints on that new system, passing in whatever view you want to calculate the points for. So, [someNewSystem createPoints:someView];
Create/set the view to certain co-ordinates using a CGRectMake or whatever and using the RGSSystem points.

UIView *someSampleBox = [[UIView alloc]initWithFrame:CGRectMake([someNewSystem oneTwelfthLeft], [someNewSystem oneTwelfthTop], [someNewSystem tenTwelfthsLeft], [someNewSystem tenTwelfthsTop])];

Add the subview to the view

In your view file, you'll use this basic structure. Read the comments.

RGSSystem *RGSMainSystem = [[RGSSystem alloc]init]; //create one of these for each view you want to use the grid system on.
[RGSMainSystem createPoints:[self view]]; //creates the grid point values. [self view] is the view to use to calculate points for our fractions. EG tenTwelfthsLeft will be 10/12 across on the [self view] view

UIView *someSampleBox = [[UIView alloc]initWithFrame:CGRectMake([RGSMainSystem oneTwelfthLeft], [RGSMainSystem oneTwelfthTop], [RGSMainSystem tenTwelfthsLeft], [RGSMainSystem tenTwelfthsTop])];
[someSampleBox setBackgroundColor:[UIColor redColor]];
[[self view]addSubview:someSampleBox];

##Sub Grid (subview) Systems These work the same as the normal way, except you have to use a different view and create a new RGSSystem.

//Let's add a subivew using another Grid System
RGSSystem *RGSSubSystem = [[RGSSystem alloc]init];
[RGSSubSystem createPoints:someSampleBox];

UIView *smallerBox = [[UIView alloc]initWithFrame:CGRectMake([RGSSubSystem twoTwelfthsLeft], [RGSSubSystem oneTwelfthTop], [RGSSubSystem eightTwelfthsLeft], [RGSSubSystem twoTwelfthsTop])];
[smallerBox setBackgroundColor:[UIColor blueColor]];
[someSampleBox addSubview:smallerBox]; //THERE *IS* A DIFFERENCE BETWEEN THIS AND [[self view] addSubview:smallerBox]

##Adding Custom Grids

Add a new @property float somePercentage definition to the RGSSystem.h file
Set the values for this property in the RGSSystem.m file using [self setSomePercentage: xPercentage*screenWidth/100]; for percentages. If you're not using percentages, replaces xPercentage with the numerater of the fraction across the screen and '100' with the denominator (E.G. for 23/57 across (or down) the screen do 23*screenWidth/57)
Implement the new fraction in the view.

//Our custom fifty six percent box. It's added at 56% of the main view
RGSSystem *GSCustomSystem = [[RGSSystem alloc]init]; //NOTE: 	We could just use one of the above ones. But whatever.
[GSCustomSystem createPoints:[self view]];

UIView *customFiftySixPercentView = [[UIView alloc]initWithFrame:CGRectMake([GSCustomSystem fiftySixPercentLeft], [RGSMainSystem elevenTwelfthsTop], [RGSMainSystem fourTwelfthsLeft], [RGSMainSystem oneTwelfthTop])];
[customFiftySixPercentView setBackgroundColor:[UIColor yellowColor]];
[[self view]addSubview:customFiftySixPercentView];