2. Xcode 5 and Interface Builder for
iOS 7 Application
These are confidential sessions - please refrain from streaming, blogging, or taking pictures
Session 8
Vu Tran Lam & Nguyen Xuan Sinh
IAD-2013
3. Exploring Single View App Project in Xcode 5
• Xcode 5 splash screen
• Project template dialog
• Project information
• Project structure
• Interface builder
• Simulator
4. Xcode 5 Splash Screen
Your recent
projects
Click here to
create a new
5. Xcode can be used to
develop both iOS and Mac OS
Choose iOS Single View
App project template
Then click Next
Project Template
6. Project Information
Unique
identifier of your
Enter the name
of your app
Enter the prefix of all
classes created in your
Choose the iOS
devices which you want
Then click
9. Project source is
designed based on
Canvas -
Interface Builder
UI Controls which can
be dragged to
Inspector bar
Choose
target deviceClick here to run
Interface Builder
Scene in
10. • Info.plist file
• Identity
• Deployment
• App icons and launch images
• Linked frameworks and libraries
Setting Project Info
11. Click on
General tab
Identity info
Deployment info
Setting Identity and Deployment Info
Info.plist file
stores project info
12. App Icons &
Launch Images
Linked
Framework &
Setting App Icons & Launch Images Info
Info.plist file
stores project info
Click on
General tab
13. • Nib file
• Storyboard
• Scene and Segue
• View and View controller
• Inspector bar
Introduction to Interface Builder for iOS 7 App
14. • A nib file is a special type of resource file that you use to store
the user interfaces of iOS and Mac apps. A nib file is an
Interface Builder document. You use Interface Builder to design
the visual parts of your application—such as windows and views
—and sometimes to configure nonvisual objects, such as the
controller objects that your application uses to manage its
windows and views.
• In Xcode, Nib file can be created and designed in Xib document.
Nib File
15. Right click on
Calculator folder &
Choose User
Interface & Empty Xib
Creating Interface Builder Xib Document
17. Creating Interface Builder Xib Document
Drag View Controller or other
UI Controls to Interface Bulder
Click on
Xib
18. • Introduced in iOS 5, storyboarding is an exciting
feature that will save you a lot of time building user
interfaces for your apps.
• Unlike nib files, storyboards let you design your
entire user interface in one place so you can see all
of your views and view controllers and how they
Storyboard
• An important part of storyboards is the ability to define segues,
which are transitions from one view controller to another
• A single storyboard file can store all of your application’s view
controllers and views and you can use multiple view storyboards
to organize portions of your interface. At build time, Xcode takes
the contents of the storyboard file and divides it up into discrete
pieces
19. • Storyboard is a visual representation of the user
interface of an iOS application, showing screens
of content and the connections between those
screens.
• A storyboard is composed of a sequence of
scenes, each of which represents a view controller
and its views; scenes are connected by segue
objects, which represent a transition between two
view controllers.
Storyboard
21. • With a storyboard you have a better conceptual overview of all
the screens in your app and the connections between them. It’s
easier to keep track of everything because the entire design is
in a single file, rather than spread out over many separate nibs.
• The storyboard describes the transitions between the various
screens. These transitions are called “segues” and you create
them by simply ctrl-dragging from one view controller to the
next. Thanks to segues you need less code to take care of your
UI.
• Storyboards make working with table views a lot easier with the
new prototype cells and static cells features. You can design
your table views almost completely in the storyboard editor,
something else that cuts down on the amount of code you have
Advantages of Storyboard
24. • A Scene corresponds to a Single View Controller and its views.
• On iPhone, each scene corresponds to a full screen’s worth of
content; on iPad, multiple scenes can appear on screen at once
- for example, using popover view controllers.
• Each scene has a dock, which displays icons representing the
top-level objects of the scene. The dock is used primarily to
make action and outlet connections between the view controller
and its views.
• A Segue manages the transition between two scenes.
• Types of Segue: push, modal or custom
• You can pass data between scenes by using the method
prepareForSegue:sender:, which is invoked on the view
Scene and Segue
48. Understanding View, Window & View Hierarchy
• In iOS, you use windows and views to present your application’s
content on the screen.
• Windows do not have any visible content themselves but provide
a basic container for your application’s views. Views define a
portion of a window that you want to fill with some content.
• For example, you might have views that display images, text,
shapes, or some combination thereof. You can also use views to
organize and manage other views.
!
49. Views Manage Your Application’s Visual Content
• A view object defines a rectangular region on the screen and
handles the drawing and touch events in that region
• A view is an instance of the UIView class and manages a
rectangular area in your application window.
• Views are responsible for drawing content, handling multitouch
events, and managing the layout of any subviews.
50. Window Object
• A window object presents graphical content in a rectangular
area of the screen and plays a role in the distribution of events.
This object, which inherits from UIWindow on Cocoa Touch and
NSWindow on Cocoa (OS X), represents a window appearing in
an application.
• A window is an instance of the UIWindow class and handles the
overall presentation of your application’s user interface. Windows
work with views (and their owning view controllers) to manage
interactions with, and changes to, the visible view hierarchy.
• In iOS, windows do not have title bars, close boxes, or any other
visual adornments. A window is always just a blank container for
one or more views.
51. Windows Coordinate the Display of Your Views
• A window is at the root of a hierarchy of views, with uppermost
views in the hierarchy enclosing other views.
• When a window displays its content, it proceeds down this
hierarchy, asking each view in turn to draw itself in the context of
its superview.
• The view at the top of the hierarchy is the content view.
• The content view occupies the entire drawing area of the
window, serving as the backdrop for all other views in the
window.
53. View Hierarchy
• View hierarchy defines the
relationships of views in a
window to each other. You
can think of a view hierarchy
as an inverted tree structure
with the window being the
top node of the tree.
• From visual perspective, a
view hierarchy is enclosure:
one view contains one or
more other views, and the
window contains them all.
54. • Auto Layout concepts
• Working with constraints in Interface Builder
• Working with Auto Layout programmatically
• Auto Layout by example
Working with Auto Layout in iOS 7
55. • The fundamental building block in Auto Layout is the constraint.
• Constraints express rules for the layout of elements in your
interface.
• For example: you can create a constraint that specifies an
element’s width, or its horizontal distance from another element.
Auto Layout Concepts
56. • The easiest way to add, edit, or remove constraints is to use the
visual layout tools in Interface Builder.
• Creating a constraint is as simple as Control-dragging between
two views, or to add multiple constraints at once, you simply use
the various pop-up windows.
• Adding constraints with control-drag
Working with constraints in Interface Builder
57. • Adding constraints with align and pin menus
Working with constraints in Interface Builder
58. • Adding constraints with align and pin menus
Working with constraints in Interface Builder
59. • Even though Interface Builder provides a convenient visual
interface for working with Auto Layout, you can also create, add,
remove, and adjust constraints through code.
• If you want to add or remove views at runtime, for example, you’ll
need to add constraints programmatically to ensure that your
interface responds correctly to changes in size or orientation.
Working with Auto Layout Programmatically
NSDictionary *viewsDictionary =
NSDictionaryOfVariableBindings(self.button1, self.button2);
NSArray *constraints = [NSLayoutConstraint
constraintsWithVisualFormat:@"[button1]-[button2]" options:0
metrics:nil views:viewsDictionary];
60. • Using scroll views with Auto Layout
• Spacing and wrapping
Auto Layout by Example
61. Handling Basic Interaction in iOS 7
• Introduction of Outlet and Action
• Adding Actions and Outlets
• Creating UI Controls’s Delegate connection
• Hiding the iPhone keyboard
62. Introduction of Outlet and Action
• When a user interacts with objects in the view, for example
touching and releasing a button control, an event is triggered.
• Target-Action pattern allow you to specify what happens when
events are triggered - to define which method of which controller
object gets called when a user interacts in a certain way with a
view object.
• Target-Action pattern specify how you connect the objects in the
user interface you have designed in the Interface Builder to the
back end Objective-C code you have written in Xcode project.
• The process of wiring up a view object to call a specific method
on a view controller object is achieved using something called
an Action.
• An action is a method defined within a view controller object that
63. Introduction of Outlet and Action
• The opposite of an Action is the Outlet. An Action allows a view
object to call a method on a controller object and an Outlet
allows a view controller object method to directly access the
properties of a view object.
• An outlet describes a connection between two objects. When
you want an object (the view controller) to communicate with an
object that it contains (the text field), you designate the
contained object as an outlet. When app runs, the outlet you
create in Xcode is restored, which allows the objects to
communicate with each other at runtime.
• For example: A view controller need to set the text on a UILabel
object. In order to do so an Outlet must first have been defined
using the IBOutlet keyword.
!
64. Adding Actions and Outlets
Create action for button
by Control-Dragging this
button to ViewController
66. Adding Actions and Outlets
Action methods are
declared using the IBAction
67. Adding Actions and Outlets
• In Hello FPT app, when the user taps the Hello button, you want
it to send a “change the greeting” message (action) to the view
controller (target). This message changes the string (model
object) that the view controller manages. Then, the view
controller updates the text that’s displayed in the label to reflect
the change in the model object’s value.
• Using Xcode, you can add an action to a UI element and set up
its corresponding action method by Control-dragging from the
element on canvas to the appropriate source file (view
controller’s source file).
68. Adding Actions and Outlets
• Next, you want view controller to get user’s text from the text field
and then display the text in the label. To ensure that view
controller can communicate with these objects, you create outlet
connections between them.
• The steps you take to add outlets for the text field and label are
very similar to the steps you took when you added the button’s
action.
69. Adding Actions and Outlets
Create outlet for textfield
by Control-Dragging this
textfield to ViewController
interface
72. Creating UI Controls’s Delegate Connection
• In Hello FPT app, you need to connect the text field to an object
that you specify as its delegate.
• You need to specify a delegate object for the text field because
the text field sends a message to its delegate when the user taps
the Done button in the keyboard (recall that a delegate is an
object that acts on the behalf of another object). In a later step,
you’ll use the method associated with this message to dismiss
the keyboard.
75. Hiding the iPhone keyboard
• When the user of iPhone app is required to enter data in the
textfield keyboard automatically appears on the screen.
However, keyboard does not automatically go away when the
user has finished typing.
• There are some solutions for this case:
• Hiding the keyboard when the user touches the Return key
• Hiding the keyboard when the user taps the background
76. 1.Adding the UI to Hello FPT project
2.Adding Outlets and Action
3.Creating UI Controls’s Delegate
connection
Completing Hello FPT App
