I recently came across the need to use gradients in an app and I realised that I had two options. Create an image of the gradient in Photoshop and place it into a UIImageView or create a dynamic UIView that draws a gradient into it.

I decided to go for the latter, because I’d need gradients of all different sizes and angles and that would be a lot of photoshop work!

I learnt a lot of this code from Ray Wenderlich, who actually has been instrumental in most of my iOS knowledge!

My UIView Subclass

I opted to create a subclass of UIView called FadeOutView and inside this, I added a parameter to initWithFrame method to allow me to pass a certain variable called ‘horizontal’. This would help define which direction I would like my gradient drawn at.

#import <UIKit/UIKit.h>
@interface FadeOutView : UIView {
    BOOL horizontal;
}
- (id)initWithFrame:(CGRect)frame direction:(BOOL)horizontalDirection;
@end

//-----------

#import "FadeOutView.h"
@implementation FadeOutView
- (id)initWithFrame:(CGRect)frame direction:(BOOL)horizontalDirection {
    horizontal = horizontalDirection;
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}
@end

#import <UIKit/UIKit.h>

@interface FadeOutView : UIView {

BOOL horizontal;

}

- (id)initWithFrame:(CGRect)frame direction:(BOOL)horizontalDirection;

@end

//-----------

#import "FadeOutView.h"

@implementation FadeOutView

- (id)initWithFrame:(CGRect)frame direction:(BOOL)horizontalDirection {

horizontal = horizontalDirection;

self = [super initWithFrame:frame];

if (self) {

// Initialization code

self.backgroundColor = [UIColor clearColor];

}

return self;

}

@end

The initWithFrame:direction method above is identical to the initWithFrame method which is required by the UIView, it even calls it as a super method. All I’ve done to this is pass the horizontalDirection variable and stored it as an instance variable.

My drawRect method is where I’d like to actually draw the gradient.
You only need to override the drawRect method on a UIView if you want to do some custom drawing, which in this case I do!

As previously mentioned, this particular gradient is designed to be a fade out view. So the colours I have chosen go from clear to white. I can then overlay this view onto another to give the impression that it’s fading out. Though, there’s no reason you can’t pass colours to the initWithFrame method as well, should you wish to differ these dynamic helper classes!

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    UIColor clearColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.0]; 
    UIColor whiteColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
    CGRect viewRect = self.bounds;
}

- (void)drawRect:(CGRect)rect

{

CGContextRef context = UIGraphicsGetCurrentContext();

UIColor clearColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.0];

UIColor whiteColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

CGRect viewRect = self.bounds;

}

The above code first defines a context, which is important to all Core Graphics processes, then defines the colours as CGColorRefs. The last line creates a frame by which to contain the gradient.

Now for the magic.

The Gradient Class

The class we created above, creates a UIView and draws a box. I’ve also created a class specifically to handle the drawing of the gradient here, just in case I’d like to re-use this code anywhere.

#import <Foundation/Foundation.h>
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, 
                        CGColorRef  endColor, BOOL horizontal);

//-----------

#import "Gradient.h"

void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, 
                        CGColorRef  endColor, BOOL horizontal) {
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };
    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)startColor, (__bridge id)endColor, nil];
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge_retained CFArrayRef) colors, locations);
    
    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
    
    CGContextSaveGState(context);
    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

#import <Foundation/Foundation.h>

void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor,

CGColorRef endColor, BOOL horizontal);

//-----------

#import "Gradient.h"

void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor,

CGColorRef endColor, BOOL horizontal) {

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat locations[] = { 0.0, 1.0 };

NSArray *colors = [NSArray arrayWithObjects:(__bridge id)startColor, (__bridge id)endColor, nil];

CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge_retained CFArrayRef) colors, locations);

CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));

CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

CGContextSaveGState(context);

CGContextAddRect(context, rect);

CGContextClip(context);

CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

CGContextRestoreGState(context);

CGGradientRelease(gradient);

CGColorSpaceRelease(colorSpace);

}

We’ve created a class and a method which can be passed the context, the frame of the gradient, the start colour, the end colour and whether or not it’s horizontal.

There’s a lot to take in above, so we’ll go about it step by step:

First we need to ensure that the colour space is RGB, this way we can better control our colours
Define the Locations of the gradient colours. In this case I want the first colour to start at 0 and the end colour to end at 1. So this basically just defines a gradient that fills the frame equally with the colours
Import the chosen colours to an array and cast them as objects so that they are compatible with an NSArray
Create the gradient object
Define an actual start CGPoint and an actual end CGPoint on the selected frame
Actually draw the gradient by saving the current state, choose the frame, clip the gradient to it’s bounds, draw the gradient with the previously defined options and restore the state
Lastly, we just release the gradient object and the colour space that we defined at the beginning

Some of you may have noticed that I passed a horizontal variable to define whether to draw the gradient vertically or horizontally.
I can define this difference by adjusting the startPoint and endPoint of the gradient.
Replace those two lines with what’s below:

CGPoint startPoint;
CGPoint endPoint;
if (horizontal) {
    startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMidY(rect));
    endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMidY(rect));
} else {
    startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
}

CGPoint startPoint;

CGPoint endPoint;

if (horizontal) {

startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMidY(rect));

endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMidY(rect));

} else {

startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));

endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

}

If it’s horizontal, the gradient is drawn from left to right, if it’s not horizontal, the gradient is drawn from top to bottom.

Back to FadeOutView

So our gradient class is complete and we are now able to apply this gradient to our FadeOutView.

First, import the Gradient.h to the implementation file.

#import "Gradient.h"

1	#import "Gradient.h"

Now we have access to the method we created to draw the gradient.
At the end of the drawRect method we defined earlier, add the below line:

drawLinearGradient(context, viewRect, clearColor.CGColor, whiteColor.CGColor, horizontal);

1	drawLinearGradient(context, viewRect, clearColor.CGColor, whiteColor.CGColor, horizontal);

In the drawRect method, we had earlier defined the colours, whether or not it was horizontal, the graphics context, and the rect bounds in which to draw. Now all we do is pass those variables to our drawLinearGradient method and everything is connected.

All that’s left to do is actually use our new classes:

FadeOutView *leftFadeView = [[FadeOutView alloc] initWithFrame:CGRectMake(774, 160, 250, 548) direction:TRUE];
FadeOutView *bottomFadeView = [[FadeOutView alloc] initWithFrame:CGRectMake(0, 660, 1024, 40) direction:FALSE];

1 2	FadeOutView leftFadeView = [[FadeOutView alloc] initWithFrame:CGRectMake(774, 160, 250, 548) direction:TRUE]; FadeOutView bottomFadeView = [[FadeOutView alloc] initWithFrame:CGRectMake(0, 660, 1024, 40) direction:FALSE];

Comments

comments