美文网首页
自定义进度条 渐变色

自定义进度条 渐变色

作者: 骑马纵天下 | 来源:发表于2018-06-19 16:42 被阅读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;
    

    效果图

    实现效果

    相关文章

      网友评论

          本文标题:自定义进度条 渐变色

          本文链接:https://www.haomeiwen.com/subject/vazaeftx.html