How to create a gauge view – iOS Swift 4 – PART 1

well well well, after 2 weeks of hard work, now i have time to recheck the things which i learn and share with you guys

in this article i want to create a gauge view in ios and swift 4, we all hear this sentence ” math is trash, never use radian, degree and logarithms in real life”, now , this is where you should use math and degree and circle and point formulas ūüėÄ i totally forget this things but to create a circle gauge view, we have to back to them

final gauge view would be something like this

gauge view

this is a project which i’ve worked on last week.

so shall we start?

in this article we talk about :

  1. CALayer, CAShapeLayer
  2. Circle and Point Formulas
  3. CABasicAnimation,Customizing and inheriting CALayer
  4. Connecting all above things together

here is a deep tutorial which i recommend, we won’t deep dive in CoreGraphics and CoreAnimation, so maybe you want to know more about them

we will use this article to create our gauge view, i just copy the parts which we need, i mention copied part with “copy” annotation, and mine with “mine”

 

CoreAnimation – CALayer

— copy —

As you probably know, everything you see in an iOS app is a view. There’s button views, table views, slider views, and even parent views that contain other views.

But what you might not know is that each view in iOS is backed by another class called a layer ‚Äď a¬†CALayer¬†to be specific.

UIView takes care of many things including layout or handling touch events. It’s interesting to notice that it doesn’t directly take care of the drawing or animations, UIKit delegates that task to its brother: CoreAnimation. UIView is in fact just a wrapper over CALayer. When you set bounds on a UIView, the view simply sets bounds on its backing CALayer. If you call layoutIfNeeded on a UIView, the call gets forwarded to the root CALayer. Each UIView has one root CALayer, which can contain sublayers.

— mine —

now you know that inside each view, we have something inside each view, and we call it layer, each view have a main layer and can has too many layers, we use layer to draw our gauge inside the main and container view

all this pointers, are pointing to layers, we have a single view and 4 layer, outer circle, inner circle, gauge needle and texts are our layers

now we begin with creating our view,

  1. create a playground
  2. config it for live view and create an empty view

we have comment on each line so you can easily whats is going on

 

now, if you play the playground, can click on this double circle,

you will see something like this, this square would be our

look again at our gauge, we need to create 4 layer, we begin with outer circle, our main circle,

first, maybe you ask me, why we need to use layers, why not using uiviews, but i will answer you that we have animations, very fast, repetitive and heavy animations. uiviews animations are handled by mainthread, everythings that you want to present to users, like changing text, colors, scale and … should be done in mainthread, so think about our gauge, we have a needle which rotates very fast and shows the degree

but on the other hand, GPU it is responsible for layer’s happiness ūüėÄ

animations, drawing and other stuff related to layer’s handled by GPU, so simply we use CALAYER.

CALayer has a lot of useful properties, which maybe we use before , we can see them in mentioned article, but for drawing our main circle, we use a simple layer called CAShapeLayer

 

— copy —

CAShapeLayer

CAShapeLayer¬†makes use of scalable vector paths to draw, and it’s much faster than using images. Another part of the win here is that you’ll no longer need to provide images at regular, @2x and @3x sizes. w00t!

Additionally, you have a variety of properties at your disposal to customize line thickness, color, dashing, how lines join other lines, and if that area should be filled and with what color, and more.

 

— mine —

i mentioned drawing a layer, and also we see that layers are scalable, this lead us to this, that we can use something like points to draw a layer. we call this Path and we use Points to draw paths. we want to draw a circle, before drawing a circle on our layer, we have to know that what is a circle in math

A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre; equivalently it is the curve traced out by a point that moves so that its distance from a given point is constant.
Wikipedia

so, for drawing a circle, we have to draw points on our layer around a center point which is our uiview center, in the below code we can see how to draw a circle

 

then we have to change our uiview definition and add a function for setup our view something like this

now you can see this :

play with our circle properties see their affects in action, like changing fill color, width, stroke color…, even you can change our layer path to change our circle , maybe create a semi circle by changing startAngle and stopAngle

 

now we have a circle red color

now its time for measurement layer, i mean this layer, we want to create something like this

each of this lines are, line -_- i mean we want to create a circle begin from (left) 135¬ļ degree, to (right) 405¬ļ.

why do we use 135¬ļ to 405¬ļ ? because our gauge start from left to right, we want to have a same degree entire our app in all layers

now lets begin,

this is our code

 

finally you have to add this new layer to your main view

 

and you have something like this

 

you can change the properties of this two layer and check whats is going on

 

end of part 1