Easy CGGradients
Drawing your own view content can be much better than using images, particularly if you are dealing with universal applications. Once you take into account retina and non-retina, iPad and iPhone, 3.5 and 4 inch you can be managing a plethora of images, and if (when?) any changes are made to the design during development, that’s a lot of files to regenerate and replace in your project.
Lots of common designs can be easily drawn in code, but the core graphics API for drawing gradients is a little bit impenetrable, particularly if you are used to Objective-C as opposed to C.
Here is a simple category method on UIColor
to facilitate the creation of gradients. It is an instance method, returning a CGGradient
from the receiver to the passed in UIColor
object. The source is also available on GitHub.
Header
@interface UIColor (EasyGradient)
-(CGGradientRef)newGradientToColor:(UIColor*)color;
@end
Implementation
-(CGGradientRef)newGradientToColor:(UIColor*)color
{
// Caller is responsible for releasing
// Are we in the RGB colour space?
BOOL selfOK,colorOK;
CGFloat r1,r2,g1,g2,b1,b2,a1,a2;
selfOK = [self getRed:&r1 green:&g1 blue:&b1 alpha:&a1];
colorOK = [color getRed:&r2 green:&g2 blue:&b2 alpha:&a2];
if (selfOK && colorOK)
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
size_t num_locations = 2;
CGFloat locations[2] = {0.0,1.0};
CGFloat components[8] = { r1,g1,b1,a1, r2,g2,b2,a2 };
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, num_locations);
CGColorSpaceRelease(colorSpace);
return gradient;
}
// Try grayscale
CGFloat w1,w2;
selfOK = [self getWhite:&w1 alpha:&a1];
colorOK = [color getWhite:&w2 alpha:&a2];
if (selfOK && colorOK)
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
size_t num_locations = 2;
CGFloat locations[2] = {0.0,1.0};
CGFloat components[4] = { w1,a1, w2,a2 };
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, num_locations);
CGColorSpaceRelease(colorSpace);
return gradient;
}
// otherwise, we can't do anything
NSAssert(NO,@"Colors must be in RGB or Grayscale color space");
return NULL;
}
Here’s a snippet of it in action:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGGradientRef monoGradient = [[UIColor colorWithWhite:0.0 alpha:1.0] newGradientToColor:[UIColor colorWithWhite:0.5 alpha:1.0]];
CGContextAddEllipseInRect(context, CGRectInset(self.bounds,5.0,5.0));
CGContextClip(context);
CGContextDrawLinearGradient(context, monoGradient, CGPointMake(0.0, 0.0), CGPointMake(0.0, CGRectGetMaxY(self.bounds)), 0);
CGGradientRelease(monoGradient);
CGGradientRef colourGradient = [[UIColor redColor] newGradientToColor:[UIColor purpleColor]];
CGContextAddEllipseInRect(context, CGRectInset(self.bounds,15.0,15.0));
CGContextClip(context);
CGContextDrawLinearGradient(context, colourGradient, CGPointMake(0.0, 0.0), CGPointMake(0.0, CGRectGetMaxY(self.bounds)), 0);
CGGradientRelease(colourGradient);
}
Results:
Beautiful!