Recently I found the need to render gradients in an iOS app that I've been working on. Now, rendering gradients in a UIView is straight-forward enough. Simply override - (void) drawRect:(CGRect)rect and draw within it using CoreGraphics. This got me thinking. There must be lots of programmers out there who would wish to do the same thing. What if we could come up with something reusable? Without much ado, I give you UIGradientView - A subclass of UIView that supports rendering of gradients.
Here's a breakdown of the concepts used in rendering gradients with UIGradientView.
What is a Gradient Stop?
Let's say we want to vertically transition from White to Red and then from Red to Black. We start with White at the top and transition to red halfway through. Then we go from red at the half position, all the way to black at the bottom. Your mind's eye should have a picture like the one below.
A Gradient Stop has an offset and colour. The offset is the percentage of the position at which the colour is the strongest. For example, in our multiple colour gradient example above, we would need three Gradient stops.
- GradientStop with offset 0 and colour White.
- GradientStop with offset 50 and colour Red.
- GradientStop with offset 100 and colour Black.
What is a Gradient Overlay?
A Gradient overlay represents the overlay of a gradient in a UIGradientView. There can be multiple overlays in a gradient. Each overlay specifies the gradient stops to be rendered. There are two types of gradient overlays; namely, LinearGradientOverlay and RadialGradientOverlay.
LinearGradientOverlay
A LinearGradientOverlay is used to overlay a linear gradient in a UIGradientView. The user of this overlay can specify the direction in which the linear gradient should be rendered. Linear gradients are rendered vertically by default.
typedef enum {
LinearGradientDirection_Vertical,
LinearGradientDirection_Horizontal,
LinearGradientDirection_TopLeftToBottomRight,
LinearGradientDirection_TopRightToBottomLeft,
LinearGradientDirection_Max
} LinearGradientDirection;
RadialGradientOverlay
A RadialGradientOverlay is used to overlay a radial gradient in a UIGradientView. Radial gradients are always rendered at the center of the view and are circular. The user of this overlay can specify the radius of the gradient. By default, the radius of the radial gradient will completely fill the view. The radius can also be set to the following enum values:
typedef enum {
// The rendered radial gradient will completely fill
// the UIGRadientView
RadialGradientOverlayOptions_FillOuter = -1,
// The rendered radial gradient will fit the inside
// of the UIGradientView.
RadialGradientOverlayOptions_FillInner = -2,
RadialGradientOverlayOptions_Max = -3
} RadialGradientOverlayOptions;
UIGradientView
This gist adds both a radial gradient overlay and a linear gradient overlay to a UIGradientView. By default, the radial gradient will be rendered to fill the view and the linear gradient will be rendered vertically from top to bottom. This is the expected result for the above gradients.
Feel free to checkout or fork the project from github. Feedback / suggestions are very much welcome!
Presets
The project comes with a default set of gradient presets that can be loaded via the UIGradientView(Presets) category class. If you don't wish to use any of the presets, simply exclude the following files from your project:- UIGradientView+Presets.h
- UIGradientView+Presets.m
- Gradient-Presets.plist.
Feel free to checkout or fork the project from github. Feedback / suggestions are very much welcome!
.jpg)
.jpg)
