先奉上效果图
colorSlider
Q：为什么做这个？
因为之前的项目需要用到从百渐变到黑色的slider，当时就只是做了几种type，白到黑，白到黄这样子的操作。
然后同事拿到这个slider的时候，需求改了，变成了三种颜色，为了扩展性，故而把type去掉了，变成了现在这个样子。
作者的脑洞
1、因为需求是可以任意颜色，所以设计之初就会把颜色变成一个外部变量，也就是
Array。
2、因为除了颜色改变了，其他的功能和slider一模一样，所以采用继承的方式去做
3、因为颜色是外部变量，所以会使用绘图进行绘制图片
4、考虑到是任意颜色，如果渐变色中和父视图的一直，显示效果就会有点不清晰（边界），所以在绘制的时候加上了边框，参考系统的border，所以就会有borderWidth/borderColor
5、考虑到有多个颜色，参考系统的渐变色Layer，所以加上了locations
6、为了实现了动态的改变效果，所以要对外开发一个重新绘制的接口
7、考虑到显示渐变色的高度问题，所以会增加一个ColorHeight
1、先创建类PQSlider并且继承系统的UISlider添加上之前设想的属性和方法
#import <UIKit/UIKit.h>
@interface PQColorSlider : UISlider
/**
colors
颜色数组
[red, blue]
⚠️必须和 locations 对应
*/
@property (nonatomic, strong) NSArray<UIColor*>* colors;
/**
locations
每个颜色对应的位置信息
[0.0, 1.0]
⚠️必须和 colors 对应
*/
@property (nonatomic, strong) NSArray<NSNumber*>* locations;
/**
borderColor
边框颜色
*/
@property (nonatomic, strong) UIColor *borderColor;
/**
borderWidth
边框宽度
*/
@property (nonatomic, assign) CGFloat borderWidth;
/**
colorHeight
颜色的高度
*/
@property (nonatomic, assign) CGFloat colorHeight;
/**
on move slider
移动的时候
*/
@property (nonatomic, strong) void(^valueChangeBlock)(CGFloat progress);
/**
reload UI
重新设置UI
*/
- (void)reloadUI;
2、为颜色数组生成图片
- 1 这个功能是对颜色对扩展，所以会写一个扩展
#pragma mark - extensions
@implementation UIColor(ColorSlider)
+ (UIImage *)colorToImageWithColors:(NSArray<UIColor *>*)colors locations:(NSArray<NSNumber*>*)locations size:(CGSize)size borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor{
NSAssert(colors || locations, @"colors and locations must has value");
NSAssert(colors.count == locations.count, @"Please make sure colors and locations count is equal");
//create CGContextRef
UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
CGContextRef gc = UIGraphicsGetCurrentContext();
if (borderWidth > 0 && borderColor) {
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(size.width * 0.01, 0, size.width * 0.98, size.height) cornerRadius:size.height * 0.5];
[borderColor setFill];
[path fill];
}
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(size.width * 0.01 + borderWidth, borderWidth, size.width * 0.98 - borderWidth * 2, size.height - borderWidth * 2) cornerRadius:size.height * 0.5];
//绘制渐变
[self drawLinearGradient:gc path:path.CGPath colors:colors locations:locations];
//从Context中获取图像，并显示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
+ (void)drawLinearGradient:(CGContextRef)context
path:(CGPathRef)path
colors:(NSArray<UIColor*>*)colors
locations:(NSArray<NSNumber*>*)locations
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
NSMutableArray *colorefs = [@[] mutableCopy];
[colors enumerateObjectsUsingBlock:^(UIColor * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
[colorefs addObject:(__bridge id) obj.CGColor];
}];
CGFloat l[locations.count];
for (int i = 0; i < locations.count; i++) {
l[i] = locations[i].floatValue;
}
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colorefs, l);
CGRect pathRect = CGPathGetBoundingBox(path);
//具体方向可根据需求修改
CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
}
@end
解析如下：
断言，不解释
NSAssert(colors || locations, @"colors and locations must has value");
NSAssert(colors.count == locations.count, @"Please make sure colors and locations count is equal");
如果断言通过了，就开始绘图，绘图四部曲
1、开启图形上下文
2、绘制
3、得到图片
4、关闭上下文`
3、为了同时可以使用XIB\纯代码\约束做处理
- (void)awakeFromNib{
[super awakeFromNib];
[self setup];
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setup];
}
return self;
}
- (void)setup{
self.colorHeight = 20;
/// 用于显示渐变色图片
UIImageView * imgView = [[UIImageView alloc] initWithFrame:CGRectZero];
[self insertSubview:imgView atIndex:4];
self.imgView = imgView;
self.tintColor = [UIColor clearColor];
self.minimumTrackTintColor = [UIColor clearColor];
self.maximumTrackTintColor = [UIColor clearColor];
[self addTarget:self action:@selector(valueChange) forControlEvents:UIControlEventValueChanged];
}
4、把绘制代码延迟到layoutSubviews确保此时拥有正确到frame
- (void)layoutSubviews{
[super layoutSubviews];
if (CGRectEqualToRect(self.imgView.frame, CGRectZero)) {
CGRect imgViewFrame = self.imgView.frame;
imgViewFrame.size.width = self.frame.size.width;
imgViewFrame.size.height = _colorHeight;
imgViewFrame.origin.y = (self.frame.size.height - _colorHeight) * 0.5;
self.imgView.frame = imgViewFrame;
[self drawNewImage];
}
}
#pragma mark - private method
- (void)drawNewImage{
UIImage *image = [UIColor colorToImageWithColors:_colors locations:_locations size:CGSizeMake(self.frame.size.width, _colorHeight) borderWidth:_borderWidth borderColor:_borderColor];
self.imgView.image = image;
}
5、最后实现对外开发到接口
pragma mark - publid property
- (void)valueChange{
if (self.valueChangeBlock) {
self.valueChangeBlock(self.value);
}
}
#pragma mark - public method
- (void)reloadUI {
[self drawNewImage];
}
end
使用方式:
carthage- 下载代码拖入到项目
1、carthage
github "codepgq/PQColorSlider"
2、下载代码
仓库地址
下载之后把下面的文件文件移动到项目中即可
PQColorSlider.h
PQColorSlider.m
IMG_3319.JPG
