自定义进度条 渐变色

2018-06-19  本文已影响33人  骑马纵天下
@protocol  Hu_aiden_SimulationExerciseProgressViewDelegate <NSObject>

@optional

/**
 点击的那个练习题的进度 有没有都可以 先写shang

 @param proGressTag 索引
 */
- (void)simulationExerciseProgress:(NSInteger)proGressTag;

@end


@interface Hu_aiden_SimulationExerciseProgressView : UIView

/// 0.0 .. 1.0, default is 0.0. values outside are pinned.
@property (nonatomic, assign) CGFloat progressValue;

/// The color shown for the portion of the progress bar that is filled.
//进度条渐变颜色数组,颜色个数>=2   默认是 @[kHuColor(#FDA249),kHuColor(#FF823C)]
@property (nonatomic, strong, nullable) NSArray *tintColorArray;

/// The color shown for the portion of the progress bar that is not filled.
//默认背景色kHuColor(#E8E8E8)
@property (nonatomic, strong, nullable) UIColor *trackTintColor;

//练习题进度条代理
@property (nonatomic ,assign) id<Hu_aiden_SimulationExerciseProgressViewDelegate>delegate;

@end
@interface Hu_aiden_SimulationExerciseProgressView ()
@property (nonatomic ,strong) UIView *trackTintView;//背景View
@property (nonatomic ,strong) UIView *tintView;//填充View
@property (nonatomic, strong) CAGradientLayer *gradientLayer;

//progressTintColor
@end

@implementation Hu_aiden_SimulationExerciseProgressView


- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        UITapGestureRecognizer * tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(progressTapClick:)];
        [self addGestureRecognizer:tapGesture];
        [self loadingView];
        self.tintColorArray = @[kHuColor(#FDA249),kHuColor(#FF823C)];
        self.progressValue = 0;
    }
    return self;
    
}
- (void)progressTapClick:(UITapGestureRecognizer *)tapGes{
    if (self.delegate && [self.delegate respondsToSelector:@selector(simulationExerciseProgress:)]) {
        [self.delegate simulationExerciseProgress:tapGes.view.tag];
    }
}
- (void)loadingView{
    [self trackTintView];
    [self tintView];
    [self gradientLayer];
}

- (UIView *)trackTintView{
    if (!_trackTintView) {
        _trackTintView = [UIView new];
        _trackTintView.layer.masksToBounds = YES;
        _trackTintView.layer.cornerRadius = 3;
        [self addSubview:_trackTintView];
    }
    return _trackTintView;
}

- (UIView *)tintView{
    if (!_tintView) {
        _tintView = [UIView new];
        _tintView.frame = CGRectMake(0, self.height/2-2.5, 0, progress_height);
        _tintView.layer.masksToBounds = YES;
        _tintView.layer.cornerRadius = 3;
        [self addSubview:_tintView];
    }
    return _tintView;
}
- (CAGradientLayer *)gradientLayer {
    if (!_gradientLayer) {
        _gradientLayer = [CAGradientLayer layer];
        _gradientLayer.startPoint = CGPointMake(0, 0);
        _gradientLayer.endPoint = CGPointMake(1, 0);
        _gradientLayer.anchorPoint = CGPointMake(0, 0);
        [self.tintView.layer addSublayer:_gradientLayer];
    }
    return _gradientLayer;
}

- (void)setProgressValue:(CGFloat)progressValue{
    _progressValue = progressValue;
    [self updateView];
}
- (void)setTintColorArray:(NSArray *)tintColorArray{
    _tintColorArray = tintColorArray;
    if (tintColorArray.count >= 2) {
        [self updateView];
    }else{
        //使用默认色
    }
}
- (void)setTrackTintColor:(UIColor *)trackTintColor{
    _trackTintColor = trackTintColor;
    _trackTintView.backgroundColor = trackTintColor;
}
- (void)updateView{
    _trackTintView.frame = CGRectMake(0, self.height/2-2.5, self.width, progress_height);
    _tintView.frame = CGRectMake(0, self.height/2-2.5, self.width*_progressValue, progress_height);
    self.gradientLayer.frame = self.tintView.bounds;
    self.gradientLayer.colors = self.tintColorArray;

}
@end

使用方式


- (Hu_aiden_SimulationExerciseProgressView *)progressView{
    if (!_progressView) {
        _progressView = [Hu_aiden_SimulationExerciseProgressView new];
        _progressView.delegate = self;
        [self addSubview:_progressView];
    }
    return _progressView;
}

_progressView.frame = CGRectMake(xPos, yPos, width, height);
_progressView.tintColorArray = @[(id)kHuColor(#FDA249).CGColor,
                                 (id)kHuColor(#FF823C).CGColor];
_progressView.trackTintColor = kHuColor(#E8E8E8);
_progressView.progressValue = 0.7;

效果图

实现效果
上一篇下一篇

猜你喜欢

热点阅读