[控件] ColorfulProgressView

ColorfulProgressView

效果

说明

1. 支持颜色定制

2. 进度条动画可以自己控制

3. 简单易用

源码

https://github.com/YouXianMing/UI-Component-Collection

//
//  ColorfulProgressView.h
//  ColorfulProgressView
//
//  Created by YouXianMing on 15/7/13.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "ProgressColor.h"

@interface ColorfulProgressView : UIView

/**
 *  进度
 */
@property (nonatomic) CGFloat progress;

/**
 *  进度颜色(不设置的话有默认值)
 */
@property (nonatomic, strong) ProgressColor *progressColor;

/**
 *  配置生效以及开始运行
 */
- (void)configAvailableAndBegin;

/**
 *  便利构造器方法
 *
 *  @param frame         尺寸
 *  @param progressColor 颜色值,可以为空
 *
 *  @return 实例对象
 */
+ (instancetype)colorfulProgressViewWithFrame:(CGRect)frame progressColor:(ProgressColor *)progressColor;

@end

//
//  ColorfulProgressView.m
//  ColorfulProgressView
//
//  Created by YouXianMing on 15/7/13.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ColorfulProgressView.h"

@interface ColorfulProgressView () {

    /**
     *  当前view宽度
     */
    CGFloat _width;

    /**
     *  当前view高度
     */
    CGFloat _height;
}

@property (nonatomic, strong) UIView          *baseView;
@property (nonatomic, strong) CAGradientLayer *gradientLayer;

@end

@implementation ColorfulProgressView

#pragma mark - 初始化与初始设置
- (instancetype)initWithFrame:(CGRect)frame {

    self = [super initWithFrame:frame];

    if (self) {

        [self setup];
    }

    return self;
}

- (void)setup {

    _width    = self.frame.size.width;
    _height   = self.frame.size.height;

    // baseView
    self.baseView                     = [[UIView alloc] initWithFrame:CGRectMake(, , , _height)];
    self.baseView.layer.masksToBounds = YES;
    [self addSubview:self.baseView];

    // 渐变色Layer
    self.gradientLayer            = [CAGradientLayer layer];
    self.gradientLayer.frame      = self.bounds;
    [self.baseView.layer addSublayer:self.gradientLayer];
}

#pragma mark -
- (void)configAvailableAndBegin {

    // 如果没有设置ProgressColor,则自己生成一个
    if (_progressColor == nil) {

        _progressColor = [ProgressColor new];

        NSMutableArray *cgColors = [NSMutableArray array];
        for (NSInteger deg = ; deg <= ; deg += ) {
            UIColor *color = [UIColor colorWithHue:1.0 * deg / 360.0 saturation:1.0 brightness:1.0 alpha:1.0];
            [cgColors addObject:(id)[color CGColor]];
        }

        _progressColor.cgColors = cgColors;
    }

    self.gradientLayer.colors     = _progressColor.cgColors;
    self.gradientLayer.startPoint = _progressColor.startPoint;
    self.gradientLayer.endPoint   = _progressColor.endPoint;

    [self doAnimation];
}

- (void)doAnimation {

    NSArray *fromColors           = _progressColor.cgColors;
    NSArray *toColors             = [_progressColor accessColors];
    _progressColor.cgColors       = toColors;

    CABasicAnimation *animation   = [CABasicAnimation animationWithKeyPath:@"colors"];

    animation.fromValue           = fromColors;
    animation.toValue             = toColors;
    animation.duration            = _progressColor.duration;

    animation.removedOnCompletion = YES;
    animation.fillMode            = kCAFillModeForwards;
    animation.timingFunction      = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.delegate            = self;

    self.gradientLayer.colors     = toColors;

    [self.gradientLayer addAnimation:animation forKey:@"animateGradient"];
}

#pragma mark - 动画代理
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    [self doAnimation];
}

#pragma mark - 便利构造器
+ (instancetype)colorfulProgressViewWithFrame:(CGRect)frame progressColor:(ProgressColor *)progressColor {

    ColorfulProgressView *progressView = [[self alloc] initWithFrame:frame];

    if (progressColor) {
        progressView.progressColor = progressColor;
    }

    [progressView configAvailableAndBegin];

    return progressView;
}

#pragma mark - 重写getter,setter方法
@synthesize progress = _progress;
- (void)setProgress:(CGFloat)progress {

    _progress = progress;

    if (progress <= ) {
        _baseView.frame = CGRectMake(, , , _height);
    } else if (progress <= ) {
        _baseView.frame = CGRectMake(, , _progress * _width, _height);
    } else {
        _baseView.frame = CGRectMake(, , _width, _height);
    }
}

- (CGFloat)progress {

    return _progress;
}

@end

//
//  ProgressColor.h
//  ColorfulProgressView
//
//  Created by YouXianMing on 15/7/13.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

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

@interface ProgressColor : NSObject

/**
 *  存储的是CGColor的数组元素
 */
@property (nonatomic, strong) NSArray *cgColors;

/**
 *  颜色起始点
 */
@property (nonatomic) CGPoint startPoint;

/**
 *  颜色结束点
 */
@property (nonatomic) CGPoint endPoint;

/**
 *  颜色移位一次的动画时间
 */
@property (nonatomic) NSTimeInterval duration;

/**
 *  -----------[ 子类可以重写该方法 ]-----------
 *
 *  转换颜色的算法
 *
 *  @return 移位后的颜色数组
 */
- (NSArray *)accessColors;

#pragma mark - 便利构造器方法(自己添加方法)
+ (ProgressColor *)redGradientColor;

+ (ProgressColor *)yellowGradientColor;

@end

//
//  ProgressColor.m
//  ColorfulProgressView
//
//  Created by YouXianMing on 15/7/13.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ProgressColor.h"

@implementation ProgressColor

#pragma mark - 默认配置
- (instancetype)init {
    self = [super init];
    if (self) {

        [self setup];
    }

    return self;
}

- (void)setup {

    self.startPoint = CGPointMake(.f, 0.5f);
    self.endPoint   = CGPointMake(.f, 0.5f);
    self.duration   = 0.1f;
}

#pragma mark - 切换颜色的算法
- (NSArray *)accessColors {

    NSMutableArray *mutable = [_cgColors mutableCopy];

    id last = [mutable lastObject];
    [mutable removeLastObject];
    [mutable insertObject:last atIndex:];

    NSArray *colors = [NSArray arrayWithArray:mutable];

    return colors;
}

#pragma mark - 便利构造器
+ (ProgressColor *)redGradientColor {

    ProgressColor *color = [ProgressColor new];

    NSMutableArray *cgColors = [NSMutableArray array];

    [cgColors addObject:(id)[[UIColor colorWithRed:0.2f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.2f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.3f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.4f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.5f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.6f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.7f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.8f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.9f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:1.0f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.9f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.8f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.7f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.6f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.5f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.4f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.3f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.2f green:.f blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed:0.2f green:.f blue:.f alpha:.f] CGColor]];

    color.cgColors = cgColors;
    color.duration = 0.1f;

    return color;
}

+ (ProgressColor *)yellowGradientColor {

    ProgressColor *color = [ProgressColor new];

    NSMutableArray *cgColors = [NSMutableArray array];

    [cgColors addObject:(id)[[UIColor colorWithRed: green:0.1 blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed: green:0.2 blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed: green:0.3 blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed: green:0.3 blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed: green:0.2 blue:.f alpha:.f] CGColor]];
    [cgColors addObject:(id)[[UIColor colorWithRed: green:0.1 blue:.f alpha:.f] CGColor]];

    color.cgColors = cgColors;
    color.duration = 0.5f;

    return color;
}

@end

细节