How to create a ruler / scale slider with Swift 3?

Fod*_*ddy 5 user-interface ios swift

I'm trying to recreate a temperature ruler similar to the Coinbase app for an app in Swift 3. Unfortunately, I'm not sure if I follow the right approach.

In my current experiment, I used a UIScrollView element and placed / drawn lines at a certain distance (with a loop and UIBezierPath). In the next step I want to read the user input. With the current approach I have to use the X-position of the UIScrollView to convert things to read the current temperature. That seems to me a relatively inaccurate thing to be? My result looks like this.

// UI SCROLL VIEW
var scrollView: UIScrollView!
scrollView = UIScrollView(frame: CGRect(x: 0, y: 120, width: 400, height: 100))
scrollView.contentSize = CGSize(width: 2000, height: 100)
scrollView.showsHorizontalScrollIndicator = false

let minTemp = 0.0
let maxTemp = 36.8
let interval = 0.1

// LINES
let lines = UIBezierPath()

// DRAW TEMP OTHER LINES
for temp in stride(from: minTemp, to: maxTemp, by: interval)
{
    let isInteger = floor(temp) == temp

    let height = (isInteger) ? 20.0 : 10.0
    let oneLine = UIBezierPath()
    oneLine.move(to: CGPoint(x: temp*50, y: 0))
    oneLine.addLine(to: CGPoint(x: temp*50, y: height))

    lines.append(oneLine)

    // INDICATOR TEXT
    if(isInteger)
    {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 40, height: 21))
        label.center = CGPoint(x: temp*50, y: height+15)
        label.font = UIFont(name: "HelveticaNeue",
                            size: 10.0)
        label.textAlignment = .center
        label.text = "\(temp) °C"
        scrollView.addSubview(label)
    }
}

// DESIGN LINES IN LAYER
let shapeLayer = CAShapeLayer()
shapeLayer.path = lines.cgPath
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 1

// ADD LINES IN LAYER
scrollView.layer.addSublayer(shapeLayer)

view.addSubview(scrollView)
self.view = view
Run Code Online (Sandbox Code Playgroud)

示例结果

Coinbase 应用程序也让我震惊,当我移动滑块时,会有某种自适应反馈(至少在 iPhone X 上)。当你遇到一条线时,iPhone 很容易振动,类似于 UIPickerView。我的方法没有这种方法,我强烈怀疑开发人员是否在 Coinbase 上手动对其进行了编程......所以也许有一种更智能、更新的方法来如何在 Swift 中本地重新创建这样的标尺?

Coinbase 标尺示例

Sae*_*ahi 1

您可以使用此吊舱,这将允许您将其用作水平或垂直

https://github.com/farshidce/RKMultiUnitRuler