如何在Swift

时间：2015-07-02 08:48:44

标签： ios objective-c swift uicontrol

我尝试实现Range Slider，并使用名为NMRangeSlider的自定义控件。

但是当我使用它时，滑块根本不会出现。是不是也因为它全部是用Objective-C编写的？

这就是我目前实施它的方式：

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

4 个答案:

答案 0 :(得分：4)

要创建一个自定义范围滑块，我在这里找到了一个很好的解决方案：range finder tutorial iOS 8但我需要在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. 接下来添加拇指图层子类文件 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)
   }
  }
 }

    6. 构建运行并获取： enter image description here

答案 1 :(得分：2)

UPDATE：

它没有向我展示，因为它全是白色的。所以解决方案，不使用任何其他框架并坚持使用这个 - 您需要为所有组件设置所有视图，然后它将显示良好：

enter image description here

我曾尝试在Swift中导入它，因为我之前在Objective-C代码中使用它，但没有任何运气。如果我正确设置了所有内容并将其添加到viewDidLoad()或viewDidAppear()中，则不会显示任何内容。但有一点值得一提 - 当我进入查看调试层次结构时，画布上的滑块实际上 ：

enter image description here

但是在将其添加到视图之前，它根本没有使用我设置的所有颜色进行渲染。为了记录 - 这是我使用的代码：

override func viewDidAppear(animated: Bool) {
    var rangeSlider = NMRangeSlider(frame: CGRectMake(50, 50, 275, 34))
    rangeSlider.lowerValue = 0.54
    rangeSlider.upperValue = 0.94

    let range = 10.0
    let oneStep = 1.0 / range
    let minRange: Float = 0.05
    rangeSlider.minimumRange = minRange

    let bgImage = UIView(frame: rangeSlider.frame)
    bgImage.backgroundColor = .greenColor()
    rangeSlider.trackImage = bgImage.pb_takeSnapshot()

    let trackView = UIView(frame: CGRectMake(0, 0, rangeSlider.frame.size.width, 29))
    trackView.backgroundColor = .whiteColor()
    trackView.opaque = false
    trackView.alpha = 0.3
    rangeSlider.trackImage = UIImage(named: "")

    let lowerThumb = UIView(frame: CGRectMake(0, 0, 8, 29))
    lowerThumb.backgroundColor = .whiteColor()
    let lowerThumbHigh = UIView(frame: CGRectMake(0, 0, 8, 29))
    lowerThumbHigh.backgroundColor = UIColor.blueColor()

    rangeSlider.lowerHandleImageNormal = lowerThumb.pb_takeSnapshot()
    rangeSlider.lowerHandleImageHighlighted = lowerThumbHigh.pb_takeSnapshot()
    rangeSlider.upperHandleImageNormal = lowerThumb.pb_takeSnapshot()
    rangeSlider.upperHandleImageHighlighted = lowerThumbHigh.pb_takeSnapshot()

    self.view.addSubview(rangeSlider)

    self.view.backgroundColor = .lightGrayColor()
}

使用在this question中提到的UIVmage捕获UIVmage的方法：

extension UIView {
    func pb_takeSnapshot() -> UIImage {
        UIGraphicsBeginImageContextWithOptions(bounds.size, false, UIScreen.mainScreen().scale)
        drawViewHierarchyInRect(self.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

其他解决方案：

您也可以试试sgwilly/RangeSlider，它是用Swift编写的，因此您甚至不需要桥接标题。

答案 2 :(得分：0)

试试这段代码：

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,
        width: width, height: 31.0)
}

答案 3 :(得分：0)

我使用以下方法实现了范围滑块： https://github.com/Zengzhihui/RangeSlider

在GZRangeSlider类中，有一个名为的方法： private func setLabelText（）

在那种方法中，只需输入：

leftTextLayer.frame = CGRectMake（leftHandleLayer.frame.minX - 0.5 *（kTextWidth - leftHandleLayer.frame.width），leftHandleLayer.frame.minY - kTextHeight，kTextWidth，kTextHeight）

rightTextLayer.frame = CGRectMake（rightHandleLayer.frame.minX - 0.5 *（kTextWidth - leftHandleLayer.frame.width），leftTextLayer.frame.minY，kTextWidth，kTextHeight）

为下标签和上标签设置动画..

这个对我来说很好，而且很快......试试吧..

相关问题
最新问题