先奉上效果圖
colorSlider
Q：為什么做這個(gè)熙参？
因?yàn)橹暗捻?xiàng)目需要用到從百漸變到黑色的slider输玷，當(dāng)時(shí)就只是做了幾種type，白到黑忠怖，白到黃這樣子的操作。
然后同事拿到這個(gè)slider的時(shí)候抄瑟，需求改了凡泣，變成了三種顏色，為了擴(kuò)展性皮假，故而把type去掉了鞋拟，變成了現(xiàn)在這個(gè)樣子。
作者的腦洞
1惹资、因?yàn)樾枨笫强梢匀我忸伾馗伲栽O(shè)計(jì)之初就會(huì)把顏色變成一個(gè)外部變量，也就是
Array褪测。
2猴誊、因?yàn)槌祟伾淖兞耍渌墓δ芎?code>slider一模一樣侮措，所以采用繼承的方式去做
3懈叹、因?yàn)轭伾峭獠孔兞浚詴?huì)使用繪圖進(jìn)行繪制圖片
4分扎、考慮到是任意顏色澄成，如果漸變色中和父視圖的一直，顯示效果就會(huì)有點(diǎn)不清晰（邊界）畏吓，所以在繪制的時(shí)候加上了邊框环揽，參考系統(tǒng)的border，所以就會(huì)有borderWidth/borderColor
5庵佣、考慮到有多個(gè)顏色，參考系統(tǒng)的漸變色Layer汛兜，所以加上了locations
6巴粪、為了實(shí)現(xiàn)了動(dòng)態(tài)的改變效果，所以要對(duì)外開(kāi)發(fā)一個(gè)重新繪制的接口
7、考慮到顯示漸變色的高度問(wèn)題肛根，所以會(huì)增加一個(gè)ColorHeight
1辫塌、先創(chuàng)建類PQSlider并且繼承系統(tǒng)的UISlider添加上之前設(shè)想的屬性和方法
#import <UIKit/UIKit.h>
@interface PQColorSlider : UISlider
/**
colors
顏色數(shù)組
[red, blue]
??必須和 locations 對(duì)應(yīng)
*/
@property (nonatomic, strong) NSArray<UIColor*>* colors;
/**
locations
每個(gè)顏色對(duì)應(yīng)的位置信息
[0.0, 1.0]
??必須和 colors 對(duì)應(yīng)
*/
@property (nonatomic, strong) NSArray<NSNumber*>* locations;
/**
borderColor
邊框顏色
*/
@property (nonatomic, strong) UIColor *borderColor;
/**
borderWidth
邊框?qū)挾? */
@property (nonatomic, assign) CGFloat borderWidth;
/**
colorHeight
顏色的高度
*/
@property (nonatomic, assign) CGFloat colorHeight;
/**
on move slider
移動(dòng)的時(shí)候
*/
@property (nonatomic, strong) void(^valueChangeBlock)(CGFloat progress);
/**
reload UI
重新設(shè)置UI
*/
- (void)reloadUI;
2、為顏色數(shù)組生成圖片
- 1 這個(gè)功能是對(duì)顏色對(duì)擴(kuò)展派哲，所以會(huì)寫(xiě)一個(gè)擴(kuò)展
#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);
//具體方向可根據(jù)需求修改
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");
如果斷言通過(guò)了芭届，就開(kāi)始繪圖储矩，繪圖四部曲
1、開(kāi)啟圖形上下文
2褂乍、繪制
3持隧、得到圖片
4、關(guān)閉上下文`
3逃片、為了同時(shí)可以使用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確保此時(shí)擁有正確到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、最后實(shí)現(xiàn)對(duì)外開(kāi)發(fā)到接口
pragma mark - publid property
- (void)valueChange{
if (self.valueChangeBlock) {
self.valueChangeBlock(self.value);
}
}
#pragma mark - public method
- (void)reloadUI {
[self drawNewImage];
}
end
使用方式:
carthage- 下載代碼拖入到項(xiàng)目
1褥实、carthage
github "codepgq/PQColorSlider"
2呀狼、下載代碼
倉(cāng)庫(kù)地址
下載之后把下面的文件文件移動(dòng)到項(xiàng)目中即可
PQColorSlider.h
PQColorSlider.m
IMG_3319.JPG
