Gauges: Getting Started
This quick start tutorial demonstrates how to create a simple gauge view with TKGauge
.
Setting up TKGauge
Now that our project is created and the TelerikUI.framework is added, we can start referencing and using the TelerikUI types:
Open your ViewController.m file and add a reference to the chart header file:
#import <TelerikUI/TelerikUI.h>
Note that starting with Xcode 6 Apple doesn't generate the precompiled headers file automatically. That is why you should add import the UIKit framework before importing TelerikUI:
#import <UIKit/UIKit.h>
If you are writing Swift, add the same line in your bridging header.
If you are using Xamarin, add a reference to TelerikUI.dll in your project and use the using directive:
using TelerikUI;
You can start by creating a TKGauge
view object in ViewDidLoad()
method. TelerikUI supports radial and linear type of gauge. You can instantiate TKRadialGauge by using the following lines:
radialGauge = new TKRadialGauge ();
this.radialGauge.Delegate = new GaugeDelegate ();
this.View.AddSubview (this.radialGauge);
TKGauge is created with flexibility in mind. There is few tipes of components - scales, segments and indicators - allowing you to fully customize the overall look and feel.
Let's add scale to TKGauge:
TKGaugeRadialScale scale = new TKGaugeRadialScale (new NSNumber (0), new NSNumber (6));
this.radialGauge.AddScale (scale);
Now add a segment to the scale:
TKGaugeSegment segment = new TKGaugeSegment (new NSNumber(-10), new NSNumber(18));
segment.Location = 0.56f;
segment.Width = 0.05f;
segment.Width2 = 0.05f;
segment.Cap = TKGaugeSegmentCap.Round;
Add an indicator to the scale:
TKGaugeNeedle needle = new TKGaugeNeedle();
needle.Width = 3;
needle.TopWidth = 3;
needle.Length = 0.6f;
needle.ShadowOffset = new CGSize(1, 1);
needle.ShadowOpacity = 0.8f;
needle.ShadowRadius = 1.5f;
scale.AddIndicator(needle);