ia play

I was happy to read How To Prototype In Xcode Using Storyboard. It is good to see a resource on using Xcode Storyboarding from a designer’s perspective as I think it has huge potential if you are doing a lot of prototyping for iOS devices. I made a prototype of a Guardian Film app last year using Xcode. It took a couple of days but that included learning my way around Xcode and when it was done we could load it onto an iPhone for user testing because it was an iphone app (if not exactly something you would launch).

 

We didn’t go on to develop the test into a full product but it would have been interesting to see whether it was worth the developers building on the Storyboard app or if they’d have needed/wanted to start again from scratch.

I had a load of notes that I was intending to turn into more detailed instructions but as I haven’t gone back to Storyboard since this is all I have…

Note: compatible with iOS 5+ only.

Storyboard is effectively a flowmap, but one that actually generates an app. You can add dummy/fake content or if you can handle a bit of code (or know someone who does) you can pull in the real content.

Workspace components

 

The canvas

This shows the flowmap or storyboard in the central pane of the workspace (also called standard editor?). You select mainstoryboard from the project navigator to open the storyboard editor if it isn’t showing (I have  managed to get stuck with another editor open and be unable to switch back to the standard/storyboard editor).

There’s an arrow in a circle that collapses part of (the standard) editor that shows the app as a (file hierarchy?) rather than a flowmap. If you can’t access an element on the canvas (say it is ‘below the fold’) then you can edit it via the ‘hierarchy pane’. You may also need to rearrange elements in the ‘hierarchy pane’ if you need an element visible in the canvas so you can create a segue.

Navigators (on the left)

• project navigator (cmd +1) shows the file structure of your workspace
• symbol navigator (cmd + 2)
• search navigator (cmd + 3)
• issue navigator (cmd + 4 )
• debug navigator (cmd + 5)
• breakpoint navigator (cmd + 6)
• log navigator (cmd + 7)

You can change navigator display using the icons at the top of the navigator, or the edit menu or the keyboard shortcuts shown above (cmd + 0 to remove all navigators).

Libraries(bottom right)

• file template library
• code snippet library
• object library – drag the controls from here onto the canvas
• media library

Inspectors (right, above the object library)

View these for an object by selecting the relevant object on the canvas.

• file
• quick help
• identity  – use to change class of object
• attributes – lots of controls of the content/layout etc of each object
• size – mainly controls the relative positioning of the object
• connections

Components of a storyboard

Scene

A scene is a screenful of content or view. (Synonymous with view controller?)
cmd+ click to move as a group

Segue

A segue is a transition between view controllers.

Segue types:

• push: “pushes the destination view controller onto a navigation controller’s stack”
• modal “ presents the destination view controller”
• custom “design your own transition”

You ctrl+drag to create a segue (/relationship?) between scenes. You’ll be asked to pick transition type but you can change this later in the attribute inspector if you select the segue.

There’s also ‘relationships’ between container and child containers but are these segues or  something different? I don’t entirely understand segues versus relationship.

• modal segue completely obscures screen below, slides up temporarily
• nav controller pushes one view on top of the other = segue
• can’t use segue for cancel/done buttons (need delegate?) “no such thing as a reverse segue”
• automatically get back navigation when using some controllers but not others. Use push segues between parent and child in a hierarchy to maintain the navigation and tool bar

Note: You can only edit the elements of a scene when viewing in 100%, although you can create segues between scenes at any zoom.

Controllers

1. container view controllers display content owned by other view controllers. Each type of container defines its own interface to manage its children
2. content view controllers present content on the screen using a view or a group of views
   1. shows data
   2. collects data
   3. performs a task
   4. navigate between a set of available commands

Types of controllers:

• view controller: the fundamental view-management model.
  • split view controller
  • reference library controller
• table view controller
• navigation controller (subclasses available from the Identity inspector). Manages the navigation bar and the button to navigate back
  • Image picker controller
  • Video editor controller
• tab bar controller
• page view controller

To get a split view or ref library controller, add a view controller then go to the Identity inspector and change the class. Same process applies for turning a nav controller into an image picker or video editor.

The initial view controller is a setting that determines which scene is the start scene when you launch the app. Select a controller, view attributes and tick “is initial view controller”. I think this automatically un-ticks this for whichever controller was previously the intial view controller.

 

Objects

Note: check the properties of a generic object if you can’t see the specific one you want. You can often change the sub-type.

Types of objects available:

• label
• round rect button – can be turned into a variety of buttons
• segmented control
• text field (creates a text field that the end-user can edit – use label for uneditable content?)
• slider
• switch
• activity indicator view
• progress view
• page control
• stepper
• table view
• table view cell – has a number of variations you can choose in attributes
• image view
• text view
• web view
• map view
• scroll view
• date picker
• picker view
• Ad BannerView
• View
• Navigation bar – has attributes that control colour and style
• Navigation item – can be turned into a variety of buttons
• Search Bar
• Search bar and search display controller
• toolbar
• bar button item – can be turned into a variety of items
• fixed space bar button item
• flexible space bar button item
• tab bar
• tab bar item – can be turned into a variety of items

That’s as far as my notes go. If I do another project with Storyboard then I’ll add to this.