#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.
- Add the
RGSSystem.mfiles and import them
- Instantiate a new
RGSSystemin a viewController file
createPoints:withViewon that New System
- Use the fractions for the co-ordinates on any view you want to position.
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.
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.
###You only need the
RGSSystem.m to use the Grid System in your app. The rest is just there as an example project.
- ARC. Probably not. It would be easy to change it over anyway.
- Download the
- Add them to your Xcode project
- Import them in any view's (viewController's?)
.hfile 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
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.
- 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)
createPointson that new system, passing in whatever view you want to calculate the points for. So,
- Create/set the view to certain co-ordinates using a
CGRectMakeor 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 somePercentagedefinition to the
- Set the values for this property in the
[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
- 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];
#Where to get help Contact me on Twitter
#People Using Responsive iOS Grid System No one. It would be awesome if you did.
#Contribution guidelines Do whatever you want.
- Matthew Palmer