美文网首页
自定义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