分段滑块 Slider

在网上找了很多Demo 都没有发现类似的  于是自己撸起袖子 自己造了一个车轮

使用简单

- (void)_setupView
{
    ChZSlider *slider = [[ChZSlider alloc]initWithFrame:CGRectMake(0, 0, ChZ_WIDTH - 32, 31)];
    slider.count = 5;
    slider.thumW = 20;
    slider.lineH = 4;
    slider.circleW = 13;
    slider.bgColor = [UIColor whiteColor];
    slider.noneColor = HC_BLACK_214_COLOR;
    slider.selectedColor = HC_THEME_ORANGE_COLOR;
    [self.sliderContentView addSubview:slider];
    self.slider = slider;
    [slider addTarget:self action:@selector(sliderChange) forControlEvents:UIControlEventValueChanged];
    [slider setupView];
}

- (void)sliderChange
{
    int current = self.slider.currentValue  *100;
    self.sliderLabel.text = [NSString stringWithFormat:@"%d%%",current];
}

.h文件

//
//  ChZSlider.h
//  ChZSlider
//
//  Created by Howe on 2018/3/9.
//  Copyright © 2018年 Howe. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ChZSlider : UIControl
@property (nonatomic, assign) int  count;
@property (nonatomic, assign) CGFloat  thumW;
@property (nonatomic, assign) CGFloat  circleW;
@property (nonatomic, assign) CGFloat  lineH;
@property (nonatomic, strong) UIColor  *bgColor;
@property (nonatomic, strong) UIColor  *noneColor;
@property (nonatomic, strong) UIColor  *selectedColor;
@property (nonatomic, assign) float  currentValue;
- (void)setupView;
@end

.m 文件

//
//  ChZSlider.m
//  ChZSlider
//
//  Created by Howe on 2018/3/9.
//  Copyright © 2018年 Howe. All rights reserved.
//

#import "ChZSlider.h"
#define CircleWidth 13.0f

@interface ChZSlider()
@property (nonatomic, strong) CAShapeLayer *topLayer;
@property (nonatomic, strong) CAShapeLayer *pointLayer;
@end
@implementation ChZSlider
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        [self setBackgroundColor:[UIColor whiteColor]];
    }
    return self;
}

- (void)setupView
{
    UIBezierPath *bgPath = [UIBezierPath bezierPathWithRect:self.bounds];
    CAShapeLayer *bgLayer = [CAShapeLayer layer];
    bgLayer.path = bgPath.CGPath;
    bgLayer.fillColor = self.noneColor.CGColor;
    [self.layer addSublayer:bgLayer];
    
    UIBezierPath *topPath = [UIBezierPath bezierPathWithRect:self.bounds];
    CAShapeLayer *topLayer = [CAShapeLayer layer];
    topLayer.path = topPath.CGPath;
    topLayer.fillColor = self.selectedColor.CGColor;
    [self.layer addSublayer:topLayer];
    self.topLayer = topLayer;
    
    
    CGFloat W = CGRectGetWidth(self.bounds);
    CGFloat H = CGRectGetHeight(self.bounds);
    CGFloat circleY = (H - self.circleW) * 0.5f;
    CGFloat itemW = (self.bounds.size.width- self.circleW) /(self.count-1);
    CGFloat lineContentW = itemW - self.circleW;
    CGFloat lineW = lineContentW - self.circleW;
    CGFloat lineY = (H - self.lineH) * 0.5f;
    CGFloat x = 0.0f;
    for (int i = 0; i<(self.count-1); i++)
    {
//        CGFloat x = i * itemW;
        UIBezierPath *circleBGPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x-0.5, 0, self.circleW+1, H) cornerRadius:0];
        //镂空
        UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(x, circleY, self.circleW, self.circleW)];
        [circleBGPath appendPath:circlePath];
        [circleBGPath setUsesEvenOddFillRule:YES];
        CAShapeLayer *fillLayer = [CAShapeLayer layer];
        fillLayer.path = circleBGPath.CGPath;
        fillLayer.fillRule = kCAFillRuleEvenOdd;
        fillLayer.fillColor = self.bgColor.CGColor;
        fillLayer.opacity = 1;
        [self.layer addSublayer:fillLayer];
        
//        UIBezierPath *lineBGPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x + self.circleW - 0.5, 0, lineContentW + 0.5, H) cornerRadius:0];
        UIBezierPath *lineBGPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x + self.circleW, 0, lineContentW, H) cornerRadius:0];
        UIBezierPath *linePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x + self.circleW + self.circleW * 0.5f, lineY, lineW, self.lineH) cornerRadius:0];
        [lineBGPath appendPath:linePath];
        [lineBGPath setUsesEvenOddFillRule:YES];
        CAShapeLayer *lineLayer = [CAShapeLayer layer];
        lineLayer.path = lineBGPath.CGPath;
        lineLayer.fillRule = kCAFillRuleEvenOdd;
        lineLayer.fillColor = [UIColor whiteColor].CGColor;
        lineLayer.opacity = 1;
        [self.layer addSublayer:lineLayer];
        x = x + self.circleW + lineContentW ;
    }
    
    UIBezierPath *circleBGPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(W-self.circleW, 0, self.circleW, H) cornerRadius:0];
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(W-self.circleW, circleY, self.circleW, self.circleW)];
    [circleBGPath appendPath:circlePath];
    [circleBGPath setUsesEvenOddFillRule:YES];
    CAShapeLayer *fillLayer = [CAShapeLayer layer];
    fillLayer.path = circleBGPath.CGPath;
    fillLayer.fillRule = kCAFillRuleEvenOdd;
    fillLayer.fillColor = self.bgColor.CGColor;
    fillLayer.opacity = 1;
    [self.layer addSublayer:fillLayer];
 
    UIBezierPath *poinePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, (H - self.thumW) * 0.5f, self.thumW, self.thumW)];
    CAShapeLayer *pointLayer = [CAShapeLayer layer];
    pointLayer.borderColor = [UIColor whiteColor].CGColor;
    pointLayer.strokeColor = [UIColor whiteColor].CGColor;
    pointLayer.borderWidth = 4.0f;
    pointLayer.shadowOpacity = 0.3;
    pointLayer.shadowColor = [UIColor blackColor].CGColor;
    
    pointLayer.path = poinePath.CGPath;
    pointLayer.fillColor = [UIColor redColor].CGColor;
    [self.layer addSublayer:pointLayer];
    self.pointLayer = pointLayer;
    
    [self change:CGPointMake((self.currentValue * W), 0)];

}
- (void)change:(CGPoint)movePoint
{
    CGFloat lineMoveX = 0.0f;
    if (movePoint.x<0)
    {
        lineMoveX = 0.0f;
    }else if (movePoint.x > self.bounds.size.width - self.thumW)
    {
        lineMoveX = self.bounds.size.width - self.thumW;
    }else
    {
        lineMoveX = movePoint.x;
    }
    
    UIBezierPath *topPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, lineMoveX, self.bounds.size.height)];
    self.topLayer.path = topPath.CGPath;
    CGFloat moveX = 0.0f;
    if (movePoint.x > self.bounds.size.width - self.thumW)
    {
        moveX = self.bounds.size.width - self.thumW ;
        self.currentValue = 1.0f;
    }else if (movePoint.x < self.thumW)
    {
        moveX = 0;
        self.currentValue = 0.0f;
    }else
    {
        self.currentValue = movePoint.x /self.bounds.size.width;
        moveX = movePoint.x - self.thumW * 0.5f;
    }

    UIBezierPath *pointPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(moveX, (self.bounds.size.height - self.thumW) * 0.5f, self.thumW, self.thumW)];
    self.pointLayer.path = pointPath.CGPath;
    
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}

- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint point = [touch locationInView:self];
    NSLog(@"%f",point.x);
    
    return YES;
}

- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(nullable UIEvent *)event
{
    CGPoint point = [touch locationInView:self];
    if (point.x>self.bounds.size.width)
    {
        return NO;
    }
    [self change:point];
    return YES;
}
- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint point = [touch locationInView:self];
    if (point.x>self.bounds.size.width)
    {
        return;
    }
    [self change:point];
}
@end