Last active
August 29, 2015 13:55
-
-
Save conorgriffin/431c752583df6221afc2 to your computer and use it in GitHub Desktop.
A board game grid UIView subclass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// CJGGridView.h | |
// | |
// | |
// Created by Conor Griffin on 30/12/2013. | |
// Copyright (c) 2013 Conor Griffin. All rights reserved. | |
// | |
#import <UIKit/UIKit.h> | |
@interface CJGGridView : UIView | |
@property (nonatomic) CGFloat squareSize; | |
- (id)initWithSquareSize:(float)squareSize; | |
@end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// CJGGridView.m | |
// | |
// | |
// Created by Conor Griffin on 30/12/2013. | |
// Copyright (c) 2013 Conor Griffin. All rights reserved. | |
// | |
#import "CJGGridView.h" | |
@implementation CJGGridView | |
- (id)initWithSquareSize:(float)squareSize | |
{ | |
self = [super init]; | |
if (self) { | |
self.squareSize = squareSize; | |
} | |
return self; | |
} | |
- (void)drawRect:(CGRect)rect { | |
[super drawRect:rect]; | |
CGPoint boardOrigin; | |
CGContextRef context = UIGraphicsGetCurrentContext(); | |
/* | |
This is an 8x8 grid. Core Graphics starts drawing from the bottom-left corner so | |
boardOrigin.y is set to 7-times the square's side length. This starts drawing | |
squares beginning with the upper-left square, working right and then down through | |
each row with a couple of nested for-loops | |
*/ | |
boardOrigin.y = self.squareSize * 7; | |
for(int row = 0; row < 8; row++) { | |
for(int column = 0; column < 8; column++) { | |
CGRect square = { | |
boardOrigin.x + (column * self.squareSize), | |
boardOrigin.y - (row * self.squareSize), | |
self.squareSize, | |
self.squareSize}; | |
// This is a handy little way of laying out the right box colours | |
// When the row number and column number added together is divisible by | |
// two, set the fill colour to dark blue, otherwise set it to light blue | |
if((row + column) % 2 == 0) { | |
// a dark blue | |
CGContextSetRGBFillColor(context, 0.02, 0.28, 0.48, 1.00); | |
} | |
else { | |
// a light blue | |
CGContextSetRGBFillColor(context, 0.34, 0.72, 1.00, 1.00); | |
} | |
CGContextFillRect(context, square); | |
} | |
} | |
// Add a nice gradient overlay | |
CAGradientLayer* gradientOverlay = [CAGradientLayer layer]; | |
gradientOverlay.frame = rect; | |
gradientOverlay.colors = [NSArray arrayWithObjects:(id) | |
[UIColor colorWithRed:0. green:0. blue:0. alpha:0.7].CGColor, | |
[UIColor colorWithRed:0. green:0. blue:0. alpha:0.99].CGColor, | |
nil]; | |
gradientOverlay.locations = [NSArray arrayWithObjects: | |
[NSNumber numberWithFloat:0.0], | |
[NSNumber numberWithFloat: (self.squareSize * 6) / self.frame.size.height], | |
nil]; | |
gradientOverlay.startPoint = CGPointMake(0.1, 0.1); | |
gradientOverlay.endPoint = CGPointMake(1, 1); | |
[self.layer setMask:gradientOverlay]; | |
} | |
@end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment