Gradient View

GradientView.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface GradientView : UIView

@property (nonatomic, strong) UIColor *startColor;
@property (nonatomic, strong) UIColor *midpointColor;
@property (nonatomic, strong) UIColor *finishColor;
@property (nonatomic, readwrite) float progress;

@property (nonatomic, readwrite) BOOL horizontal;

@end

GradientView.m

#import <QuartzCore/QuartzCore.h>

#import "GradientView.h"

@interface GradientView ()

@property (nonatomic, strong) UIColor *startTransitionColor;
@property (nonatomic, strong) UIColor *finishTransitionColor;
@property (nonatomic, strong) CAGradientLayer *gradient;

@property (nonatomic, readwrite) NSRange startTransitionRange;
@property (nonatomic, readwrite) NSRange midpointRange;
@property (nonatomic, readwrite) NSRange finishTransitionRange;
@property (nonatomic, readwrite) CGFloat rangeMax;

@end

@implementation GradientView

- (id)initWithFrame:(CGRect)frame {
    if (!(self = [super initWithFrame:frame])) return nil;
    
    self.gradient = [CAGradientLayer layer];
    self.horizontal = YES;
    self.startTransitionRange = NSMakeRange(25, 70);
    self.midpointRange = NSMakeRange(50, 105);
    self.finishTransitionRange = NSMakeRange(85, 90);
    self.rangeMax = 200.0;
    [self.layer addSublayer:self.gradient];
    
    return self;
}


- (void)setHorizontal:(BOOL)horizontal {
    self->_horizontal = horizontal;
    if (horizontal) {
        self.gradient.startPoint = CGPointMake(0.0, 0.5);
        self.gradient.endPoint = CGPointMake(1.0, 0.5);
    } else {
        self.gradient.startPoint = CGPointMake(0.5, 0.0);
        self.gradient.endPoint = CGPointMake(0.5, 1.0);
    }
}


- (void)layoutSublayersOfLayer:(CALayer *)layer {
    [super layoutSublayersOfLayer:layer];
    if (layer != self.layer) return;
    self.gradient.frame = self.layer.bounds;
    [self setupColors];
}


- (void)setupColors {
    if (self.startColor && self.finishColor && self.midpointColor) {
        self.startTransitionColor = [self colorBetweenStart:self.startColor end:self.midpointColor];
        self.finishTransitionColor = [self colorBetweenStart:self.midpointColor end:self.finishColor];
    }
    self.gradient.colors = @[ (id)self.startColor.CGColor, (id)self.startTransitionColor.CGColor, (id)self.midpointColor.CGColor, (id)self.finishTransitionColor.CGColor, (id)self.finishColor.CGColor ];
}


- (UIColor *)colorBetweenStart:(UIColor *)start end:(UIColor *)end {
    CGFloat hue, endHue, saturation, value, alpha = 0;
    [start getHue:&hue saturation:&saturation brightness:&value alpha:&alpha];
    [end getHue:&endHue saturation:&saturation brightness:&value alpha:&alpha];
    if (endHue < hue && hue >= 1.0) {
        hue = hue - 1.0;
    }
    CGFloat midHue = (hue + endHue) / 2.0;
    return [UIColor colorWithHue:midHue saturation:saturation brightness:value alpha:alpha];
}


- (CGFloat)progressInRange:(NSRange)range {
    CGFloat location = (range.location + self.progress * range.length) / self.rangeMax;
    return location;
}


- (void)setProgress:(float)progress {
    self->_progress = progress;
    CGFloat startTransitionLocation = [self progressInRange:self.startTransitionRange];
    CGFloat midpointLocation = [self progressInRange:self.midpointRange];
    CGFloat finishTransitionLocation = [self progressInRange:self.finishTransitionRange];
    self.gradient.locations = @[ @0.0, @(startTransitionLocation), @(midpointLocation), @(finishTransitionLocation) , @1.0];
}

@end