自定义Slider实现点击移动和点击移动后继续滑动效果

---

在项目中我遇到了需要实现Slider的点击移动和点击移动后能够直接拖动的效果
系统自己的Slider我没有找到实现的方式，所以我们只能自定义我们自己的Slider

首先我们建立自己的Slider类，我命名为CustomSlider，继承自UISlider

1、实现点击移动

点击移动效果思路，重写touchesBegan方法，获取点击的点的坐标，然后根据比例算出相应的Slider的值，得到值后，我们就可以用setValue:方法设置Slider滑块的位置。就能达到点击滑动的效果。

这里我们还能使用手势UITapGestureRecognizer去实现相同的效果，实现的方式网上有好多种，这里我就不再赘述。

说了这么多，我们来看看代码：

这里有个共用的代码：

private func controlSliderBarValue(event: UIEvent?) {
        
    let allTouches: NSSet = event!.allTouches()!
    let touch: AnyObject? = allTouches.anyObject()
    if let touchLocation = touch?.locationInView(self) {
        let value = (self.maximumValue - self.minimumValue) * Float(touchLocation.x / self.frame.size.width)
        self.setValue(value, animated: true)
    }
}

重写的touchesBegan方法直接调用就可以

override func touchesBegan(touches: Set, withEvent event: UIEvent?) {
    self.controlSliderBarValue(event)
}

2、实现滑动效果

实现点击滑动就很简单了，直接重写touchesMoved方法即可，方法的实现还是调用controlSliderBarValue即可。

具体代码如下：

override func touchesMoved(touches: Set, withEvent event: UIEvent?) {
    self.controlSliderBarValue(event)
}

这样就能实现点击移动和点击移动后接着滑动的效果。

3、设置Slider高度

Slider的高度可以通过重写trackRectForBounds方法实现：

override func trackRectForBounds(bounds: CGRect) -> CGRect {
    return CGRectMake(0, 9, self.frame.size.width, 4)
}

这里将Slider的高度设置为4。

实现效果

实现效果图GIF