如何使用Swift 3创建标尺/比例滑块?

时间:2018-03-18 09:52:29

标签: ios swift user-interface

我正在尝试为Swift 3中的应用程序重新创建类似于Coinbase应用程序的温度标尺。不幸的是,我不确定我是否采用了正确的方法。

在我目前的实验中,我使用了UIScrollView元素并在一定距离处放置/绘制了线条(带有循环和UIBezierPath)。在下一步中,我想阅读用户输入。使用当前的方法,我必须使用UIScrollView的X位置来转换事物以读取当前温度。在我看来,这是一个相对不准确的事情?我的结果看起来像这样。

// 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

example result

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

Coinbase ruler example

1 个答案:

答案 0 :(得分:0)

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

https://github.com/farshidce/RKMultiUnitRuler