前言
本文主要介绍继承实现自定义渐变色滑杆，空心滑杆
GitHub地址：KJCategories
简单介绍 Property & API
@interface KJColorSlider : UISlider /// 颜色数组，默认白色 @property(nonatomic,strong) NSArray<UIColor*>*colors; /// 每个颜色对应的位置信息 @property(nonatomic,strong) NSArray<NSNumber*>*locations; /// 颜色的高度，默认2.5px @property(nonatomic,assign) CGFloat colorHeight; /// 边框宽度，默认0px @property(nonatomic,assign) CGFloat borderWidth; /// 边框颜色，默认黑色 @property(nonatomic,strong) UIColor *borderColor; /// 回调处理时间，默认为0 @property(nonatomic,assign) float timeSpan; /// 当前进度，用于外界kvo @property(nonatomic,assign,readonly) CGFloat progress; /// 移动回调处理 @property(nonatomic,readwrite,copy) void(^kValueChangeBlock)(CGFloat progress); /// 移动结束回调处理 @property(nonatomic,readwrite,copy) void(^kMoveEndBlock)(CGFloat progress); /// 重新设置UI - (void)kj_setUI; @end
1. colors和locations配合使用实现渐变色
/// 彩虹渐变色滑杆 slider2.colors = @[UIColorFromHEXA(0xFF0000,1), UIColorFromHEXA(0xFF7F00,1), UIColorFromHEXA(0xFFFF00,1), UIColorFromHEXA(0x00FF00,1), UIColorFromHEXA(0x00FFFF,1), UIColorFromHEXA(0x0000FF,1), UIColorFromHEXA(0x8B00FF,1)]; slider2.locations = @[@0.,@0.16,@(0.16*2),@(0.16*3),@(0.16*4),@(0.16*5),@1.];
/// 饱和度滑杆 slider.colors = @[UIColorFromHEXA(0xF44336,1), UIColorFromHEXA(0xFFFFFF,1)]; slider.locations = @[@0.,@0.8];
2. colorHeight滑杆的高度，内部那条线而非整体的高度
3. borderWidth和borderColor边框相关
4. timeSpan回调间隔时间限制
这里主要用于很多时候在不停滑动的过程当中，会频繁触发内部的方法。所以写这个参数来控制kValueChangeBlock回调的触发频率
5. progress当前进度，相当于self.value
这个参数主要用于外界kvo
/// kvo [slider kj_observeKey:@"progress" ObserveResultBlock:^(id _Nonnull newValue, id _Nonnull oldValue) { NSLog(@"%@",newValue); }];
6. kValueChangeBlock和kMoveEndBlock
kValueChangeBlock：滑动过程当中调用 kMoveEndBlock：滑动结束或者异常中断调用
slider.kValueChangeBlock = ^(CGFloat progress) { NSLog(@"progress:%f",progress); }; slider.kMoveEndBlock = ^(CGFloat progress) { NSLog(@"end:%f",progress); };
7. kj_setUI重设UI调用
附上完整实现
#import "KJColorSlider.h" #import "UIColor+KJExtension.h" @interface KJColorSlider() @property(nonatomic,strong) UIImageView *backImageView; @property(nonatomic,assign) NSTimeInterval lastTime; @property(nonatomic,assign) CGFloat progress; @end @implementation KJColorSlider #pragma mark - public method - (void)kj_setUI{ [self drawNewImage];} #pragma mark - system method - (void)awakeFromNib{ [super awakeFromNib]; [self setup]; } - (instancetype)initWithFrame:(CGRect)frame{ if (self == [super initWithFrame:frame]) { [self setup]; } return self; } - (void)layoutSubviews{ [super layoutSubviews]; if (CGRectEqualToRect(self.backImageView.frame, CGRectZero)) { CGRect imgViewFrame = self.backImageView.frame; imgViewFrame.size.width = self.frame.size.width; imgViewFrame.size.height = self.colorHeight; imgViewFrame.origin.y = (self.frame.size.height - self.colorHeight) * 0.5; self.backImageView.frame = imgViewFrame; [self drawNewImage]; } } #pragma mark - private method - (void)drawNewImage{ self.backImageView.image = [UIColor kj_colorImageWithColors:_colors locations:_locations size:CGSizeMake(self.frame.size.width, _colorHeight) borderWidth:_borderWidth borderColor:_borderColor]; self.progress = self.value; } - (void)setup{ self.colors = @[UIColor.whiteColor]; self.locations = @[@(1.)]; self.colorHeight = 2.5; self.borderWidth = 0.0; self.borderColor = UIColor.blackColor; self.backImageView = [[UIImageView alloc] initWithFrame:CGRectZero]; [self addSubview:self.backImageView]; [self sendSubviewToBack:self.backImageView]; self.tintColor = [UIColor clearColor]; self.maximumTrackTintColor = self.minimumTrackTintColor = [UIColor clearColor]; [self addTarget:self action:@selector(valueChange) forControlEvents:UIControlEventValueChanged]; [self addTarget:self action:@selector(endMove) forControlEvents:UIControlEventTouchUpInside]; [self addTarget:self action:@selector(endMove) forControlEvents:UIControlEventTouchUpOutside]; [self addTarget:self action:@selector(touchCancel) forControlEvents:UIControlEventTouchCancel]; } - (void)valueChange{ self.progress = self.value; if (self.kValueChangeBlock) { if (_timeSpan == 0) { self.kValueChangeBlock(self.value); }else if (CFAbsoluteTimeGetCurrent() - self.lastTime > _timeSpan) { _lastTime = CFAbsoluteTimeGetCurrent(); self.kValueChangeBlock(self.value); } } } - (void)endMove{ self.progress = self.value; if (self.kMoveEndBlock) { self.kMoveEndBlock(self.value); return; } if (self.kValueChangeBlock) self.kValueChangeBlock(self.value); } - (void)touchCancel{ self.progress = self.value; if (self.kMoveEndBlock) self.kMoveEndBlock(self.value); } @end
示例代码
__block KJColorSlider *slider = [[KJColorSlider alloc]initWithFrame:CGRectMake(20, 100, kScreenW-40, 30)]; slider.value = 0.5; [self.view addSubview:slider]; slider.colors = @[UIColorFromHEXA(0xF44336,1), UIColorFromHEXA(0xFFFFFF,1)]; slider.locations = @[@0.,@0.8]; slider.kValueChangeBlock = ^(CGFloat progress) { NSLog(@"progress:%f",progress); }; slider.kMoveEndBlock = ^(CGFloat progress) { NSLog(@"end:%f",progress); }; KJColorSlider *slider2 = [[KJColorSlider alloc] initWithFrame:CGRectMake(20, slider.bottom+30, kScreenW-40, 30)]; slider2.value = 0.5; slider2.colors = @[UIColorFromHEXA(0xFF0000,1), UIColorFromHEXA(0xFF7F00,1), UIColorFromHEXA(0xFFFF00,1), UIColorFromHEXA(0x00FF00,1), UIColorFromHEXA(0x00FFFF,1), UIColorFromHEXA(0x0000FF,1), UIColorFromHEXA(0x8B00FF,1)]; slider2.locations = @[@0.,@0.16,@(0.16*2),@(0.16*3),@(0.16*4),@(0.16*5),@1.]; [self.view addSubview:slider2]; KJColorSlider *slider3 = [[KJColorSlider alloc] initWithFrame:CGRectMake(20, slider2.bottom+30, kScreenW-40, 30)]; slider3.colorHeight = 28; slider3.borderColor = UIColor.redColor; slider3.borderWidth = 1.5; slider3.value = 0.5; [self.view addSubview:slider3]; /// kvo [slider kj_observeKey:@"progress" ObserveResultBlock:^(id _Nonnull newValue, id _Nonnull oldValue) { NSLog(@"%@",newValue); }]; [slider2 kj_observeKey:@"progress" ObserveResultBlock:^(id _Nonnull newValue, id _Nonnull oldValue) { NSLog(@"---%@",newValue); }];
