An introduction to developing user interfaces for Cocoa Touch based iPhone applications, covering the basics of UIViewControllers and how they interact with Interface Builder.
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Building User Interfaces For iPhones 101
1. Building User Interfaces
for iPhone Applications 101
John Kennedy - February 2009
Friday, February 20, 2009
2. Your tools: Xcode and Interface
Builder, and the Cocoa Touch framework.
Friday, February 20, 2009
3. 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.
Friday, February 20, 2009
4. 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.
Friday, February 20, 2009
5. 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.
Friday, February 20, 2009
6. 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.
Friday, February 20, 2009
7. 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.
Friday, February 20, 2009
8. 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.
Friday, February 20, 2009
9. 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.
Friday, February 20, 2009
10. 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.
Friday, February 20, 2009
11. 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?
Friday, February 20, 2009
12. 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?
Friday, February 20, 2009
13. A Tab Bar control is one way the user
could switch between your
application’s views.
Friday, February 20, 2009
14. A Tab Bar control is one way the user
could switch between your
application’s views.
Friday, February 20, 2009
15. Other common design patterns include
‘drilling down’ from one view to
another.
Friday, February 20, 2009
16. Other common design patterns include
‘drilling down’ from one view to
another.
Friday, February 20, 2009
17. The UINavigationController handles
this type of display for you, by
maintaining a stack of views and
providing navigation.
Friday, February 20, 2009
18. 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.
Friday, February 20, 2009
20. 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
Friday, February 20, 2009
21. The important part!
NIB .m
File .h
You must introduce the NIB to the code
so they know about each other.
Friday, February 20, 2009
22. The important part!
NIB .m
File .h
You must introduce the NIB to the code
so they know about each other.
Friday, February 20, 2009
23. 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..
Friday, February 20, 2009
24. 1.0 Creating the source code.
Select ‘Classes’ and Add -> New File...
Friday, February 20, 2009
25. 1.1 Creating the source code.
Select UIViewController Class from
Cocoa Touch Classes
Friday, February 20, 2009
26. 1.2 Creating the source code.
Give it a name. I like to use the form
XXXViewController. You don’t have to.
Friday, February 20, 2009
27. 1.3 Creating the source code.
There you go: your .h and you .m file,
describing a subclass of UIViewController.
Friday, February 20, 2009
28. 2.0 Create the NIB file part.
This time select Resources as the folder, and
Add -> New File.
Friday, February 20, 2009
29. 2.1 Create the NIB file part.
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.)
Friday, February 20, 2009
30. 2.2 Create the NIB file part.
Pick a name that will remind you which
UIViewController class is associated with.
Friday, February 20, 2009
31. 2.3 Create the NIB file part.
Enjoy your new NIB file as it opens in Interface Builder.
The blank View panel is where you can drag and drop controls.
Friday, February 20, 2009
32. 2.4 Create the NIB file part.
Drag some controls onto your View from
the Library.
Friday, February 20, 2009
33. 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.
Friday, February 20, 2009
34. 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)
Friday, February 20, 2009
36. But how do you make the views, you
know, actually visible?
Friday, February 20, 2009
37. When your application launches, the
default view (MainWindow.xib) will be
displayed.
Friday, February 20, 2009
38. 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!
Friday, February 20, 2009
39. Other controls (such as Tab Bar
controls) can link to the NIB files,
thus causing them to appear.
Friday, February 20, 2009
40. 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.
Friday, February 20, 2009
41. You can create them programmatically
from within your application.
Friday, February 20, 2009
42. 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!
Friday, February 20, 2009
43. For example, this code creates a new
view and uses a Navigation Controller
to make it slide smoothly onto the
screen.
Friday, February 20, 2009
44. 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.
Friday, February 20, 2009
45. The End
Please let me know of errors and
omissions: john_kenn@mac.com
Friday, February 20, 2009