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;
        // 获取图形上下文对象CGContextRef
        CGContextRef 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 *)touches withEvent:(UIEvent *)event {
        CGPoint point = [touches.anyObject locationInView:self];
        self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
    }
    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
        CGPoint point = [touches.anyObject locationInView:self];
        self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
    }
    - (void)touchesEnded:(NSSet *)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];
    }