+ All Categories
Home > Technology > IOS Storyboards

IOS Storyboards

Date post: 09-May-2015
Category:
Upload: nabeelarif100
View: 956 times
Download: 4 times
Share this document with a friend
Description:
Storyboarding is an exciting new feature in iOS 5 that will save you a lot of time building user interfaces for your apps. With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them.
24
IOS Story boards Presented by Muhammad Nabeel Arif
Transcript
Page 1: IOS Storyboards

IOS Story boards

Presented byMuhammad Nabeel Arif

Page 2: IOS Storyboards

What is StoryboardStoryboarding is an exciting new

feature in iOS 5 that will save you a lot of time building user interfaces for your apps.

Page 3: IOS Storyboards

Advantages Of StoryboardsWith 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.

Page 4: IOS 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.

Page 5: IOS Storyboards

Creating Storyboard ProjectFire up Xcode and create a new project.Product Name: RatingsCompany Identifier: the identifier that you

use for your apps, in reverse domain notation

Class Prefix: leave this emptyDevice Family: iPhoneUse Storyboard: check thisUse Automatic Reference Counting: check

thisInclude Unit Tests: this should be unchecked

Page 6: IOS Storyboards

Creating Storyboard Project

Page 7: IOS Storyboards
Page 8: IOS Storyboards
Page 9: IOS Storyboards

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.

Page 10: IOS Storyboards

Incorporate Storyboard in Existing app

Open Existing Project, File > New > File > User Interface >Storyboard

UIStoryboard *storybrd = [UIStoryboard storyboardWithName:@"LTDStoryboardIPhone" bundle:nil];

AllProspectsNavigationController *navpd = [storybrd instantiateViewControllerWithIdentifier:@"AllProspectsNavigationController"];

navpd.tabBarItem.title = @"Prospects";

Page 11: IOS Storyboards

Storyboard SeguesA segue is a transition from one view

to another.E.g Select the + button and ctrl-drag

to the new Navigation Controller:

Page 12: IOS Storyboards

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.

Page 13: IOS Storyboards

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

Page 14: IOS Storyboards

Manually initiating SegueIf you want to

perform a transition on some condition, you can fire a segue manually from code.

[self performSegueWithIdentifier: @"loadMyDetailView" sender:self];

Page 15: IOS Storyboards

Implementing a Custom SegueTo 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.

Page 16: IOS Storyboards

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*

Page 17: IOS Storyboards

Prototype cells

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

Page 18: IOS Storyboards

Prototype CellsThat looks a lot simpler! The only

thing you need to do to get a new cell is:

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];

Page 19: IOS Storyboards

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.

Page 20: IOS Storyboards

Designing Our Own Prototype Cells

Page 21: IOS Storyboards

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.

Page 22: IOS Storyboards

Passing DataSegues 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;

◦ }}

Page 24: IOS Storyboards

Recommended