当我第一次面对这种需求的时候 我第一反应就是，要自己画图了吧！不会啊！哪有教程或者案例啊？
但我作为一名程序员这么麻烦的方式必须是不能接受的。所以就有了这个简单的想法。简直了，简单的简直了。。
渐变进度.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的渐变图片所以有明显的分隔。
