Hi there, this is a tutorial, with full source code and a functional example of how to create a round gauge or clock component for iPhone.
This tutorial is very useful because it also shows you the principles and the best practices to create a custom component.
This tutorial will show you how to create an animated gauge just like this :
The final gauge
The component we create can be skied with any images you want, it can be a speed gauge, a compass or anything you want, it will be auto scalable and one line integration.
The principle it’s simple, we just extend the view and in it we add our code to create the gauge, in this case the gauge is very simple, it only has a background image and a pin which you can rotate to a specific angle in degrees.
So, here goes :
1. Download the files located here, this is the View subclass i created and the images needed for the project, both high and low resolution.
2. Create a view based project, this is the easiest solution for exemplification. My project is called “Gauge” so all the names of the view controllers will be relative to this, it would be easier for you if you name your project the same.
Create a new view based project
3. Add the files to the project (check the copy to project option)
Add the files to the project
and this how the project structure will look like when you are done (i created a separate images directory, so the tree looks cleaner) :
Xcode project structure
4. We should create an outlet for a ClockView, which we will add in the project. In this example I will only use one gauge, but you can follow the process to create as may as you want.
Now open the “GaugeViewController.h” file and change it so it looks like this :
#import
@class ClockView;
@interface GaugeViewController : UIViewController {
ClockView *gauge1_;
}
@property(nonatomic, retain) IBOutlet ClockView *gauge1;
@end
What we did here is to add a forward declaration for the ClockView and declare an outlet to a ClockView view, remember that ClockView is a subclass of UIView, so it can be used in any way a view can be used. Now open the “GaugeViewController.m” and add the code bellow right after the “@implementation GaugeViewController” line :
@synthesize gauge1 = gauge1_;
and also this is how dealloc method should look now :
- (void)dealloc
{
[gauge1_ release];
[super dealloc];
}
5.Now open the “GaugeViewController.xib” file, here we add our clock view. We add it as a normal UIView, so you should add a view from the library to your main view (as a child of the main view), the view you add should be square :
Add a new subview
6. We have to set the new view to be a clock view, we do this by changing the class of the view we added from UIView to ClockView :
Change the class of the UIView
And also set the outlet of the view to the outlet we created earlier :
set the outlet
And we are done with the xib file, save it!
7. Open once again the “GaugeViewController.m” file. Include the ClockView.h file. Update the viewDidLoad method, which should look like the one bellow :
- (void)viewDidLoad
{
[super viewDidLoad];
[gauge1_ prepare];
}
8. We are almost done, one more small thing remaining. The ClockView uses some layer methods to transform it, and those methods are found in Quartz2d frame work, so we have to add it. So add the Quartz2D framework :
add quartz2d framework into the project
9. Build and run the project 
:
Run the clock view project
The pin of the gauge is very easy to rotate, by calling the rotateTo method of the clock view.
As an extra bonus step, let’s make the clock to make an full rotation every minute, and update it every second. We will do this by adding a timer to the project, and an integer to count the seconds.
Open the “GaugeViewController.h” and change it to :
#import
@class ClockView;
@interface GaugeViewController : UIViewController {
ClockView *gauge1_;
NSInteger seconds_;
}
@property(nonatomic, retain) IBOutlet ClockView *gauge1;
@end
All I did was to add a new NSInteger variable.
Now open the GaugeViewController.m and add a timer and a method which is called every second :
- (void)viewDidLoad
{
[super viewDidLoad];
[gauge1_ prepare];
[NSTimer scheduledTimerWithTimeInterval:1.0f
target:self
selector:@selector(secondUpdate:)
userInfo:nil
repeats:YES];
}
-(void)secondUpdate:(NSTimer*)timer {
//we have 360 degrees on a full rotation, and we want 60 steps per rotation
[gauge1_ rotateTo:seconds_*(360/60)];
seconds_++;
}
Run the project once again and observe the results.
Here is the entire project if you want it.
Success !!! is that easy !
.
