storyboards managing multiple views. overview create a single view application give the project a...
TRANSCRIPT
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