Prototyping with iOSStoryboard

IntroductionVery oftenWe are tasked to createiOS prototypesTo test look and feel

IntroductionSo we did quick and dirty work using PNGs given to us

Introduction With Photoshop

Introduction Balsamiq

Introduction Powerpoint

But there is a catchAll these tools do a pretty OK jobBut they do not capture the touchAnd feelOf the prototype on an actual device

Such as swipes on a device

StoryboardEnter StoryboardIt’s helps designers and developers

To create prototypesThat can be deployed on devices

StoryboardYou can create a quick prototypeUsing storyboardAnd deploy on a device for testing

StoryboardWith the layoutYou can sit down with the clientAnd create the app flowIn a visual mannerThat is easy to understand

StoryboardStoryboards are awesomeYou can take pngs of mockups from your

clientsPut it as a UIImagePaste it in your StoryboardDrag and drop a few buttonsLink them to your other screensAdd in some hard coded data

StoryboardVoila and your prototype is ready

Storyboard Is like Xib on steroids Without all the nasty side effects

StoryboardBest thing is that all these can be done relatively easily

Plus, most developers knows their way around XCode better than Photoshop

Prototypes get done fasterClients can test it on your device at home

StoryboardBest part is thatWith the storyboard prototypeYou can immediately put the logic into itOnce the client is happy with the prototypeSaves time and money

StoryboardThose areas marked in red in the previous slide are the icons indicating the transitionThey are known as SeguesPronounced as Segway

Things to rememberAlways remember to select the User Storyboards option when creating a new projectFile extension is .storyboard

NextRemember to set a storyboard to be the initial view controllerGo to View -> Utilities -> Show Attributes Inspector

LastAdd Navigation View to your initial view controllerSelect your initial viewGo to Editor -> Embed In -> Navigation Controller

Creating New StoryboardJust drag a new view controller to the storyboard screen

Link storyboard screens together part 1

Just select your buttonWhich will trigger the transitionThen right click and drag the Trigger Segues outletAnd pull it to the storyboard that you want to link

Link storyboard screens together part 2

Using codeYou need to give the segue an identifierThen write some code

The code to write[self performSegueWithIdentifier:@"SecondViewSegue" sender:self];