Objective-C 自定义渐变色Slider的实现方法
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>一、前情概要</li><li>二、具体实现</li></ul></div><p class="maodian"></p><h2>一、前情概要</h2><p>系统提供UISlider，但在开发过程中经常需要自定义，本次需求内容是实现一个拥有渐变色的滑动条，且渐变色随着手指touch的位置不同改变区域，类似如下</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202407/2024071609541331.png" /></p>
<p>可以使用<code>CAGradientLayer</code>实现渐变效果，但是发现手指滑动的快时会有不跟手的情况。我们可以<code>重写左侧有渐变色的UIView的drawRect: 方法</code>来绘制渐变色</p>
<p class="maodian"></p><h2>二、具体实现</h2>
<p><strong>左侧的渐变色UIView</strong><br />HLProgressView.h</p>
<div class="jb51code"><pre class="brush:java;">@interface HLProgressView : UIView
@property (nonatomic, assign) CGSize viewSize;
@end</pre></div>
<p>HLProgressView.m</p>
<div class="jb51code"><pre class="brush:java;">@implementation HLProgressView
- (instancetype)initWithFrame:(CGRect)frame{
self = ;
if (self) {
}
return self;
}
- (void)setViewSize:(CGSize)viewSize {
_viewSize = viewSize;
self.frame = CGRectMake(0, 0, viewSize.width, viewSize.height);
// setNeedsDisplay会自动调用drawRect方法
;
}
- (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</pre></div>
<p><strong>滑动条</strong><br />UICustomSlider.h</p>
<div class="jb51code"><pre class="brush:java;">@interface UICustomSlider : UIView
@end</pre></div>
<p>UICustomSlider.m</p>
<div class="jb51code"><pre class="brush:java;">@interface UICustomSlider ()
@property (nonatomic, strong) HLProgressView *progressView;
@end
@implementation UICustomSlider
- (instancetype)initWithFrame:(CGRect)frame {
self = ;
if (self) {
self.backgroundColor = ;
self.clipsToBounds = YES; //不显示超过父视图的内容
self.layer.cornerRadius = 8;
self.progressView = [ initWithFrame:CGRectMake(0, 0, 140, 44)];
;
}
return self;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
CGPoint point = ;
self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
CGPoint point = ;
self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
CGPoint point = ;
self.progressView.viewSize = CGSizeMake(point.x, self.bounds.size.height);
}
@end</pre></div>
<p><strong>调用滑动条</strong><br />ViewController.m</p>
<div class="jb51code"><pre class="brush:java;">#import "GradientSlider.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
;
UICustomSlider *customSlider = [ initWithFrame:CGRectMake(20, 100, 280, 44)];
;
}</pre></div>
<p>到此这篇关于Objective-C 自定义渐变色Slider的文章就介绍到这了,更多相关Objective-C 自定义渐变色内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>详解Objective-C中的语法糖@{}究竟是什么</li><li>Objective-C中block循环引用问题详解</li><li>如何通过Objective-C的枚举学习iOS中位操作.md详解</li><li>Objective-C中关于实例所占内存的大小详解</li><li>Objective-C与Swift之间的互相调用和跳转</li><li>Objective-C Json 实例详解</li><li>Objective-C中的重载和重写详解</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]