关于一个简单的渐变进度条

当我第一次面对这种需求的时候 我第一反应就是，要自己画图了吧！不会啊！哪有教程或者案例啊？
但我作为一名程序员这么麻烦的方式必须是不能接受的。所以就有了这个简单的想法。简直了，简单的简直了。。

渐变进度.gif

首先说下具体的需求，就类似一个能量条。用来展示升级经验的完成度，只是中间不是明显的分隔需要一个颜色的渐变；
现在说下我的思路，我是自定义了一个UIView的子类用来展示整个进度条；

将这个view的背景颜色设置为这个完成的颜色。然而这样在设置了frame之后只能得到一个紫色的长条的view，并不能满足需求。

这时我在这个view的上面覆盖一个白色的view，将白色view设置为上下和右边与自定义的紫色view对齐。这样我们就能通过设置白色view的x值来完成一个不是渐变的进度条了。

现在，关键的一步来了；

去跟UI要一张渐变的图片，将这个图片加到白色view的左边，让渐变的图片随着移动。
/*

我这语言表达能力真费劲，还是上代码吧；

*/

​#import <UIKit/UIKit.h>
@interface ProgressView : UIView
/** 进度，0-1； */
@property (nonatomic, assign)CGFloat progress;
/** 渐变图片的长度与总长度的比率；0-1 */
@property (nonatomic, assign)CGFloat occupancy;
@end
​

​#import "ProgressView.h"
@interface ProgressView ()
/** 渐变的图片； */
@property (nonatomic , weak) UIImageView *gradientImageView;
/** 表示未完成的部分； */
@property (nonatomic , weak) UIView *whiteView;
@end
@implementation ProgressView
- (void)setProgress:(CGFloat)progress { 
    _progress = progress; 
    CGFloat gradientImageView_W = self.frame.size.width*0.3; 
    CGFloat w = self.frame.size.width; 
    CGFloat total_w = gradientImageView_W + w; 
    CGFloat gradientImageView_x = (total_w*progress)-gradientImageView_W; 
    self.gradientImageView.frame = CGRectMake(gradientImageView_x, 0, 
    gradientImageView_W, self.frame.size.height); 
    self.whiteView.frame = CGRectMake(gradientImageView_x+gradientImageView_W, 0, 
    self.frame.size.width, self.frame.size.height); 
    [self layoutIfNeeded]; 
    [self setNeedsLayout];
}
- (void)awakeFromNib { 
    [super awakeFromNib];
    [self setUpUI];
}
- (instancetype)initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) {
        [self setUpUI]; 
    }
    return self;
}
- (void)setUpUI { 
    self.clipsToBounds = YES;
    self.backgroundColor = [UIColor colorWithRed:235/255.0 green:15/255.0 blue:227/255.0 alpha:1];
    UIImageView *gradientImageView = [[UIImageView alloc]init];
    [self addSubview:gradientImageView];
    self.gradientImageView = gradientImageView; 
    gradientImageView.image = [UIImage imageNamed:@"未标题-1.png"];
    UIView *whiteView = [[UIView alloc]init]; 
    whiteView.backgroundColor = [UIColor whiteColor]; self.whiteView = whiteView; 
    [self addSubview:whiteView];
    self.progress = 0;
}
@end
​

我是通过重写 progress 这个属性的set方法来对进度条的状态来进行设置的；

同时还提供了一个 渐变图片 占据整个进度条长度比例的属性可以设置。

这种方法最关键的一点就是背景颜色与渐变图片右边的贴合度，我自己的demo因为是自己ps的渐变图片所以有明显的分隔。