前言
- 本文主要介绍继承实现自定义渐变色滑杆，空心滑杆
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);
}];
网友评论