Objective-C 自定义渐变色Slider

devtools/2024/9/22 19:41:49/

文章目录

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

一、前情概要

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

http://www.ppmy.cn/devtools/61306.html

相关文章

hexo搭建博客(github node git )(失败版本)

HexoGitHub搭建个人博客教程&#xff08;2023最新版&#xff09; 搭建失败了 是因为git命令一直报错 打算明天把git和node版本全部重新安装后再弄 同时回顾一下github git 和 node的基础知识 Github新手之路&#xff08;全过程&#xff09;&#xff08;站在前辈的肩膀上的总…

推荐一款uniapp拖动验证码插件

插件地址&#xff1a;易盾验证码 - DCloud 插件市场 具体使用方式访问插件地址自行获取

Uniapp中image的@load不触发问题

load 事件不触发的常见情况有以下几种: 图片缓存命中 当图片从浏览器缓存中加载时,load 事件通常不会被触发。这是因为浏览器认为这个图片已经成功加载过了,所以不会再次触发 load 事件。 图片地址未发生变化 如果 image 组件的 src 属性值没有发生变化,即使图片是从网络上加载…

视频使用操作说明书-T80005系列视频编码器如何对接海康NVR硬盘录像机,包括T80005系列高清HDMI编码器、4K超高清HDMI编码器

视频使用操作说明书-T80005系列视频编码器如何对接海康NVR硬盘录像机&#xff0c;包括T80005系列高清HDMI编码器、4K超高清HDMI编码器。 视频使用操作说明书-T80005系列视频编码器如何对接海康NVR硬盘录像机&#xff0c;包括T80005系列高清HDMI编码器、4K超高清HDMI编码器 同三…

js原生ajax请求

以下是使用 JavaScript 原生的 XMLHttpRequest 对象进行 ajax 请求的示例代码&#xff1a; function ajaxRequest(method, url, data, callback) {var xhr new XMLHttpRequest();xhr.open(method, url, true);if (method POST) {xhr.setRequestHeader(Content-Type, applica…

快捷:通过胶水语言实现工作中测试流程并行、加速

通过胶水语言实现工作中测试流程并行、加速 通过胶水语言实现工作中测试流程并行、加速工作场景&#xff08;背景&#xff09;问题抽象&#xff08;挑战&#xff09;如何做&#xff08;行动&#xff09;获得了什么&#xff08;结果&#xff09;后记相关资源 通过胶水语言实现工…

排序——归并排序及排序章节总结

前面的文章中 我们详细介绍了排序的概念&#xff0c;插入排序&#xff0c;交换排序与选择排序&#xff0c;大家可以通过下面的链接再去学习&#xff1a; ​​​​​​排序的概念及插入排序 交换排序 选择排序 这篇文章就详细介绍一下另一种排序算法&#xff1a;归并排序以及…

函数定义、合约与面向对象(以太坊solidity合约)

函数定义、合约与面向对象&#xff08;以太坊solidity合约&#xff09; 1-函数定义、构造与多态2-事件日志3-面向对象特征 1-函数定义、构造与多态 创建合约就是创建类&#xff0c;部署合约就是实例化 合约的方法还支持多态 还能使用第三方的库进行开发 整个合约部署后&…