先奉上效果图

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

不要脸的求star IMG_3319.JPG