本课程主要介绍如何实现一个双向滑块，最终的效果如下：

效果图

Part I 双向滑块的整体结构

从上图观察可得，整个双向滑块控件共由四部分组成，如下图。

image.png

View:整个双向滑块控件。
sliderRect:白条，未被选中的区域。
selectRect:黑条，被选中的区域。
startRect:红条，左滑块。
endRect:蓝条，右滑块。

Part II 双向滑块的初始化及绘制

1、四个区域的初始化

barWidth = NSWidth(self.bounds)*0.03;

sliderRect = NSMakeRect(barWidth,
                        NSHeight(self.bounds)/4,
                        NSWidth(self.bounds)-barWidth*2,
                        NSHeight(self.bounds)/2);

startRect = NSMakeRect(NSMinX(self.bounds),
                       NSMinY(self.bounds),
                       barWidth,
                       NSHeight(self.bounds));

endRect = NSMakeRect(NSMaxX(self.bounds)-barWidth,
                       NSMinY(self.bounds),
                       barWidth,
                       NSHeight(self.bounds));

selectRect = NSMakeRect(barWidth,
                        NSHeight(self.bounds)/4,
                        (NSWidth(self.bounds)-barWidth),
                        NSHeight(self.bounds)/2);

2、四个区域的绘制
对绘制NSRect区域的代码做一层封装，其方法定义如下:

-(void)drawRectBound:(NSRect)bound color:(NSColor*)color{
    NSBezierPath *path = [NSBezierPath bezierPathWithRect:bound];
    [color setFill];
    [path fill];
}

因此，在drawRect方法中调用此方法即可，代码如下：

[self drawRectBound:sliderRect color:[NSColor whiteColor]];
[self drawRectBound:selectRect color:[NSColor blackColor]];
[self drawRectBound:startRect color:[NSColor redColor]];
[self drawRectBound:endRect color:[NSColor blueColor]];

Part III 实现左右滑块的移动

在实现滑块的移动时，需要使用以下四个方法：

//返回YES的话，View会接收mouseDown消息。
-(BOOL)acceptsFirstMouse:(NSEvent *)event{
    return YES;
}

//鼠标按下时，执行此方法。
-(void)mouseDown:(NSEvent *)event{
    NSPoint clickedLocationPoint = [event locationInWindow];
    NSPoint localPoint = [self convertPoint:clickedLocationPoint fromView:nil];
    
    if(NSPointInRect(localPoint, startRect)){
        //左滑块被点击
        startChange = YES;
    }else if(NSPointInRect(localPoint, endRect)){
        //右滑块被点击
        endChange = YES;
    }
}

//鼠标松开时，执行此方法。
-(void)mouseUp:(NSEvent *)event{
    startChange = NO;
    endChange = NO;
}

//鼠标拖拽时执行此方法。
-(void)mouseDragged:(NSEvent *)event{
    NSPoint clickLocationPoint = [event locationInWindow];
    NSPoint localPoint = [self convertPoint:clickLocationPoint fromView:nil];
    
    if(startChange){
        [self leftBarChange:localPoint];
    }else if(endChange){
        [self rightBarChange:localPoint];
    }
}

在leftBarChange和rightBarChange方法中，我们需要通过坐标的计算重新绘制双向滑块的四个区域，代码如下：

-(void)leftBarChange:(NSPoint)localPoint{
    NSRect origin = startRect;
    if(localPoint.x-barWidth < NSMinX(self.bounds)){
        //超出最小值
        startRect = NSMakeRect(0,
                               NSMinY(origin),
                               NSWidth(origin),
                               NSHeight(origin));
    }else if(localPoint.x > NSMinX(endRect)){
        //超出最大值
        startRect = NSMakeRect(NSMinX(endRect)-barWidth,
                               NSMinY(origin),
                               NSWidth(origin),
                               NSHeight(origin));
    }else{
        //正常值
        startRect = NSMakeRect(localPoint.x-barWidth,
                               NSMinY(origin),
                               NSWidth(origin),
                               NSHeight(origin));
        
    }
    selectRect = NSMakeRect(NSMaxX(startRect),
                            NSHeight(self.bounds)/4,
                            NSMinX(endRect)-NSMaxX(startRect),
                            NSHeight(self.bounds)/2);
    [self setNeedsDisplay:YES];
}

-(void)rightBarChange:(NSPoint)localPoint{
    NSRect origin = endRect;
    
    if(localPoint.x < NSMaxX(startRect)){
        //超出最小值
        endRect = NSMakeRect(NSMaxX(startRect),
                             NSMinY(origin),
                             NSWidth(origin),
                             NSHeight(origin));
    }else if(localPoint.x+barWidth > NSMaxX(self.bounds)){
        //超出最大值
        endRect = NSMakeRect(NSMaxX(self.bounds)-barWidth,
                             NSMinY(self.bounds),
                             barWidth,
                             NSHeight(self.bounds));
        
    }else{
        //正常值
        endRect = NSMakeRect(localPoint.x,
                             NSMinY(origin),
                             NSWidth(origin),
                             NSHeight(origin));
    }
    selectRect = NSMakeRect(NSMaxX(startRect),
                            NSHeight(self.bounds)/4,
                            NSMinX(endRect)-NSMaxX(startRect),
                            NSHeight(self.bounds)/2);
    [self setNeedsDisplay:YES];
}

Part IV 计算左右滑块的选中范围值

当左右滑块的位置发生变化时，需要计算左右滑块当前位置的值，其公式如下：

//计算左滑块起始值
double startScale = (NSMaxX(startRect)-NSMinX(sliderRect))/NSWidth(sliderRect);
_start = startScale*(self.maxValue-self.minValue)+self.minValue;

//计算右滑块结束值
double endScale = (NSMinX(endRect)-NSMinX(sliderRect))/NSWidth(sliderRect);
_end = endScale*(self.maxValue-self.minValue)+self.minValue;

当设定起始值与结束值时，计算左右滑块位置，即set方法，代码如下：

-(void)setStart:(double)start{
    double startScale = (start-self.minValue)/(self.maxValue-self.minValue);

    NSPoint tmpPoint = NSMakePoint(startScale*NSWidth(sliderRect) + NSMinX(sliderRect),0);

    _start = start;
    [self leftBarChange:tmpPoint];
}

-(void)setEnd:(double)end{

    double endScale = (end-self.minValue)/(self.maxValue-self.minValue);
    
    NSPoint tmpPoint = NSMakePoint(endScale*NSWidth(sliderRect)+NSMinX(sliderRect),0);
    
    _end = end;
    [self rightBarChange:tmpPoint];
    
}

Part V 声明、实现委托

代理协议声明如下：

@protocol MySliderDelegate<NSObject>
- (void) leftBarChanged:(MySlider *)slider;
- (void) rightBarChanged:(MySlider *)slider;
@end

实现的核心代码如下：

//左滑块改变
if(self.delegate != NULL){
    if([self.delegate respondsToSelector:@selector(leftBarChanged:)]){
        [self.delegate leftBarChanged:self];
    }
}
//右滑块改变
if(self.delegate != NULL){
    if([self.delegate respondsToSelector:@selector(rightBarChanged:)]){
        [self.delegate rightBarChanged:self];
    }
}

PS:与本文对应的视频版课程正在积极地筹备中，想获取本项目代码的小伙伴们，请点击下方的喜欢并私信我，我会一一回复给各位小伙伴。