Objective-C 自定义渐变色Slider

一、前情概要

系统提供UISlider，但在开发过程中经常需要自定义，本次需求内容是实现一个拥有渐变色的滑动条，且渐变色随着手指touch的位置不同改变区域，类似如下

可以使用CAGradientLayer实现渐变效果，但是发现手指滑动的快时会有不跟手的情况。我们可以重写左侧有渐变色的UIView的drawRect: 方法来绘制渐变色

二、具体实现

左侧的渐变色UIView
HLProgressView.h

@interface HLProgressView : UIView
@property (nonatomic, assign) CGSize viewSize;
@end

HLProgressView.m

@implementation HLProgressView- (instancetype)initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];if (self) {}return self;
}- (void)setViewSize:(CGSize)viewSize {_viewSize = viewSize;self.frame = CGRectMake(0, 0, viewSize.width, viewSize.height);// setNeedsDisplay会自动调用drawRect方法[self setNeedsDisplay];
}- (void)drawRect:(CGRect)rect {CGSize size = self.bounds.size;// 获取图形上下文对象CGContextRefCGContextRef context = UIGraphicsGetCurrentContext();// 创建一个颜色空间CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();// 设置的颜色 每四个元素表示一种颜色，值的范围0~1，分别表示R、G、B、透明度 CGFloat colors[] = {55.0/255.0, 180.0/255.0, 255.0/255.0, 1.0,55.0/255.0, 80.0/255.0, 255.0/255.0, 1.0};// 渐变的位置信息范围0~1 0表示开始的位置 1表示结束的位置CGFloat gradientLocations[] = {0, 1};// 渐变的个数size_t locationCount = 2;// 创建渐变CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, gradientLocations, locationCount);// 指定渐变的开始位置和结束位置 这里设置完效果是整块区域的水平方向的渐变CGPoint gradientStartPoint = CGPointMake(0, size.height/2);CGPoint gradientEndPoint = CGPointMake(size.width, size.height/2);// 将渐变画到上下文中，最后一个参数表示发散的方式CGContextDrawLinearGradient(context, gradient, gradientStartPoint, gradientEndPoint, kCGGradientDrawsBeforeStartLocation);// 释放内存CGGradientRelease(gradient);CGColorSpaceRelease(colorSpace);
}@end

滑动条
UICustomSlider.h

@interface UICustomSlider : UIView
@end

UICustomSlider.m

@interface UICustomSlider ()
@property (nonatomic, strong) HLProgressView *progressView;
@end@implementation UICustomSlider- (instancetype)initWithFrame:(CGRect)frame {self = [super initWithFrame:frame];if (self) {self.backgroundColor = [UIColor grayColor];self.clipsToBounds = YES; //不显示超过父视图的内容self.layer.cornerRadius = 8;self.progressView = [[HLProgressView alloc] initWithFrame:CGRectMake(0, 0, 140, 44)];[self addSubview:self.progressView];}return self;
}- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {CGPoint point = [touches.anyObject locationInView:self];self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
}- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {CGPoint point = [touches.anyObject locationInView:self];self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
}- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {CGPoint point = [touches.anyObject locationInView:self];self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
}@end

调用滑动条
ViewController.m

#import "GradientSlider.h"
@interface ViewController ()
@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];UICustomSlider *customSlider = [[UICustomSlider alloc] initWithFrame:CGRectMake(20, 100, 280, 44)];[self.view addSubview:customSlider];
}