ios - 类似于折线图的 Swift 动画

Question

我的问题可能有点令人困惑，但我会尽力解释它。所以我需要在图像中创建一个如下图所示的 View ，它看起来像一个折线图。





换句话说，线拇指应该是交互式的，以便用户可以上下移动它们，这将导致每对之间的“绳索”移动。问题是我无法弄清楚在 swift 中启动什么样的结构以便我可以创建这个 View 。到目前为止，我正在考虑创建单独的 slider 并通过在它们之间绘制线条来连接它们，但我认为应该有一些更好的解决方案。感谢任何帮助、想法、建议或提示。提前致谢。

Answer 1

第 1 部分。学习在 UIView 中使用“drawRect”

制作自定义 View ，即 UIView 的子类。要绘制九个有角度的线段(实际上是后面的网格)，您需要掌握核心图形。幸运的是，有很多关于这个主题的 QA:

How to draw a line in the simplest way in swift

第 2 部分。 UIView 中的自定义层

您必须了解如何添加 自定义 CALayers 到 View .有很多这样的例子，例如

https://stackoverflow.com/a/57465440/294884
https://stackoverflow.com/a/41553784/294884

(请注意，对于小文本标签，我可能会简单地以编程方式添加许多 UILabel，您还需要了解这些内容。)

第 3 部分。使用 UISlider

为每个红点使用 UISlider 确实没有错。如果您刚刚开始使用 iOS，我建议您先尝试熟悉它。

一个方便的提示是，只需使用水平堆栈 View 来保存它们 - 你可以随意放置它们。

第 4 部分。使用手势

超越 UISlider。红色按钮很可能是 自定义 UIViews .而且，最简单的是，您将使用 UIPanGestureRecognizer检测手指移动。

同样，您可以在该研究领域找到许多 QA，例如 Move UIView within parent view using pangesture

如果你掌握了这四个一般领域，你将能够实现有问题的观点，祝你好运!