CODEWITHSUNDEEP
iosswiftanimationsprite-kit
Habil96
Habil96

Reputation: 75

Swift Animation Similar to Line Chart

my question can be a little bit confusing, however I will do my best to explain it. So I need to create a view like below in the image, which looks like a line chart.

Example Image

Animation Image

In other words, the line thumbs should be interactive, so that user can move them up and down, which will led to the movement of "ropes" between each pair. The problem is I can not figure out to start what kind of structure in swift so that I can create this view. So far, I am thinking about to create separate sliders and connect them by drawing, lines between them, but I think there should be some better solution. Any help, idea, advice or hint is appreciated. Thanks in advance.

Upvotes: 2

Views: 531

Answers (1)

Fattie
Fattie

Reputation: 12648

Part 1. Learning to use "drawRect" in a UIView

Make a custom view, i.e. subclass UIView. To draw the nine angled line segments (and indeed the grid behind) you'll need to master core graphics. Fortunately there are many of QA on this very topic:

How to draw a line in the simplest way in swift

Part 2. Custom layers in UIView

You'll have to learn about adding custom CALayers to views. There are many examples of this, eg

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

(Note that for the small text labels, I would probably simply add many UILabels programmatically, which you will also need to learn about.)

Part 3. Using UISlider

There's really nothing wrong with using a UISlider for each of your red dots. If you're just getting started with iOS, I suggest trying that first to become familiar with it.

A handy tip is, simply use a horizontal stack view to hold them all - you can space them as you wish.

Part 4. Using gestures

Beyond UISlider. The red buttons would most likely be custom UIViews. And, most simply, you would use UIPanGestureRecognizer to detect the finger moving.

Again you can find many QA on this field of study, example Move UIView within parent view using pangesture

If you master these four general fields you will be able to achieve the view in question, good luck!

Upvotes: 3

Related Questions