StoryboardsManaging multiple views

Overview

Create a single view applicationGive the project a name and click “Use Storyboards” and “Use Automatic Reference Counting”

Save it somewhere. Do not create a git directory

There’s no nib; instead the storyboard represents several views

The storyboard

Select the MainStoryboard.storyboard file

When you click on View Controller in the doc, you get 3 icons: each View in the storyboard has these icons. This is called a scene

No icon view

View Controller First Responder

Exit

This arrow shows which view controller is the initial view controller for this storyboard. Can drag this arrow to another view (if there was one)

The storyboard

Select the MainStoryboard.storyboard file

When you’re zoomed out you cannot select components or drag new components to the view

No icon view

Change between iPhone 4 size and iPhone 5 size

Zoom buttonsEditing conttrols

Testing

Add label.

Run.

Files

CMPViewController.mVery few methods

CMPAppDelegate.mBunch of empty methods

Application:didFinishLaunchingWithArguments:

Different from previous apps

Used to build a UIWindow, viewController, etc.

Files

Go to project navigator on left, select topmost file name, make sure the target is selected in next column and summary tab is clicked.

Look for iPhone/iPod Deployment Info section.

MainStoryboard is configured as the Main Storyboard

That’s how the app knows to automatically create a window.

All the code is behind the scenes.

Files

app

We’ll create an app with three views:a red view,

Has count of number of times it has been displayed

Has buttons to the green and blue views

a green view Has count of number of times it has been displayed

Will have a back button

a blue viewHas count of number of times it has been displayed

Will have a back button

Red View

First refactor current CMPViewController to redViewController In Xcode 4:

Control click or right click on the name CMPViewController.h in the project navigator

Choose Refactor=>Rename

Enter redViewController . Make sure to check the checkbox for “Rename related files”

in the ensuing dialog box choose “enable” then “save”

when I did this, redViewController.m was not included correctly. If it shows up in red, delete it (but do NOT move to trash), then add it again.

Sometimes Xcode puts the .m file in the wrong folder on your hard drive. Ensure that the redViewController.m file is in the same folder as all of your other .m files.

Xcode 5:1. click on fileName.h in

navigator window2. highlight the name of

the class (right after the @interface at the top of the file)

3. Choose Edit->refactor->rename

Red View

Go to MainStoryboard.storyboard

In the dock, click on the Red View Controller

Choose the identity inspector. The class should be a redVewController

Red View

Change the background color to red

Make the label large and the value 0

Add two buttons “blue” and “green”

redViewController.hAdd properties

@interface redViewController : UIViewController

@property (nonatomic) int redCount; // number of times visit red view@property (nonatomic) int greenCount; // number of times visit green view@property (nonatomic) int blueCount; // number of times visit blue view

@property (weak,atomic) IBOutlet UILabel *countLabel;

@end

redViewController.m

Need to count whenever view appears. Where should we count this? viewDidLoad?

−(void)viewWillAppear: (BOOL)animated {

[super viewWillAppear:animated];

self.countLabel.text = [NSString stringWithFormat:@"%d", ++self.redCount];

}Pre-increment redCount, create a string out of it, set the text of the label.

storyboard

Make sure the countLabel property is connected to the label in the storyboard.

run

Nothing should happen. Yet. But you should see your red view with the number “1”

More View Controllers

Click on the MainStoryboard.storyboard

Go to library and drag a viewcontroller to the storyboard (not inside the present view)

repeat

More View Controllers

Now go to File=>New=>File and choose objective C class.

Name it greenViewController but do not include a nib file. We already created the view in the storyboard file

make sure it is a subclass of a viewController

Make sure it’s not for iPad

Make sure the checkbox by Targets is checked.

Repeat and name the new file blueViewController

More View Controllers

Go to MainStoryboard.storyboard

Select one of the new views and change the background color of the view to green.

Make sure the viewController is selected. Go to the identity inspector

Change the class to greenViewController

More View Controllers

Add a label, a “go back” button,.

More View Controllers

Add to the greenController.h file

@interface greenViewController : UIViewController

@property (weak,atomic) IBOutlet UILabel *countLabel;

@property (nonatomic) int viewCount; @end

More View Controllers

Adde to the greenController.m file

- (void)viewWillAppear: (BOOL)animated {

[super viewWillAppear:animated];

self.countLabel.text = [NSString stringWithFormat:@"%d", self.viewCount];

}Note that we use viewCount as the variable and we do NOT increment it! Will do this in the redViewcontroller

More View Controllers

Make sure that the countLabel property is connected to the UILabel in the storyboard

More View Controllers

Repeat this process for the blue controller and blue view.

Run

Should see red view with a count of “1”No connections to other views yet

In the MainStoryboard.storyboard file, move the big arrow that is on the left side of the red view to the left side of the green view

Run

Should see the green view with a count of “0”

Repeat for the blue view

Segue

A segue specifies a transition from one view controller to another

These transitions form a stack

Just like a navigation controller

When a segue is triggered (ours will be by a button), the segue is followed to the next view,

That view is pushed on the stack

That view is displayed

Then the view can be dismissedPopped from stack, top of stack view is displayed

Or a new segue can be triggeredThe new view controller is pushed on the navigation stack

The new view is displayed

Segue

In our app, when the “green” button is pushed,

the green view controller will be pushed on the stack

There will be a transition

The red view controller will update the greenCount

The red view controller will update the label in the green view.

First Segue

Go to the MainStoryboard.storyboard

Control click on its Green button and drag to the GreenViewController

Let go and a menu asks what type of segue to create

Select Modal; Our segue is created (see next slide)

Segue 1

Segue 1

Select the segue (click on the circle in the middle of the arrow)

Select the attributes inspector

Name the identifier “green”

Make the transition “Flip Horizontal”

Run

Green button should work

Green view label does not update yet.

Go back button does not work yet.

Segue 2

Repeat with blue button and blue view. It’s identifier should be “blue”

Connecting

In greenViewController.h add an IBAction:

− (IBAction)handleGoBack:(UIButton *)sender;

In greenViewController.m add:

− (IBAction)handleGoBack:(UIButton *)sender {

[self dismissViewControllerAnimated: YES completion: NULL];

}

And connect the Go Back button in the storyboard to this method

Counting

Want the redViewController to count for both green view methods and blue view methods

So the redViewController needs to know when a segue is done to one of these views

And it must be able to change the instance variable in each of them.

Counting

The prepareForSegue method in the redViewController is called just before a segue is done.

This method passes in a pointer to the segue that is about to be done.

We’ll use the identifier that we added to the segue to determine which view we’re going to.

Counting

In the redViewController.m file add at top of file:

#import "greenViewController.h"#import "blueViewController.h"

CountingIn the redViewController.m file add:

−(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{

if ([segue.identifier isEqualToString:@"green"]) { greenViewController *vc = (greenViewController *) segue.destinationViewController; vc.viewCount = ++self.greenCount; } else if ([segue.identifier isEqualToString:@"blue"]){ blueViewController *vc = (blueViewController *) segue.destinationViewController; vc.viewCount = ++self.blueCount; }}

Run

Then connect the blue and green views with buttons.

More Control

You can create tab controllers and navigation controllers (using tables) with storyboards