關於一個簡單的漸變進度條

 

 

首先說下具體的需求，就相似一個能量條。用來展現升級經驗的完成度，只是中間不是明顯的分隔須要一個顏色的漸變；

如今說下個人思路，我是自定義了一個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的漸變圖片因此有明顯的分隔。