快捷導(dǎo)航

Objective-C 自定義漸變色Slider的實(shí)現(xiàn)方法

更新時(shí)間：2024年07月16日 09:56:58 作者：富春山居_ZYY(已黑化)

系統(tǒng)提供UISlider,但在開發(fā)過程中經(jīng)常需要自定義,本次需求內(nèi)容是實(shí)現(xiàn)一個(gè)擁有漸變色的滑動(dòng)條,且漸變色隨著手指touch的位置不同改變區(qū)域,這篇文章主要介紹了Objective-C 自定義漸變色Slider,需要的朋友可以參考下

一、前情概要

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

可以使用CAGradientLayer實(shí)現(xiàn)漸變效果，但是發(fā)現(xiàn)手指滑動(dòng)的快時(shí)會(huì)有不跟手的情況。我們可以重寫左側(cè)有漸變色的UIView的drawRect: 方法來繪制漸變色

二、具體實(shí)現(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會(huì)自動(dòng)調(diào)用drawRect方法
    [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
    CGSize size = self.bounds.size;
    // 獲取圖形上下文對(duì)象CGContextRef
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 創(chuàng)建一個(gè)顏色空間
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    // 設(shè)置的顏色 每四個(gè)元素表示一種顏色，值的范圍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};
    // 漸變的個(gè)數(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);
    // 將漸變畫到上下文中，最后一個(gè)參數(shù)表示發(fā)散的方式
    CGContextDrawLinearGradient(context, gradient, gradientStartPoint, gradientEndPoint, kCGGradientDrawsBeforeStartLocation);
    // 釋放內(nèi)存
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}
@end

滑動(dòng)條
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)用滑動(dòng)條
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: