Objective-C 自定義漸變色Slider的實現(xiàn)方法
一、前情概要
系統(tǒng)提供UISlider,但在開發(fā)過程中經(jīng)常需要自定義,本次需求內(nèi)容是實現(xiàn)一個擁有漸變色的滑動條,且漸變色隨著手指touch的位置不同改變區(qū)域,類似如下

可以使用CAGradientLayer實現(xiàn)漸變效果,但是發(fā)現(xiàn)手指滑動的快時會有不跟手的情況。我們可以重寫左側(cè)有漸變色的UIView的drawRect: 方法來繪制漸變色
二、具體實現(xiàn)
左側(cè)的漸變色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會自動調(diào)用drawRect方法
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
CGSize size = self.bounds.size;
// 獲取圖形上下文對象CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext();
// 創(chuàng)建一個顏色空間
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// 設(shè)置的顏色 每四個元素表示一種顏色,值的范圍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表示結(jié)束的位置
CGFloat gradientLocations[] = {0, 1};
// 漸變的個數(shù)
size_t locationCount = 2;
// 創(chuàng)建漸變
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, gradientLocations, locationCount);
// 指定漸變的開始位置和結(jié)束位置 這里設(shè)置完效果是整塊區(qū)域的水平方向的漸變
CGPoint gradientStartPoint = CGPointMake(0, size.height/2);
CGPoint gradientEndPoint = CGPointMake(size.width, size.height/2);
// 將漸變畫到上下文中,最后一個參數(shù)表示發(fā)散的方式
CGContextDrawLinearGradient(context, gradient, gradientStartPoint, gradientEndPoint, kCGGradientDrawsBeforeStartLocation);
// 釋放內(nèi)存
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; //不顯示超過父視圖的內(nèi)容
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調(diào)用滑動條
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];
}到此這篇關(guān)于Objective-C 自定義漸變色Slider的文章就介紹到這了,更多相關(guān)Objective-C 自定義漸變色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
iOS開發(fā)教程之APP內(nèi)部切換語言的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于iOS開發(fā)教程之APP內(nèi)部切換語言的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
IOS開發(fā) UIAlertController詳解及實例代碼
這篇文章主要介紹了 IOS開發(fā) UIAlertController詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
ios利用RunLoop原理實現(xiàn)去監(jiān)控卡頓實例詳解
這篇文章主要為大家介紹了ios利用RunLoop原理實現(xiàn)去監(jiān)控卡頓實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
IOS 粒子系統(tǒng) (CAEmitterLayer)實例詳解
這篇文章主要介紹了IOS 粒子系統(tǒng) (CAEmitterLayer)實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
iOS開發(fā)實戰(zhàn)之Label全方位對齊的輕松實現(xiàn)
這篇文章主要給大家介紹了關(guān)于iOS開發(fā)實戰(zhàn)之輕松實現(xiàn)Label全方位對齊的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10

