美文网首页
自定义Slider实现点击移动和点击移动后继续滑动效果

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

作者: TomatosX | 来源:发表于2016-05-05 15:43 被阅读1520次

在项目中我遇到了需要实现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<UITouch>, withEvent event: UIEvent?) {
    self.controlSliderBarValue(event)
}

2、实现滑动效果

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

具体代码如下:

override func touchesMoved(touches: Set<UITouch>, 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

相关文章

网友评论

      本文标题:自定义Slider实现点击移动和点击移动后继续滑动效果

      本文链接:https://www.haomeiwen.com/subject/cupdrttx.html