Building User Interfaces For iPhones 101

Building User Interfaces
for iPhone Applications 101

John Kennedy - February 2009

Friday, February 20, 2009

Your tools: Xcode and Interface
Builder, and the Cocoa Touch framework.


Xcode: the IDE that includes source code
editor, tools, documentation and the front
end for the compiler i.e. with Xcode you can
enter, build and debug your application.

Interface Builder: an editor program for
dragging controls into your application’s
views and editing them visually.

Cocoa Touch: a framework of code for you to
use. Cocoa Touch contains controls and other
useful stuff for your iPhone applications.


The Cocoa Touch framework provides a
code library called UIKit for
creating iPhone-friendly controls.

Controls can be created
programmatically, but..

The Interface Builder tool makes
almost all of the process ‘drag and
drop’, and is the recommended
approach whenever possible.


UIViewController is the UIKit class
that provides the most fundamental
support for all iPhone ‘views’.

UIViewController, or its subclasses,
can manage (amongst others) tab bars,
navigation controls, and will even
rotate the display for you
automatically.


You could create your controls in your
UIViewController subclass
programmatically, by implementing the
loadView method.

Or you could use Interface Builder to
create a NIB file that contains all the
details of your view’s controls.

That’s all a NIB file is: a way of
storing a user interface. We’ll do it
that way.


When you consider how your application works,
it will probably have multiple views: for
example; one that displays groups, and one
that displays a list of names.

Remember that each view is a class,
and so contains all the code that is
required to do what it needs to do:
for example, the class might contain
code that creates a list of names and
let the user select one.

Your application works by switching
between these different views.


How you switch between these views is
up to you, and the design of your
application.

It is important to spend time in
advance thinking about how your user
will switch between views.


Sketch your design out on paper
first, to make sure the ‘flow’ makes
sense.

Think about dividing information
between views. Will all your settings
be in one view? How many views are
needed?


A Tab Bar control is one way the user
could switch between your
application’s views.


Other common design patterns include
‘drilling down’ from one view to
another.


The UINavigationController handles
this type of display for you, by
maintaining a stack of views and
providing navigation.


So what does each view look like,
from the point of view of you, the
programmer?

Each views will be encapsulated in
separate ‘chunks’ within your
application.


Here’s what each view involves:


Here’s what each view involves:

Created with Interface Builder, the NIB file
NIB
1. contains the controls, buttons, and other elements
File that you have visually designed.

A class (comprised of a .m file, and a .h file)
.m
2. which is a subclass of UIViewController. Xcode will
.h quickly help you create these source files.

Class

NIB


The important part!

NIB .m
File .h

You must introduce the NIB to the code
so they know about each other.


Here’s a step-by-step guide to how you
create a new view (both source code and
NIB) and wire them together.. watch
closely.. there is nothing up my sleeve..


1.0 Creating the source code.

Select ‘Classes’ and Add -> New File...



Select UIViewController Class from
Cocoa Touch Classes


Give it a name. I like to use the form
XXXViewController. You don’t have to.


There you go: your .h and you .m file,
describing a subclass of UIViewController.

2.0 Create the NIB file part.

This time select Resources as the folder, and
Add -> New File.


Use a View.XIB template.
(Note: XIB is the new, improved version of NIB. We just keep
calling them NIB files for old time’s sake and to confuse noobs.)


Pick a name that will remind you which
UIViewController class is associated with.


Enjoy your new NIB file as it opens in Interface Builder.
The blank View panel is where you can drag and drop controls.



Drag some controls onto your View from
the Library.

3.0 Connect the NIB to the Class.

Select File’s Owner, and make sure its class is set
to be the ViewController class you just created.


3.1 Connect the NIB to the Class.

Connect the View to File’s Owner.
(Option-Click on Files’s Owner and drag to View)

And that’s that.


But how do you make the views, you
know, actually visible?


When your application launches, the
default view (MainWindow.xib) will be
displayed.


When your application launches, the
default view (MainWindow.xib) will be
displayed.

This is the easiest way,
and it means you can write
a simple one-view
application in about 60
seconds!


Other controls (such as Tab Bar
controls) can link to the NIB files,
thus causing them to appear.


Other controls (such as Tab Bar
controls) can link to the NIB files,
thus causing them to appear.

This isn’t that
hard either: you
just need to remember
to wire them up
properly from
Interface Builder.


You can create them programmatically
from within your application.


You can create them programmatically
from within your application.

It turns out that only
takes a few lines of
Objective-C to open a View
from a NIB and make it
visible!


For example, this code creates a new
view and uses a Navigation Controller
to make it slide smoothly onto the
screen.


See? It’s not as scary as you might
think to create views and display them.

For more information, there are several
good 3rd party books including my
favourite “iPhone SDK Development” from
Pragmatic Programmers.

Don’t forget: Apple has some
surprisingly good documentation on its
iPhone Developer site.


The End

Please let me know of errors and
omissions: john_kenn@mac.com


Building User Interfaces For iPhones 101

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Building User Interfaces For iPhones 101

Editor's Notes