Apple has provided an innovative mobile platform for software developers. Its mobile devices (iPhone, iPod and iPad) are being used by millions for entertainment as well as work. The developers can reach these users using app store via iTunes with the never before ease. For your projects, you can take advantage of the iPhone’s multi-touch interface and fabulous features using Xcode. We will discuss a few of these here.
Tools you need
To start programming for the iPhone, you’ll need
- MacBook or Mac Mini – unfortunately you cannot develop iPhone apps on a PC so you will need a system with Mac OS X.
- Apple’s iPhone Software Developer Kit (iOS SDK), which is free and available to members of Apple’s online (free) developer program. Download your copy of the iPhone SDK from Apple’s site at http://developer.apple.com/iphone. It consists of several components that form the basis of the iPhone development environment. These components include the following software:
- Xcode IDE: It is the most important tool for iPhone development. It provides everything a developer needs, a professional editor with code completion, project development and management environment, detailed documentation, and a graphical debugger. It helps you build, debug, test and even install applications on your device. Xcode is built around several open source GNU tools, namely gcc (compiler) and gdb (debugger).
- Simulator: The iPhone Simulator helps test applications without actually installing them on your iPhone/iPod Touch/iPad. The simulator runs when you run an app on Xcode. You can test everything on simulator barring a few APIs which can only be tested on devices. Still most of the work is tested on simulator only.
- Interface Builder: Interface Builder (IB) provides a rapid prototyping tool that enables you to lay out user interfaces graphically without writing any code. With IB, you draw out your interface using visual design tools and then connect those onscreen elements to objects and method calls in your application
- Instruments for Performance Analysis: Instruments profiles how iPhone applications work under the hood. It collects disk, memory and CPU usage in real time, which lets you identify and target problem areas in your applications. Instruments offer graphical time-based performance plots that show where your applications are using the most resources.
The above tools are enough for development and testing but if you want to run your app on device you will need to have an iPhone / iPod Touch / iPad. Also if you want to distribute your app using the Apple app store then you need to get registered in Apple’s paid developer program.
Making it Happen
Let us now make a simple yet impressive application. Our iPhone application being a professional one must have a splash screen, a Tab bar at bottom, a Navigation Bar at top, Tables, date pickers, image views, etc.
I assume that you know how to start Xcode. So once you start XCode – you will see athe following screen
On the right hand you see a list of projects you made previously and on the left you have some options. Just click “Create a new Xcode Project” and New Project screen will be shown
Choose “Tab Bar Application”; you will be asked for a location for your project. Save it in document directory. The project will be created for you; notice that Xcode creates the built-in structure of the new project. You can now appreciate the kind of work which is done by iPhone SDK developers for you. The most common tasks are just a click away. This makes it fast and keeps you focused.
Implementing our first feature i.e. Splash Screen:
You must have seen this type of screen in almost every app. It is simple yet the best thing for branding an app. It is the first screen which is shown when apps get loaded, showing the name of the app with company name and similar information. Also it serves as a view which people look while the app is loading – so it also acts as a loading message or any other information that you want to include. After a second or two you get rid of it so that you can continue with your actual program.
The best part is that you do not need to program for this screen. Simply add a portable network graphic image to the Resources folder and rename the image to “Default.png”. That’s it, you have made your first functionality. Press Build-> Build and Run and it will show you this screen.
You may have noticed that we made a “Tab Bar Application”, what does it mean? It means that a tab bar controller is already made available to you and you just need to customize it according to your needs.
To customize, double click Resource -> MainWindow.xib file in the left pane of Xcode. This will open a few windows, look at the one having MainWindow.xib as its title. You will see that this window contains a list and the last item in this window is a “Tab Bar Controller”.
Select this controller and look out for window titled “Tab Bar Controoller Attributes”, this is generally at the extreme right of screen. Here you can see that the first list contains View Controllers. View controllers are nothing but the screens we want to show in this Tab Bar. Controllers already available are provided by default. You can add or remove more Controllers here. Add one more tab controller by pressing + button.
Now you can also select the Tab Bar Item by expanding the Tab Bar Controller in screen “MainWindow.xib”. Select any Tab Bar item and you can change its tile, nib file and controller class in Attributes or Identity Inspector.
For example here we have used FirstViewController in first tab, SecondViewController in second tab and ThirdViewController in third tab.
ADDING a TABLE VIEW
Use Cases:
The image on left shows table added by using UITableView.
Make a new file UIViewController Subclass and save it as UseCasesViewController.
It will create 3 files UseCasesViewController.h, UseCasesViewController.m and UseCasesViewController.xib.
Now open xib file. Add UITableView from library to default view.
There are various methods provided by Apple for UITableView class and we can override them in our class. Since we are editing a table, all of these functions will be related to editing a table. There are two functions, which provide rows and sections in table. Table contains rows, section and no columns.
#pragma mark -
#pragma mark Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
return 2;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
if(section == 0) return 2;
else return 1;
}
Now we need to populate table with some data. There are 2 sections and each section has relative 1 or 2 rows.
Here option array is initialized as:
NSArray optionArray = [[[NSArray alloc] initWithObjects:@”Take a photo”,@”Enter in text Field”,nil] autorelease];
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @”Cell”;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];
}
if(indexPath.section == 0 ){
cell.textLabel.text = [optionArray objectAtIndex:indexPath.row];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
}
if(indexPath.section==1) {
cell.textLabel.text= @”Date Picker”;
cell.accessoryType = UITableViewCellAccessoryNone;
}
// Configure the cell…
return cell;
}
When we click on table rows apple provide us method called –
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableView deleteRowsAtIndexPaths:indexPath withRowAnimation:UITableViewRowAnimationNone];
}
There is one more function provided to us is :
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
if(section == 0 )
return @”You can enter any combination of a photo and description.”;
else
return @”Also can select date using date picker.”;
}
Take a Photo or adding Image Picker
UIImagePickerController used to either select photo from photo library or take picture by using camera (if supported by device).
To use this simply just add a new file as PhotoPickerViewController. Then add two buttons and UIImageView to show image selected/taken and in PhotoPickerViewController.m file add the following action method. Then connect this action method with buttons’ event (touch up inside).
-(IBAction) getPhoto:(id) sender {
UIImagePickerController * picker = [[UIImagePickerController alloc] init];
if(((UIButton *) sender).tag == 0) {
picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
}
else {
if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
}else{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@”" message:@”Your device does not support camera” delegate:self cancelButtonTitle:@”OK” otherButtonTitles:nil];
[alert show];
[alert release];
}
}
[self presentModalViewController:picker animated:YES];
}
Select a Date i.e. Adding a DATE PICKER
There is very useful component provided by apple to select date and time called DatePicker.
Make a new file named DateSelectorViewController and just drag and drop UIDatePicker in view. In connection inspector there are various options that can be changed accordingly.
You are ready to run your first professional application now. Just select Build -> Build and run and it will show it to you in simulator (make sure that a device is not connected and device configuration is not selected – just above the left pane).
