Objective-C 自定义渐变色Slider_Java

文章目录

- 一、前情概要
- 二、具体实现

一、前情概要

系统提供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<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];
}