渐变色视图

2017年4月24日
1.竖线渐变色实现 （起始点和结束点不设置，默认是从上到下的）

Paste_Image.png

实现：

//最左边渐变色竖线
    tmpV = _moreColHintView;
    width = 1;
    yPos = 2;
    height = _tableHeadViewHeight - 2*yPos;
    xPos = width;

    CGRect frame = CGRectMake(xPos, yPos, width, height);
    UIView *vLine = [HuConfigration separateView:frame color:[UIColor clearColor] alpha:1.0];
    [tmpV addSubview:vLine];
    CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
    gradientLayer.frame = vLine.bounds;

    [gradientLayer setColors:[NSArray arrayWithObjects:
                              (id)[HuConfigration uiColorFromString:@"#fdfdfd"].CGColor,
                              (id)[HuConfigration uiColorFromString:@"#c0c0c0"].CGColor,
                              (id)[HuConfigration uiColorFromString:@"#fdfdfd"].CGColor, nil]];
    [vLine.layer addSublayer:gradientLayer];

2017年3月13日
一.渐变色视图
1.效果：

Paste_Image.png

2.实现：

//  HuGradualChangeColorView.h
#import <UIKit/UIKit.h>

@interface HuGradualChangeColorView : UIView

- (id)initWithFrame:(CGRect)frame;
- (void)updateProgress:(CGFloat)value; //更新进度

@end

//  HuGradualChangeColorView.m
#import "HuGradualChangeColorView.h"

@interface HuGradualChangeColorView()
{
    CAGradientLayer *_gradient;
    CGFloat _value; //进度条百分比
}

@end

@implementation HuGradualChangeColorView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //
        [self initiView];
    }
    return  self;
}

- (void)initiView
{
    self.backgroundColor = [HuConfigration uiColorFromString:@"#EBEBEB"];
    CGFloat width = CGRectGetWidth(self.frame);
    CGFloat height = CGRectGetHeight(self.frame);
    _gradient = [CAGradientLayer layer];
    _value = 0.0;
    width = width * _value;
    _gradient.frame = CGRectMake(0, 0, width ,height);

    _gradient.startPoint = CGPointMake(0, 0.5);
    _gradient.endPoint = CGPointMake(1, 0.5);
    _gradient.colors = [NSArray arrayWithObjects:
                       (id)[UIColor hexChangeFloat:@"69E85D"].CGColor,
                       (id)[UIColor hexChangeFloat:@"98D4F6"].CGColor,
                       nil];

    [self.layer insertSublayer:_gradient atIndex:0];
}

- (void)updateProgress:(CGFloat)value
{
    CGFloat width = CGRectGetWidth(self.frame) * value;
    CGRect frame = _gradient.frame;
    frame.size.width = width;
    _gradient.frame = frame;
    //更新界面
    [self layoutIfNeeded];
}

@end

3.补充：
如果需要圆角的可以设置下_gradient和self的corner即可

[_gradient setCornerRadius:3.0];

4.使用

- (void)initProgressView
{
    if (_progerssView == nil) {
        CGRect frame = CGRectMake(0, 0, HHBWIDTH, practicePage_bgView_height);
        self.progerssView = [[HuGradualChangeColorView alloc] initWithFrame:frame];
    }
    [self.view addSubview:_progerssView];
}

- (void)updateProgressView:(NSUInteger)showNum
{
    if (_progerssView) {
        CGFloat value = showNum / (1.0*_totalNum);
        [_progerssView updateProgress:value];
    }
}

如果您发现本文对你有所帮助，如果您认为其他人也可能受益，请把它分享出去。