1 / 39

Storyboards

Storyboards. Managing multiple views. Overview. Create a single view application Give 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.

vic
Download Presentation

Storyboards

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Storyboards Managing multiple views

  2. Overview • Create a single view application • Give 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

  3. The storyboard • Select the MainStoryboard.storyboard file No icon view 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 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) Exit View Controller First Responder

  4. The storyboard • Select the MainStoryboard.storyboard file No icon view When you’re zoomed out you cannot select components or drag new components to the view Zoom buttons Change between iPhone 4 size and iPhone 5 size Editing conttrols

  5. Testing • Add label. • Run.

  6. Files • CMPViewController.m • Very few methods • CMPAppDelegate.m • Bunch of empty methods • Application:didFinishLaunchingWithArguments: • Different from previous apps • Used to build a UIWindow, viewController, etc.

  7. 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. • MainStoryboardis configured as the Main Storyboard • That’s how the app knows to automatically create a window. • All the code is behind the scenes.

  8. Files

  9. 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 view • Has count of number of times it has been displayed • Will have a back button

  10. Xcode 5: • click on fileName.h in navigator window • highlight the name of the class (right after the @interface at the top of the file) • Choose Edit->refactor->rename 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.

  11. 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

  12. Red View • Change the background color to red • Make the label large and the value 0 • Add two buttons “blue” and “green”

  13. redViewController.h • Add properties @interface redViewController : UIViewController @property (nonatomic) intredCount; // number of times visit red view @property (nonatomic) intgreenCount; // number of times visit green view @property (nonatomic) intblueCount; // number of times visit blue view @property (weak,atomic) IBOutletUILabel *countLabel; @end

  14. redViewController.m • Need to count whenever view appears. Where should we count this? viewDidLoad? −(void)viewWillAppear: (BOOL)animated { [super viewWillAppear:animated]; self.countLabel.text = [NSStringstringWithFormat:@"%d", ++self.redCount]; } Pre-increment redCount, create a string out of it, set the text of the label.

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

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

  17. More View Controllers • Click on the MainStoryboard.storyboard • Go to library and drag a viewcontroller to the storyboard (not inside the present view) • repeat

  18. 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

  19. More View Controllers • Go to MainStoryboard.storyboard • Select one of the new views and change the background color of the viewto green. • Make sure the viewController is selected. • Go to the identity inspector • Change the class to greenViewController

  20. More View Controllers • Add a label, a “go back” button,.

  21. More View Controllers • Add to the greenController.h file @interface greenViewController : UIViewController @property (weak,atomic) IBOutletUILabel *countLabel; @property (nonatomic) intviewCount; @end

  22. More View Controllers • Adde to the greenController.m file - (void)viewWillAppear: (BOOL)animated { [super viewWillAppear:animated]; self.countLabel.text = [NSStringstringWithFormat:@"%d", self.viewCount]; } Note that we use viewCountas the variable and we do NOT increment it! Will do this in the redViewcontroller

  23. More View Controllers • Make sure that the countLabel property is connected to the UILabel in the storyboard

  24. More View Controllers • Repeat this process for the blue controller and blue view.

  25. 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

  26. 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 dismissed • Popped from stack, top of stack view is displayed • Or a new segue can be triggered • The new view controller is pushed on the navigation stack • The new view is displayed

  27. 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.

  28. 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)

  29. Segue 1

  30. 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”

  31. Run • Green button should work • Green view label does not update yet. • Go back button does not work yet.

  32. Segue 2 • Repeat with blue button and blue view. It’s identifier should be “blue”

  33. 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

  34. Counting • Want the redViewControllerto 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.

  35. 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.

  36. Counting • In the redViewController.mfile add at top of file: #import "greenViewController.h" #import "blueViewController.h"

  37. Counting • In the redViewController.mfile add: −(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([segue.identifierisEqualToString:@"green"]) { greenViewController *vc = (greenViewController *) segue.destinationViewController; vc.viewCount = ++self.greenCount; } else if ([segue.identifierisEqualToString:@"blue"]){ blueViewController *vc = (blueViewController *) segue.destinationViewController; vc.viewCount = ++self.blueCount; } }

  38. Run • Then connect the blue and green views with buttons.

  39. More Control • You can create tab controllers and navigation controllers (using tables) with storyboards

More Related