Change tab text and add images

One of the things I like about the tab controller is the easy option to add a image into them. I do give it to apple on how their framework has everything thought out for a good user experience. As a programmer, I hardly have to think about the UI at all. I just have to make it work.

So you want to double click on the MainWindow.xib. This will launch Interface Builder.

You want to make sure the inspector dialog is showing

• Tools -> Inspector

Now that everything is loaded we can easily change the text by double clicking it in the Tab Bar Controller view. or we want to change it in the inspector.

The first thing I always do is change the view from thumbnail to listing view. You do that in the screenshot below.

Also if you didn’t you need to drag the images you want to use into your project like we did in the icon example.

So once the icons are there we want to select the item we want to edit. So see the following screenshot as we want to edit the first tab. In the inspector window when its selected we have Title and Image. We can change the title to whatever we want. I choose Browse. Then just select which image you want to use with it. You are free to not use an image if you wish. For the other tab I choose to set it as options.

Once they are set, you can save and quit out of Interface Builder and build your app and you should see the following.

The first thing you might notice is your image while selected is all blue and the other one is white. The Apple framework does this. I think also you should use a png file for these since Apple uses the alpha channel or such. There is a good section about how to create a nice looking icon.

Again I am not including any source since this is all using standard code and Interface Builder. Also those images might change randomly as the tutorials go on. I just might create better looking graphics for them.

Switch to Tab Bar Application

I am now going to switch this to a Tab Bar Application. I feel this is best for my application at this point. The tab bar type of application lets you have a static menu at the bottom of the screen so the user can easily navigate from option to option.

So here is the setup when you go to File -> New Project

All I did here was setup my icon file. You can see those steps here. I then click build and go and now i see this which I feel is a much better UI.

There really is no need to give away source code here since its all generated by Xcode 3.1

Add a application Icon

Now that you have a very basic app. If you click the menu button on the Iphone simulator, you will see the name of your app and above it is a nasty white box. If you want a nice little icon there you can just drag it to the application name root on the left side. For my examples that would be Photoblog. It will prompt you to import it and do so.

Once it is in your project open up the Info.plist file

There will be a row for Icon File. All you have to do is put the file name in there and rebuild and you have a application icon in place.

That was an easy one.

Intro to Inferface Builder

So now that you have gotten your hands a bit dirty in the code, lets learn about Interface Builder. If you noticed when you launched your application, there was a blue/white gradient that was blank. So lets do a quick tutorial on how to populate that in Interface Builder.

So in the files section in xcode you will see a MainWindow.xib. If you double click that it will launch Interface Builder.

It looks like the following

If you do not see all the dialogues make sure they are in view.

• Tools -> Inspector
• double click on the Navigation Controller.

So now that all is working if you click on the blue bar on top of the View on the Navigation Controller box on the right dialog.

On the Inspector if you select the first tab you will see

• Title
• Prompt
• Back Button

You can set a title here and then File -> Save

Go back into Xcode and build the code and you will see that the bar now has your title you put in. I did Photoblog so mine looks like the following.

I am not including any source code into this since its mostly Interface Builder here.

Adding more navigation items

So now that we have a hello world application that works, we want to add more items to the list. I would think most application will not have just one menu item. So here we go.

The easiest way to do this is create an array object that contains all of the menu items. I am not going to go into what everything is just the basic overview. If you want to learn I will point you to the documents on Apple’s website.

If you know C++ this will fit in nicely for you. Open up RootViewController.h and you need to add in the variable for the Array item. So in the following codeblock

@interface RootViewController : UITableViewController {
}

Now you want to add in the Array var so it looks like the following

@interface RootViewController : UITableViewController {
	NSMutableArray		*menuArray;
}

Now save that and open RootViewController.m and look for the following code block

- (void)viewDidLoad {
	// Add the following line if you want the list to be editable
	// self.navigationItem.leftBarButtonItem = self.editButtonItem;
}

Now we want to add in the line to init the array. In c++ this is like initing a new class or php like $class = new Class();

- (void)viewDidLoad {
	// Add the following line if you want the list to be editable
	// self.navigationItem.leftBarButtonItem = self.editButtonItem;

	menuArray = [[NSMutableArray alloc] init];
}

You should now be able to build the application and it will work. Of course we still have only 1 row. So now lets make more. In the same code block as below lets begin to add items into the array.

- (void)viewDidLoad {
	// Add the following line if you want the list to be editable
	// self.navigationItem.leftBarButtonItem = self.editButtonItem;

	menuArray = [[NSMutableArray alloc] init];

	[menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
						 NSLocalizedString(@"Hello World", @""), @"title",
						 nil,
						 nil]];

	[menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
						  NSLocalizedString(@"Hello Universe", @""), @"title",
						  nil,
						  nil]];
}

So we have added a Hello World and then a Hello Universe to the array. We are adding a object to the array for later use in the application. an object you can almost look at it like an associative array in PHP.

So remember the number of rows function we changed from 0 to 1? Well if we don’t change that we will never see hello universe, so we have to change that. Bad programming will hard set that to a number like 2. So we want to use the length of the array. This way if we want to add 5 options to the menu, we can just add it to the array and not worry about changing that number at all. So you want that function to look like this now

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
	return [menuArray count];
}

So that will tell the navigation controller to look to show that number of rows.

So now lets look for the cellForRowAtIndexPath function. This function will get called for us 2 times. It will get called as many times as the return value of numberOfRowsInSection tells it to. It will pass in indexPath as the current number. So in the past tutorial we hard coded the Hello World in. So we can remove the following line in that section

[cell setText:@"Hello World"];

Now we want set the text of the current cell to the current array value. So the function should look like this

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

	static NSString *MyIdentifier = @"MyIdentifier";

	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
	if (cell == nil) {
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
	}

	cell.text = [[menuArray objectAtIndex:indexPath.row] objectForKey:@"title"];

	// Set up the cell
	return cell;
}

As you can see that is why we used a object inside and array. It is setting the text we set for “title” as the cell text at a certain array value.

Now we want to be a good programming and release the memory that the array took up when we created it. So close to the bottom of the RootViewController.m you will see the following.

- (void)dealloc {
	[super dealloc];
}

Now we want to release the memory so make it look like this

- (void)dealloc {
	[menuArray release];

	[super dealloc];
}

Now when we click build and go we will get the following

Great it worked! You can download the source code here: helloworld2.zip

Creating Hello World

So like every good tutorial we need to create a Hello World application. We will use what we have learned in the past tutorials and build on them.

So the first thing you want to do is open the file RootViewController.m

Look for the following code block

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
	return 0;
}

We want to make it return a 1 so make it look like the following

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
	return 1;
}

If we return 1 then it means we will have 1 row in the navigation view.

So now look for the following code block

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

	static NSString *MyIdentifier = @"MyIdentifier";

	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
	if (cell == nil) {
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
	}

	// Set up the cell
	return cell;
}

Now we want to give the row some text. The one thing I really like about ojective C so far is how they handle getting and setting vars in a class.

So add [cell setText:@"Hello World"];

Here is the result

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

	static NSString *MyIdentifier = @"MyIdentifier";

	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
	if (cell == nil) {
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
	}

	[cell setText:@"Hello World"];

	// Set up the cell
	return cell;
}

Now when we save the file and click Build and Go we should get the following.

So you have just completed the Hello World application. If you want to download the source grab it here. Helloworld.zip

I hope this helps!