iOS: Create GaugeView/Speedometer in Swift 4 using ABGaugeViewKit

In this article, we are going to implement a light weight GaugeView in iOS XCode using ABGaugeViewKit with Dynamic features.

Key Features:

1. N number of Arcs with custom area for each arc.
2. Customisable overall arc angle.
3. Cool animations.
4. Simple and lightweight.

Steps:

1. Create a new project in XCode.
2. Add ABGaugeViewKit in your project.
3. Prepare ABGaugeView using Storyboard.
4. Things to keep in mind before setting parameter values.(This one is important)

1. Create a new project in XCode

Open XCode, goto File>New>Project

1. New Project View in XCode 9

Select “Single View App” as shown in image no. 1 and click NEXT.

Then, add Product Name. You can add your own product name. For tutorial purpose let’s give it a name “ABGaugeExample” and click NEXT.

2. Add ABGaugeViewKit in your project

In this step, we will add Podfile in our project.

2. Snapshot of podfile

1. Launch Terminal and goto your project’s directory.
2. Type pod init and press enter in Terminal. This command will create podfile in your project.
3. Type open podfile and press enter in Terminal. This command will open podfile in TextEditor.
4. In Podfile, add > pod ‘ABGaugeViewKit’ < like shown in image no. 2
5. save podfile and close your project.
6. Goto Terminal, and type pod install. This command will install the framework.

3. Prepare ABGaugeView using Storyboard.

3. Add same width and height constraints

4. Add center horizontally and vertically constraints

5. Change class name from UIView to ABGaugeView

6. Change parameters value

1. Once the framework is installed, goto project directory and open YourProjectName.workspace.
2. Goto Main.stoyboard and add a UIView to ViewController.
3. Add same width and height constraints for eg. 240 as shown in image no. 3.
4. Add center horizontally and vertically constraints as shown in image no. 4.
5. Goto Identity Inspector and change the class name to ABGaugeView as shown in image no. 5.
6. Goto Attributes Inspector to change the attributes of the Gauge View such as following attributes Color Codes, Areas, Arc Angle, Needle Color, Needle Value, Apply Shadow, Is Round Cap, Blink Animate, Circle Color, Shadow Color.

4. Things to keep in mind before setting parameter values.

1. Color Codes: You should add set of hex code of colors you want in your gaugeView combined by a comma.
2. Areas: Add area of each arc combined by comma with a total of 100. Also, note that number of Color Codes and number of areas should be equal.
3. Arc Angle: You can add value from 0.1 to 3.6.
4. Needle Value: You can add value from 0 to 100.
5. Apply Shadow: You can toggle the shadow for ABGaugeView.
6. Is Round Cap: You can toggle the round cap end of the ABGaugeView.
7. Blink Animate: You can toggle the animate for ABGaugeView’s arc.
8. Circle Color: You can change circle color of the needle.
9. Shadow Color: You can shadow of the ABGaugeView.

Finally, Build and Run :)