IOS Storyboards

IOS Story boards
Presented by
Muhammad Nabeel Arif

What is Storyboard
 Storyboarding is an exciting new
feature in iOS 5 that will save you a lot
of time building user interfaces for
your apps.

Advantages Of Storyboards
 With a storyboard you have a better
conceptual overview of all the screens in
your app and the connections between
them.
 The storyboard describes the transitions
between the various screens.
 Storyboards make working with table
views a lot easier with the new prototype
cells and static cells features.
 Can also use .xibs if needed with
storyboards.

Disadvantages of Storyboards
 You also need a big
monitor, especially when you write
iPad apps!
 it is only available in iOS 5 onward
 Like IB, not very friendly with other
display engines and toolkits
 Merges can be very difficult if not
impossible if there are conflicts.

Creating Storyboard Project
Fire up Xcode and create a new project.
 Product Name: Ratings
 Company Identifier: the identifier that you
use for your apps, in reverse domain
notation
 Class Prefix: leave this empty
 Device Family: iPhone
 Use Storyboard: check this
 Use Automatic Reference Counting:
check this

In info.plist file, storyboard apps use the key
UIMainStoryboardFile, or “Main storyboard file base name”, to
specify the name of the storyboard that must be loaded when the
app starts.

Incorporate Storyboard in
Existing app
 Open Existing Project, File >
New > File > User Interface
>Storyboard
 UIStoryboard *storybrd =
[UIStoryboard
storyboardWithName:@"LTDSt
oryboardIPhone" bundle:nil];

AllProspectsNavigationControll
er *navpd = [storybrd
instantiateViewControllerWithId
entifier:@"AllProspectsNavigati
onController"];
 navpd.tabBarItem.title =
@"Prospects";

Storyboard Segues
 A segue is a transition from one view to
another.
 E.g Select the + button and ctrl-drag to the
new Navigation Controller:

Life Cycle of a Segue
 The destination controller is created and initialized.
 The segue object is created and its
initWithIdentifier:source:destination: method is called.
The identifier is the unique string you provided for the
segue in Interface Builder, and the two other
parameters represent the two controller objects in the
transition.
 The source view controller’s prepareForSegue:sender:
method is called. See “Configuring the Destination
Controller When a Segue is Triggered.”
 The segue object’s perform method is called. This
method performs a transition to bring the destination
view controller on-screen.
 The reference to the segue object is released, causing
it to be deallocated.

 Release the mouse button and a small
popup menu shows up:

Manually initiating Segue
 If you want to perform a
transition on some
condition, you can fire a
segue manually from
code.
 [self
performSegueWithIdent
ifier:
@"loadMyDetailView"
sender:self];

Implementing a Custom Segue
 To implement a custom segue, you
subclass UIStoryboardSegue and
implement the two methods described
earlier:
◦ If you override the
initWithIdentifier:source:destination: method,
call the superclass’s implementation, then
initialize your subclass.
◦ Your perform method must make whatever
view controller calls are necessary to perform
the transition you want. Typically, you use
any of the standard ways to display a new
view controller, but you can embellish this
design with animations and other effects.

Unwinding Storyboard Segues
 Unwind segues can
allow transitioning to
existing instances of
scenes in a
storyboard
 You must
have, higher up in
the view controller
hierarchy, a method
that is:
◦ Marked as IBAction
◦ Takes one parameter
that is a
UIStoryboardSegue*

Prototype cells
 Prototype cells are one of the cool
advantages that storyboards offer over
regular nibs.

Prototype Cells
 That looks a lot simpler! The only thing
you need to do to get a new cell is:
 UITableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:@
"PlayerCell"];

Designing Our Own Prototype
Cells
 Using a standard cell style is OK for many apps, but I want to
add an image on the right-hand side of the cell that shows the
player’s rating (in stars). Having an image view in that spot is
not supported by the standard cell styles, so we’ll have to
make a custom design.

Designing Our Own Prototype
Cells

Static Cells
 Static table views
are ideal in
situations where a
pre-determined
number of items
need to be
displayed to the
user. The fact that
static table views
do not need a
data source
makes them fast
and easy to
implement.

Passing Data
 Segues are fired automatically on click
of buttons etc. But you can pass data
to destination ViewControllers
 - (void)prepareForSegue:(UIStoryboardSegue
*)segue sender:(id)sender {
◦ if ([[segue identifier]
isEqualToString:@"ShowNewVC"]) {
 NextViewController *nextVC = (NextViewController *)[segue
destinationViewController];
 nextVC.someProperty = self.myProperty;
◦ }
 }

 http://bit.ly/oI2GGW
 http://bit.ly/qIiGMb
 http://bit.ly/101z7JP
 http://bit.ly/SSiz8h
 http://bit.ly/11L9gFI

IOS Storyboards

More Related Content

What's hot (20)

Similar to IOS Storyboards (20)

Recently uploaded (20)

IOS Storyboards