iCode Tips

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.

In this short tutorial I will explain how to create and use an UITableView that has custom cell, that are loaded from a diferent xib file.

In this tutorial you will also learn how to create a simple table view, connect an outlet to it, and also create it’s datasource and delegate.

This is helpful when you have tables that have complicated designs for the cells and you don’t want to create them from code, and it’s much easier to change.

So create a new viewbased project, right click on classes and add file, select a cocoa touch class and select the options like in the image bellow :

create new uitableview cell

click next and name it something like “ACellView”, remember to check the also create h file button if it’s not checked.

Now we have t0 create the xib file for the cell : right click resources folder , add, and add file and select user interface and an empty xib file :

create new empty xib for cell

Now double click the xib file to actually create the cell view :

First of all, we have to create a view for the cell, this is not just a view it’s a table cell view, if you look in the library you will see this kind of view, drag one :

drag a cell view

After you added the view, you have to identify the view, go to the identity inspector and select the class of the cell, this is the class previously created.

change identity of the cell view

You also have to set an unique cell identifier, this is used for memory management to reuse cell, and not allocate new ones, it’s a huge memory improvement, especially when you are working with tables which have a large number of cells.

add unique cell identifier

And the final step is to add a label to the cell view, we can add here whatever we want, but just for the demo we will add a simple label.

add a lablel

Now, open your viewcontroller header file, it should only be one header file which containts “viewcontroller” and copy the code(remember to change the name of the view controller so it matches yours :

#import <UIKit/UIKit.h>

@interface TVC2ViewController : UIViewController
<UITableViewDelegate, UITableViewDataSource>{

 UITableView *tableView_;

}

@property (nonatomic, retain) IBOutlet UITableView *tableView;

@end

You can see that we added one the datasource and the delegate for a table view, also we added an outlet to a table view, now it’s time to connect them to the table view, but before we do that enter the following line after the implementation line in your m file of the view controller :

@synthesize tableView = tableView_;

Now in the resources group double click the main view xib file, it has the same name as the view controller, the interface builder will open with the empty view.

Now we will create a table view and link it to out outlet, also we will set the datasource and delegate for the tableview.

adding a table view

Just drag a table view from the library to the view, this is very simple, also the table view will take the size of the view, but you can than resize it to any size you want.

Next we connect out outlet to the table view :

connecting the outlet

Now we have to set the datasource and delegate for the table view, without them the table view will display no data. The data source will be used to retrieve the table data, like the number of sections, number of rows, etc. The delegate will be called when certain actions are triggered, like selecting a cell, or just before selecting a cell.

If the connection inspector is not opened you can open it from tools menu.

adding the datasource

And now you should be done with the xib, select the table view and take a look in the connection inspector, it should look like in the image bellow :

check the connections

Now that this is done all we have left to do is create some code to have some data, and implement the delegate and data source.

Go to the .m file of you view controller, and scroll down at the end of the file and paste in the code :

#pragma mark -
#pragma mark UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

 NSString *CustomCellIdentifier = [NSString stringWithFormat:@"CustomCell"];

 ACellView *cell = (ACellView *)[tableView dequeueReusableCellWithIdentifier: CustomCellIdentifier];
 if (cell == nil)
 {
 NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ACellView" owner:self options:nil];
 cell = (ACellView *)[nib objectAtIndex:0];
 }

 return cell;

}

#pragma mark -
#pragma mark Uitableviewdelegate
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 return NO;
}

If you compile now you will get an error, because you did now included the cellview file, just import the ACellView.h file, compile it, and everything should be ok.

program is running

As a final note, please keep in mind that the code above is just the base to start it working, the number of cells is hardcoded, and we are not setting any content to the cells, to do that you will have to add some outlets… maybe I’ll write about that in a future tutorial.

If you have any problems, or questions please do not hesitate to ask, and I will answer ASAP.

hello world in this video tutorial I will show you how to create a hello world project for iPhone, this is very simple with very detailed explanations for the absolute beginner.

A short description of the tutorial : you will learn how to create a project, what files are created on a view based project, and how to add some text to the view as a label, and then build and run the project to see the results.

Here is a video with the complete tutorial, step by step for the absolute beginner to create the first iphone project : video tutorial