TabBar Tutorial Part 4 – Add Navigation Bar and UIBarButtonItem

This post was originally published in March 2011

In the last part of this tutorial we had added a segmented controller to our first tab view and used it to hide or show elements on the view. If you are just picking up from here you can get the code from part 3 of the tutorial here.

This time we are going to add a navigation controller and navigation bar to the second view of our tab bar. This typically how an app digs down for more detailed information on something.

1.) Open up our project in Xcode. We are going to be adding a view controller for SecondView, two new views and view controllers for them.

So right click on Classes and select Add > New File… then pick UIViewController subclass and name it SecondViewController.

Create New File

Repeat that two more times naming the files GreenViewController and BlueViewController.

Name New File

2.) Next we are going to create our two new views. Right click on Resources, select Add > New File… and create two new nib files named GreenView and BlueView.

Create New Nib

Name New Nib

Here’s what our Groups & Files pane looks like at this point.

Groups & Files Shot

3.) We are now going to switch over to Interface Builder to set up the views and make a few changes. Double click MainWindow.xib to open it up in Interface Builder.

In the document window select Tab Bar Controller, then go to Attributes Inspector and under View Controllers click the little arrows next to Second and change it to Navigation Controller.

Make it a Navigation Controller

In the view window select the second tab.

Tab Bar Controller Window

Then click in the big grey middle area titled view. This deselects the actual Second tab but keeps that view as our current one. Go to Identify Inspector and set the class to SecondViewController.

Identity Inspector

The go to Attributes Inspector and set the nib to SecondView.

Attributes Inspector

4.) Let’s change the name of our Second tab to RGB.

Select Second in the Tab Bar, make sure just the text is selected and not the entire tab.

Second Tab Selected

Then change the title in the Attributes Inspector.

Attributes Inspector

Save your changes for MainWindow.xib.

5.) We’re now going to set up our three views for the newly renamed RGB tab. Open up our SecondView, you can do this with the Open command within Interface Builder, or you can go back in Xcode and double click the SecondView.xib.

Delete the existing labels. We’re going to add one label of our own and change the background color.

Add a UILabel to the View window somewhere towards the top. Expand the label by dragging the edges and center the text. Then change the title to Red View.

Set up Label

Deselect the label, choose Background in the Attributes Inspector and change the background to Red. You can choose whatever shade of Red you like. You may have to choose “Other …” from the bottom of the Background popup.

Set Background

This will open the Colors Window

Colors Window

pick a red color and make sure the background in the view changes.

Red View

Repeat this process two more times making Green View and BlueView look similar to this.

Green View

Blue View

7.) Now let’s connect our new views with their view controllers.

Open up GreenView if it isn’t already. Make sure File’s Owner is selected in the document window.

Green View Document Window

Go to Identity Inspector and set the Class to Green View Controller.

Green View Identity Inspector

Then go to Connections Inspector and connect the view to the View in the document window. If you are unfamiliar with this you can review the Interface Builder tutorial.

Connected View

Repeat this same process with the BlueView and BlueViewController.

Blue View Identity Inspector

Connected View

8.) We are done with Interface Builder now, you can make sure everything is saved and close it.

In Xcode open up SecondViewController.h, we need to import GreenViewController, then declare a variable of it’s type and finally declare a method named goToGreenView. Add this code and save the file.

SecondViewController Header File

9.) Open up the implementation file SecondViewController.m.

We need to synthesize our greenViewController var.

Synthesize Statement

Then we are going to create a next button and add it to the navigation bar. We do this in the viewDidLoad method and we link up the button to our goToGreenViewMethod. Let’s go ahead and set the title of our view to Red while we’re at it.

ViewDidLoad method

Next we need to hash out the goToGreenView method and push our greenViewController onto the navigationController.

goToGreenView method

10.) Now we want to do basically that same thing to the GreenViewController.

Add the import, var and method to the header file.

GreenViewController Header File

synthesize the var, add the next button and title and hash out the method in the implementation file.

GreenViewController Implementation File

11.) Finally open up BlueViewController.m file and just add the title to it.

BlueViewController Implementation File

12.) After looking at it one thing I don’t like is the next button title let’s change it to reflect the views we’re going to next.

In SecondViewController.m change the title of the button to Green.

ViewDidLoad Method

And in GreenViewController.m name the button Blue.

ViewDidLoad Method

That’s it save everything click Build and Run and see what we have.

Simulator Shot of Red View

Whoops, but wait a minute look at how our second tab now has changed to be named Red! When you first start the app it is named RGB.

Simulator Shot of Colors Tab

But after you click on the tab it changed the tabs name to Red. It took this from the title that we set in the implementation file. We’d like to keep the tab name and set the view name separately.

13.) Open up SecondViewController.m and get rid of the title we set earlier. Here I just commented it out.

ViewDidLoad Method

In Xcode you can select a line of code and then use the key stroke “command /” to comment out that line. This works well when wanting to comment out multiple lines at one time.

14.) Now we need to go back in to Interface Builder and edit the MainWindow.xib. You can just double click that file in Xcode to open it up.

In the document window. expand Tab Bar Controller, then expand the second Navigation Controller (RGB), then expand Second View Controller and select Navigation Item.

MainWindow.xib Document Window

Go to Attributes Inspector and change the Title to Red.

Set Title of View in Interface Builder

Save your work in Interface Builder and close it if you want. Go back to Xcode and run the app again.

Look this time the Tab title stays RGB and the view is titled Red.

Simulator Shot of Red View

That’s it for Part 4 of this tutorial. In part 5 we will be adding a TableView to the third tab and doing some fun things with it.

Setting the color of a Table Row Tutorial

This post was originally published in March 2011

I was recently cleaning up some note scraps I had lingering on my machine and thought I would do something more structured with them. So here is a very short tutorial on setting the background color of a Table Row.

1.) Open Xcode and create a new Navigation-based Application named TableRowColorTutorial.

2.) Open up RootViewController.m and change the number of rows to 5. You do this in the tableView:numberOfRowsInSection:section method.

tableView:numberOfRowsInSection:section method

now find the method tableView:cellForRowAtIndexPath:indexPath. We are going to add a line of code here to change the color of the table rows.

tableView:cellForRowAtIndexPath:indexPath method

3.) Save the file and click Build and Run. You’ll see the five rows are now red.

Simulator Shot

Hold on there, we’re not done yet.

4.) Now go back in the tableView:cellForRowAtIndexPath:indexPath and add some text to the table row.

tableView:cellForRowAtIndexPath:indexPath method

5.) Save and click Build and Run again. What happened?

Simulator Shot

Wow that’s kind of ugly and certainly not what we want.

6.) Well unfortunately there is no way that I have found to make that white rectangle non-opaque using the built in label of UITableViewCell. We need to create our own lable and add it to the cell. We can do so right there in the same tableView:cellForRowAtIndexPath:indexPath method. Here’s what that looks like.

tableView:cellForRowAtIndexPath:indexPath method

7.) Once again save and click Build and Run. Looks better right?

Simulator Shot

8.) And of course we can also change the font attributes of our label if we wish.

tableView:cellForRowAtIndexPath:indexPath method

Simulator Shot

That’s all there is to it, pretty easy stuff.

We used a few instances of UIColor in this tutorial. Here’s a list of the pre-packaged colors you can use with UIColor.

UIColor Cheat Sheet

Tab Bar Tutorial Part 3 – have segmented hide and show elements on the view

This post was originally published in March 2011

When we left off on part 2 of the tutorial we had added a navigation controller and a segmented control to our app. We added a couple methods that got called when we selected the segmented control but all the method did was log some text to the console. In this, part 3, we will use that segmented control to change the view depending on what the user selects.

Here’s the code from part 2 that we will be starting with.

1.) We are going to start by making our first view all about colors. Open up our MainWindow.xib by double clicking it, so that it opens in Interface Builder.

Click on the First tab, so that only the text “First” is selected, not the entire tab.

Tab Bar Controller window

Then go to Attributes Inspector and change the title to Colors.

Attributes Inspector

2.) Now select the segmented controller.

Segmented Controller

Go to Attributes Inspector and set the number of segments to 3.

Set the number of segments

Then we want to change the title of each segment. We are going to name then “Primary”, “Secondary” and “All”.

Set title of each segment

After setting the titles make the segmented controller bigger. You can do this by either grabbing and dragging one edge of it. Or you can go the Size Inspector and enter the width in pixels.

Change size of segmented controller

3.) We’re done with the MainWindow.xib for the moment. Now let’s open up FirstView.xib. We’re just going to delete the bottom label that has the text “Loaded by the first view…..”.

View Window

4.) Save everything in Interface Builder and go into Xcode. Open up FirstViewController.h. We are going to add a IBOutlet for a UILabel.

Header File

5.) Now open FirstViewController.m. First thing to do it synthesize our label we just declared in the header file.

synthesize statement

Then we need to add a third case to our switch statement in the segmentedControlChanged method. We have to do this because we added a third segment in Interface Builder.

segmentedControlChanged method

At this point we could Build and Run and select each segment in the segmented control and see the resulting text being logged in the console.

6.) Now let’s do something more than just log into the console. We’re going to change the text in the label according to what segment the user picked.

We’re just going step by step here so to start out we’ll just change the label to reflect which segment was selected.

segmentedControlChanged method

7.) Before that will work we need to connect our outlet to the label in Interface Builder so open up FirstView.xib again if it isn’t still open.

In the document window select File’s Owner, then go to the Identity Inspector and set the class to FirstViewController.

Identity Inspector

Then go to Connections Inspector and drag from the little circle next to colorsLabel onto the label in the view window.

Connections Inspector

8.) Save everything in Interface Builder, go back to Xcode and click Build and Run. You can now click on the different segments and see the text in the label change.

Secondary View

9.) In Xcode open up FirstViewController.h. We are going to add six IBOutlets for UILabels.

Header File

10.) Then open FirstViewController.m and synthesize each of those outlets.

Synthesize statements

You may have noticed that I added the segmentedControl to the first synthesize statement, I did that because Xcode was giving me a warning, it wasn’t stopping the code from compiling and the app from running.

11.) Open up FirstView.xib in Interface Builder. We’re going to add the UILabels that will connect to the outlets we just created. Drag six UILabels onto the View window. Change the background color and label to be one these six colors (red, blue, yellow, orange, green, purple). I have also moved the original label up to the top of the view. While we’re at it let’s change the title of that original label to Colors instead of First View.

Here’s what FirstView.xib should all look like when you are done.

Colors View

12.) Next connect the outlets to each of the labels using the Connections Inspector. This should be pretty obvious to you at this point. If not you can refresh with the Interface Builder tutorial.

Connections Inspector

Save your work in Interface Builder and go back into Xcode.

13.) Open up FirstViewController.m. We’re going to put some code in the viewDidLoad method to hide all those color labels at load.

viewDidLoad method

Try running the app now and you won’t see any of the colored labels.

Colors View with labels hidden

14.) Now let’s go in the segmentedControlChanged method and show and hide the labels depending on what the user selects.

segmentedControlChanged method

Save everything and hit Build and Run and see the result.

Simulator Shot 1

Simulator Shot 2

Simulator Shot 3

That’s it for this part of the Tab Bar Tutorial. In part 4 we’ll work on the second view and get it to do something different.

Here’s our finished up to date code for the Tab Bar app.

Activity Indicator Tutorial

This post was originally published in March 2011

This will be a very short and simple tutorial demonstrating how to use a UIActivityIndicatorView to let a user know that something is taking place in your app.

1.) Create a new Navigation-based Application and name it ActivityTutorial.

2.) Open up RootViewController.h and add a UIActivityIndicatorView declaration.

Header File

3.) Open up RootViewController.m and implement the activityIndicator in the viewDidLoad method.

viewDidLoad method

4.) Start the activityIndicator animating in the viewWillAppear method.

viewWillAppear method

5.) Set the number of rows for our table view to be 1.

tableView:numberOfRowsInSection:section method

6.) Set the text for our one row to be “Stop Animation”. We do this in the tableView:cellForRowAtIndexPath:indexPath method. For more information on how to set up a tableView see the UITableView tutorials.

tableView:cellForRowAtIndexPath:indexPath method

7.) Find the tableView:didSelectRowAtIndexPath:indexPath method. We are going to add the line of code to stop the animation here.

tableView:didSelectRowAtIndexPath:indexPath method

So what’s happening is the animation starts with the code we added in the viewWillAppear method and then stops when you click the row in the table view.

This isn’t exactly a real world example. I mean we’re not going to have an activity indicator going until a user stops it. But it should be a good enough example for you to implement it in your own code. Just find the spot where an activity begins and start the animation, then you will somehow need to be notified when the activity ends and stop the animation.

As an example in the app I’m currently working on there is a fairly complex database query that takes a few seconds to return the results and load them into the table view. I start the animation in the viewWillAppear method. Then in my methods that retrieve the data from the database I have a reload statement that reloads the table view and immediately after that I stop the animation.

8.) Let’s take this a step further, just for fun. Go back to the tableView:numberOfRowsInSection:section method and set our number of rows to 2.

tableView:numberOfRowsInSection:section method

9.) Now change the tableView:cellForRowAtIndexPath:indexPath method to set text in two rows.

tableView:cellForRowAtIndexPath:indexPath method

10.) And then change the tableView:didSelectRowAtIndexPath:indexPath method to handle both rows. The first row will stop the animation, and the second row will start the animation.

tableView:didSelectRowAtIndexPath:indexPath method

There you go, that’s all there is to it. Save everything and click Build and Run and see what we’ve got.

Simulator Shot

Save Data Using NSUserDefaults Tutorial

This post was originally published in March 2011

In this tutorial we’re going to create a very simple View-based app in which we enter an email address. After entering the address we’ll click a button that will save the email using NSUserDefaults. We will then be able to close and open the app and when opening it we’ll retrieve the email we saved and display it in a UILabel. This is all very easy to accomplish, so here we go.

1.) Open Xcode and create a View-based application and name it SaveTutorial.

2.) Open up the SaveTutorialViewController.h file and we’re going to add our IBOutlets and IBAction. We’ll be using a UIButton, a UITextField and a UILabel. Here’s what your header file should look like after adding these.

Header File

3.) Now open up SaveTutorialViewController.m and we’ll synthesize our IBOutlets and implement our IBAction method.

The saveData method get’s the the text that is in the textField, then it creates a NSUserDefaults object. Then it calls the setObject:forKey method to save our data.

saveData method

4.) While we have the implementation file open we are going to go ahead and implement textFieldShouldReturn:theTextField. This method is used to dismiss the keyboard that will pop-up when we type our text into the textField.

textFieldShouldReturn method

5.) Now open up SaveTutorialAppDelegate.m. Find the applicationDidBecomeActive:application method and let’s add some code to retrieve our data and display it.

This is pretty straight forward. We create a NSUserDefaults object just like did when we were saving our data. Then we call the stringForKey method and pass it the key of the value we want to retrieve. Lastly we set the text of our label to the email saved. The app delegate already has an instance of our view controller so this is easy to do.

applicationDidBecomeActive method

Okay that’s all the code, now we’ll go into Interface Builder and set up the user interface portion of our app.

6.) Double click the SaveTutorialViewController.xib file located in the Resources folder under Groups & Files to open it in Interface Builder.

Resources Folder

7.) Once in Interface Builder drag a UILabel onto the View window, let’s change the text of the label to “Enter email below”.

Right below this label drag a UITextField. Expand it stretch across the window.

Give a little space under the text field and add another UILabel. Stretch this one across the view also. You can center the text of change the font or whatever you want to do here, doesn’t matter, but let’s not put any text in there for now, so delete the text.

Attributes Inspector

At the bottom of the screen add a UIButton and size it however you wish.

Here’s what my interface looks like at this point. Yours should be at least similar.

Simulator Shot

8.) Now we need to connect up all our outlets you the elements we just added. Make sure File’s Owner is selected in the documents window. Go to Connections Inspector and connect everything by dragging from the little circle next to the outlets to the appropriate element in our View window. If you don’t fully understand this you can take a quick look at the Interface Builder tutorial.

Here’s what the Inspector looks like after we’ve hooked everything up.

Connections Inspector

One last connection to make. Click on our text field in the View window. With it selected go back to Connections Inspector and connect it’s delegate by dragging from the little circle next to delegate to File’s Owner in the document window.

Connections Inspector

This is needed so that we can dismiss the keyboard that will pop up using the textFieldShouldReturn:theTextField method we created earlier in the implementation file.

9.) That’s all there is to it. Save everything and click Build and Run. The first time you run the app you won’t see any email listed.

Simulator Shot

Type an email in the text field. Touch the return key in the keyboard to have the keyboard go away.

Simulator Shot

Now click the save button. You won’t see anything happen but behind the scenes we just saved the email.

Close the app and then open it back up and you will see our email was retrieved and is now displayed on the view.

Simulator Shot

There you go, that was easy. Of course you can also save arrays or dictionaries and such as well.

If you have a lot of data to save then you should look at possibly using a sqlite database in your app. Here’s a tutorial for that.

DB App Tutorial Part 1 – create a database using sqlite

This post was originally published in March 2011

In part 1 of this tutorial we will create a very simple sqlite database and access it from our app. The database gets created in Terminal and uses very simple sql statements for the creation.

1.) Open the Terminal Application. If you don’t have it on the dock, you can find it in Applications /Utilities

2.) At the prompt we are going to type

sqlite3 dbTutorial.sqlite

This opens up sqlite 3 and creates a database named dbTutorial. But right now there are no tables and no data in the database.

3.) Let’s create a table in database named color. Type this sql line at the prompt.

create table color(name varchar, category varchar);

4.) Next we need to add some data to our color table. Type this sql line at the prompt to add data.

insert into color(name , category) VALUES(‘red’, ‘primary’);

5.) Now just to see that our table got populated with the data type this at the command line to see that data is now in the table.

select * from color;

You should get something like this to return.

Terminal Window

We are done creating our database, pretty basic I know but it’s enough for us to learn how to hook up to it with our app. You can either close Terminal or minimize it or whatever you want and open Xcode.

6.) Create new View-based Application in Xcode and name it DBTutorial.

7.) Right click on Frameworks under the Groups & Files section in XCode. Select Add > Existing Frameworks.

Add Existing Frameworks
Select libsqlite3.0.dylib and click Add. You should now see this in the frameworks folder.

View of Frameworks

8.) Right click on Resources folder in Groups & Files section, choose Add > Existing Files. Navigate to the testDB.sqlite file we created in Terminal and select it, the sqlite file is often created in the users home directory. Select the check box to copy the item in the destination group’s folder and click Add.

Copy items to group

If you open the Resources folder you should now see the dbTutorial.sqlite file listed.

Resources group

9.) Open up DBTutorialViewController.h, import the sqlite3, declare the database variable and declare two methods.

Header File

10.) Open up DBTutorialViewController.m, and implement the makeDBCopyAsNeeded method.

makeDBCopyAsNeeded method

11.) Implement the method getColors, we will call this from our viewDidLoad method.

getColors method

12.) Now we just need to call our methods from the viewDidLoad method.

viewDidLoad method

13.) Save everything and click Build and Run. You won’t see anything in the user interface, but if you look in the console you’ll see where we logged what was returned from the database.

Terminal Window

And that’s all there is too it. Of course having one table with one column isn’t real useful and a pretty big waste of a database, but you can expand it and add as much data to it as you wish. We’ll do that in part 2 of this tutorial.

Maps App Tutorial Part 2 – Add a second location and add title and subtitle to annotation

This post was originally published in March 2011

This will be a very short tutorial, after part 1 was fairly long. Truth is I originally did this ass one long tutorial and decided to break it up into 2, and this seemed the best place to break it apart.

In part 1 of the tutorial we created a view-based app and then added a MKMapView to it. We then set a point for the map to be centered on. In this part we will create a second point to display, and we will set a title and subtitle for the annotation.

You can get the code from part 1 here.

1.) To add a second point on the map we create a second Coordinate and annotation. Add the second annotation to the header file.

Header file with change

2.) Then in the implementation file create a second coordinate and add it to the mapView. This happens in showAddress.

show address method

3.) Change the AddressAnnotation implementation to take and return custom Titles and Subtitles.

AddressAnnotation

4.) Set the Title and Subtitle for each annotation in the showAddress method.

show address method with title and subtitle added.

5.) Save everything, Build and Go and see the results.

simulator shot

That’s it. You should now see the two points, and adding a third or fourth should be fairly straight forward if you just follow what we did here for the second one. You can also touch the pins and see the title and subtitles we set. I will add to this tutorial as I get time and learn more ways to customize the annotations.

Maps App Tutorial part # 1 – create an app to display a map

This post was published in March 2011

This will be a multipart tutorial on the MKMapView. In this, part 1 we will create a simple app to display the map.

1.) Create a new View-based application in Xcode, name it MapTutorial.

2.) Right click on Frameworks under the Groups & Files section in XCode. Select Add > Existing Frameworks. Select MapKit.framework and click Add.

Add existing framework

Add MapKit.framework

3.) Open MapAppViewController.h and add the following code. We imported our MapKit.h from the MapKit framework we added in step 1. We also added an MKMapView variable.

Header File

4.) Expand the Resources folder and double click MapTutorialViewController.xib to open it up in Interface Builder. Drag a Map View from the Library onto the view window.

Library

View Window

5.) While we’re still in Interface Builder select File’s Owner in the document window and then go to the Connections Inspector and connect the mapView outlet to the MKMapView in our view window.

Connections Inspector

Then in the document window expand View and you should see Map View.

document window

Control click on Map View and drag to File’s Owner, select delegate.

select delegate

You can then save everything and close Interface Builder.

6.) If you click Build & Run in Xcode now, you’ll see something like this.

simulator shot

Not real exciting and probably not what we’re looking for. Let’s change that.

7.) Open Up MapTutorialViewController.h and add an internal interface named AddressAnnotation. And add a reference to AddressAnnotation. Then add a method declaration for showAddress.

header file

8.) Open up MapViewController.m and add the implementation for AddressAnnotation

implementation file

9.) Then add the showAddress method to the MapTutorialViewController implementation. I added it right after the viewDidLoad method in my code.

show address method

10.) We also need to add the mapView:viewForAnnotation method. I put this right after the showAddress method.

mapView:viewForAnnotation method

11.) We’re going to call showAddress from the viewDidLoad method.

viewDidLoad method

12.) Save everything and click Build and Run. You should see a map similar to this.

simulator shot

That’s it for part 1. We created an app to show a point on a map. You can try other points including your own address. Just plug your address into a site that will convert it to Longitude and Latitude. Here’s the on I used http://geocoder.us/. Once you have the coordinates plug them into the show address method in the location.latitude and location.longitude variables and the map will center on your address.

In part 2 we’ll expand on this a little bit.

Finishing up with Learning Interface Builder

This post was originally published in March 2011

We’ve already taken a brief look at Interface Builder. Here we are going to finish up by looking at it just a bit closer. To do so we’re going to have to build a very simple app.

1.) Open up XCode, create a new View-based Application and name it IBTutorial.

Create View-based Application

Name the project

2.) Expand the Classes folder under Groups & Files. This shows all our classes, we want to open up IBTutorialViewController.h so we can edit it. This is our view controller header file and you can either click it once and edit it in the bottom pane of the main window, or you can click it twice and open it up in it’s own window. Either way, it makes no difference in the end. Once you have the file open we are going to add a few things to it.

Classes group

Once you have the file open we are going to add a few things to it.

Header File

3.) Then we need to open up the view controller implementation file (IBTutorialViewController.m) and synthesize the var’s we created and implement our method. For now don’t worry about any of that if you don’t understand it yet. We just need to add a few things to demonstrate Interface Builder so don’t get bogged down in the code right now.

Implementation File Selected

View Controller Implementation File

4.) That’s all the code we’re going to add for now, make sure you save both the header and implementation file we just edited. Now expand the Resources folder and double click IBTutorialViewController.xib, this will open it up in Interface Builder.

Nib file selected

5.) I’m going to go over each of the windows again so that we have a good base to continue on from.

This is the main document window.

Document Window

We’ll come back to it in a minute.

6.) This is the View window.

View Window

It represents what will be seen on the screen.

If you can’t find it at any time you can always double click where it says View in the documents window and it will pop up.

View Selected

7.) This is the Library window. From here you can select elements to include in your view and drag them to the View window to arrange them visually.

Library Window

8.) Finally we have the Inspector window. At the top you will see four tabs for the four different inspectors. The four different Inspectors are the Attributes Inspector, Connections Inspector, Size Inspector and Identity Inspector. We’ll talk each one individually.

Inspector Window

9.) The first tab is the Attributes Inspector. It will display the attributes of whatever UI element you have selected in the View window. If nothing is selected, or if you haven’t added anything yet it displays the attributes of the view itself. You can change the background of the view here. Let’s go ahead and do that. Find where it says Background and click the drop-down arrows to the right.

Inspector Window

When the drop-down menu appears select other from the very bottom.

Other Selected

This will bring up the colors window. Here I have the crayons selected in the tabs at the top.

Crayon Colors

Let’s change the background to something fun so pick one of the colors. I picked a a maroon crayon for mine.

Background Changed

We’ll come back to the Attributes Inspector in just a bit.

10.) The next tab is the Connections Inspector. Here we can link IBOutlets we create in Xcode to the visual elements we create in Interface Builder. For example we could create an IBOutlet for a UILabel in Xcode and link it to a UILabel in Interface Builder so that we can access it and change it in our code.

Connections Inspector

11.) The third tab is the Size Inspector. Here you can change the size and position of elements we laid out in the View window.

Size Inspector

12.) And finally the fourth and last tab is the Identity Inspector. One of the main things we do here is set the Class Identity of views we create here. In other words we can create a View Controller class in Xcode and then create a view in Interface Builder. Then here we would link that view controller to the view. This will become very familiar to you as you go along.

Identity Inspector

13.) That was a brief description of the windows, now let’s see some of them in action. If the Library isn’t visible open (command – shift – L). Find a UILabel in the Library and drag it to the view.

Library

Grab the sides of the Label and enlarge it to almost the width of the view window.

Label added

While the label is still selected go the Attributes Inspector (command 1) and change the text of the label to Hello, then center the text. Click where it says Font and it will open the fonts window. here you can change fonts and size, let’s make the size 36.

Label Attributes

Click where it says Font and it will open the fonts window. here you can change fonts and size, let’s make the size 36.

Fonts window

14.) Now go back to the Library window and find a UIButton.

Library

Drag a UIButton underneath the label and resize it to whatever size you would like. While the button is selected you can go to the Attributes Inspector and type it’s title as Click Me.

Button Attributes

Here’s what the app looks like at this point. Yours could be slightly different, doesn’t matter.

View all set up

15.) Remember back in step 2 when we added this code to our header file.

Header

We’re now going to link those IBOutlet’s we see in our code to the elements we just added in Interface Builder.

In the documents window select File’s Owner.

Document Window

To the right of File’s Owner you see it say IBTutorialViewController. This is the class file we have in Xcode, it is in this classes header file that we defined out IBOutlets. So now that we have that selected we can go to Connections Inspector (command 2) and see the things defined in that class.

Connections Inspector

In the Outlets section up top we see button, which is the UIButton we defined. If we had named it TheWorldsGreatestButton that is what it would say here. Underneath button we see label again that’s what we named it so that’s what we see. You can go back in Xcoce and change the name and then come back to Interface Builder and you will see the change. But if you are going to do that make sure you change the name in all three places. Two in the header file and then the synthesize statement in the implementation file.

In the Received Actions section we see buttonTouched which is the action we defined in the header file. This method will get called when we touch the button. The name is ours it could have been named anything.

16.) Now let’s link everything up. There’s actually a couple of ways to do this. Here’s one. See the little circle in the Connections Inspector next to where it says button? click and hold in the little circle and then drag to the button in our view window. Then do the same thing from the little circle next to label, to our label in the view window. Finally drag from the little circle next to buttonTouched to our button in the view window. When you do you get a list of options.

Button choices

Select Touch Up Inside.

You could also connect these by dragging from the little circle to the elements in the documents window.

Document Window

A third way is to work from the documents window. Control click on Label (Hello) under view. You’ll get this little pop-up.

Make new referencing outlet

Drag from the little circle in that pop-up to File’s Owner. You’ll get another little pop-up.

Connect Label

Select label from this pop-up and you have made the same connection as the other methods. Do the same thing with the little circle next to button and you’ll get a bigger pop-up. Scroll to the bottom and click from the circle next to New Referencing Outlet to File’s Owner and then select button. The click the little circle next to Touch Up Inside and drag to File’s Owner, this time select buttonTouched.

Connect Button

Which ever way you choose, it should look like this when you’re done.

Final Connections

17.) You have now connected all of our visual elements in Interface Builder to our IBOutlets in Xcode. Save everything in Interface Builder and quit it. Go back to Xcode and click the Build and Run button. When the app opens in the simulator click the button and you’ll see the text in our label change.

simulator

That’s it. Now you’ve got a little experience working with Interface Builder and will know what the different windows are when you start doing the other tutorials.