如何在 Swift 中实现范围滑块

我正在尝试实现范围滑块，并且使用了名为的自定义控件NMR范围滑块 https://www.cocoacontrols.com/controls/nmrangeslider.

但是当我使用它时，滑块根本不出现。难道也是因为它都是用 Objective-C 写的？

这就是我目前的实现方式：

var rangeSlider = NMRangeSlider(frame: CGRectMake(16, 6, 275, 34))
rangeSlider.lowerValue = 0.54
rangeSlider.upperValue = 0.94
self.view.addSubview(rangeSlider)

要创建自定义范围滑块，我在这里找到了一个很好的解决方案：iOS 8 测距仪教程 https://www.raywenderlich.com/76433/how-to-make-a-custom-control-swift但我的项目在 swift 3 中需要这个。我在这里为 Swift 3 iOS 10 更新了这个：

1. 在主视图控制器中将其添加到 viewDidLayOut 以显示范围滑块。

   override func viewDidLayoutSubviews() {
      let margin: CGFloat = 20.0
      let width = view.bounds.width - 2.0 * margin
      rangeSlider.frame = CGRect(x: margin, y: margin + topLayoutGuide.length + 170, width: width, height: 31.0)
   }
   

2. 创建辅助函数以在 viewDidLayoutSubviews() 下面打印滑块输出

   func rangeSliderValueChanged() { //rangeSlider: RangeSlider
       print("Range slider value changed: \(rangeSlider.lowerValue) \(rangeSlider.upperValue) ")//(\(rangeSlider.lowerValue) \(rangeSlider.upperValue))
   }
   

3. 创建文件RangeSlider.swift并将其添加到其中：

   import UIKit
   
   import QuartzCore
   
   class RangeSlider: UIControl {
   
    var minimumValue = 0.0
    var maximumValue = 1.0
    var lowerValue = 0.2
    var upperValue = 0.8
   
    let trackLayer = RangeSliderTrackLayer()//= CALayer() defined in RangeSliderTrackLayer.swift
    let lowerThumbLayer = RangeSliderThumbLayer()//CALayer()
    let upperThumbLayer = RangeSliderThumbLayer()//CALayer()
    var previousLocation = CGPoint()
   
    var trackTintColor = UIColor(white: 0.9, alpha: 1.0)
    var trackHighlightTintColor = UIColor(red: 0.0, green: 0.45, blue: 0.94, alpha: 1.0)
    var thumbTintColor = UIColor.white
   
    var curvaceousness : CGFloat = 1.0
   
    var thumbWidth: CGFloat {
      return CGFloat(bounds.height)
    }
   
    override init(frame: CGRect) {
      super.init(frame: frame)
   
      trackLayer.rangeSlider = self
      trackLayer.contentsScale = UIScreen.main.scale
      layer.addSublayer(trackLayer)
   
      lowerThumbLayer.rangeSlider = self
      lowerThumbLayer.contentsScale = UIScreen.main.scale
      layer.addSublayer(lowerThumbLayer)
   
      upperThumbLayer.rangeSlider = self
      upperThumbLayer.contentsScale = UIScreen.main.scale
      layer.addSublayer(upperThumbLayer)
   
     }
   
    required init?(coder: NSCoder) {
      super.init(coder: coder)
    }
   
    func updateLayerFrames() {
      trackLayer.frame = bounds.insetBy(dx: 0.0, dy: bounds.height / 3)
      trackLayer.setNeedsDisplay()
   
      let lowerThumbCenter = CGFloat(positionForValue(value: lowerValue))
   
      lowerThumbLayer.frame = CGRect(x: lowerThumbCenter - thumbWidth / 2.0, y: 0.0,
                                  width: thumbWidth, height: thumbWidth)
      lowerThumbLayer.setNeedsDisplay()
   
      let upperThumbCenter = CGFloat(positionForValue(value: upperValue))
      upperThumbLayer.frame = CGRect(x: upperThumbCenter - thumbWidth / 2.0, y: 0.0,
                                  width: thumbWidth, height: thumbWidth)
      upperThumbLayer.setNeedsDisplay()
    }
   
    func positionForValue(value: Double) -> Double {
     return Double(bounds.width - thumbWidth) * (value - minimumValue) /
       (maximumValue - minimumValue) + Double(thumbWidth / 2.0)
    }
   
     override var frame: CGRect {
      didSet {
         updateLayerFrames()
       }
     }
   
      override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
         previousLocation = touch.location(in: self)
   
         // Hit test the thumb layers
         if lowerThumbLayer.frame.contains(previousLocation) {
           lowerThumbLayer.highlighted = true
         } else if upperThumbLayer.frame.contains(previousLocation) {
           upperThumbLayer.highlighted = true
         }
   
          return lowerThumbLayer.highlighted || upperThumbLayer.highlighted
      }
   
      func boundValue(value: Double, toLowerValue lowerValue: Double, upperValue: Double) -> Double {
        return min(max(value, lowerValue), upperValue)
      }
   
      override func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        let location = touch.location(in: self)
   
        // 1. Determine by how much the user has dragged
        let deltaLocation = Double(location.x - previousLocation.x)
        let deltaValue = (maximumValue - minimumValue) * deltaLocation / Double(bounds.width - thumbWidth)
   
         previousLocation = location
   
         // 2. Update the values
        if lowerThumbLayer.highlighted {
           lowerValue += deltaValue
           lowerValue = boundValue(value: lowerValue, toLowerValue: minimumValue, upperValue: upperValue)
       } else if upperThumbLayer.highlighted {
         upperValue += deltaValue
         upperValue = boundValue(value: upperValue, toLowerValue: lowerValue, upperValue: maximumValue)
       }
   
       // 3. Update the UI
       CATransaction.begin()
       CATransaction.setDisableActions(true)
   
       updateLayerFrames()
   
       CATransaction.commit()
   
        sendActions(for: .valueChanged)
   
         return true
    }
   
     override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
       lowerThumbLayer.highlighted = false
       upperThumbLayer.highlighted = false
     }
   }
   

4. 接下来添加thumb层子类文件RangeSliderThumbLayer.swift并将其添加到其中：

     import UIKit
   
     class RangeSliderThumbLayer: CALayer {
        var highlighted = false
        weak var rangeSlider: RangeSlider?
   
     override func draw(in ctx: CGContext) {
       if let slider = rangeSlider {
         let thumbFrame = bounds.insetBy(dx: 2.0, dy: 2.0)
         let cornerRadius = thumbFrame.height * slider.curvaceousness / 2.0
         let thumbPath = UIBezierPath(roundedRect: thumbFrame, cornerRadius: cornerRadius)
   
         // Fill - with a subtle shadow
         let shadowColor = UIColor.gray
         ctx.setShadow(offset: CGSize(width: 0.0, height: 1.0), blur: 1.0, color: shadowColor.cgColor)
         ctx.setFillColor(slider.thumbTintColor.cgColor)
         ctx.addPath(thumbPath.cgPath)
         ctx.fillPath()
   
       // Outline
       ctx.setStrokeColor(shadowColor.cgColor)
       ctx.setLineWidth(0.5)
       ctx.addPath(thumbPath.cgPath)
       ctx.strokePath()
   
       if highlighted {
           ctx.setFillColor(UIColor(white: 0.0, alpha: 0.1).cgColor)
           ctx.addPath(thumbPath.cgPath)
           ctx.fillPath()
       }
     }
    }
   }
   

5. 最后添加轨迹层子类文件RangeSliderTrackLayer.swift并向其中添加以下内容：

    import Foundation
    import UIKit
    import QuartzCore
   
    class RangeSliderTrackLayer: CALayer {
     weak var rangeSlider: RangeSlider?
   
     override func draw(in ctx: CGContext) {
       if let slider = rangeSlider {
         // Clip
         let cornerRadius = bounds.height * slider.curvaceousness / 2.0
         let path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
         ctx.addPath(path.cgPath)
   
         // Fill the track
         ctx.setFillColor(slider.trackTintColor.cgColor)
         ctx.addPath(path.cgPath)
         ctx.fillPath()
   
         // Fill the highlighted range
         ctx.setFillColor(slider.trackHighlightTintColor.cgColor)
         let lowerValuePosition =  CGFloat(slider.positionForValue(value: slider.lowerValue))
         let upperValuePosition = CGFloat(slider.positionForValue(value: slider.upperValue))
         let rect = CGRect(x: lowerValuePosition, y: 0.0, width: upperValuePosition - lowerValuePosition, height: bounds.height)
       ctx.fill(rect)
      }
     }
    }
   

Build Run and Get: