iOS Mobile App Development

Creating Interface

Module Code and Module Title Title of Slides

Learning Outcomes

On successful completion of this topic, the student should be able to:• Understand how the views work. • Explain and implements the transition between

scene• Implements date picker

‹#›

Module Code and Module Title Title of Slides

Interface

• Complex app– Interface with more scene and more view

• View – Arranged in a hierarchical structure that

define the layout of view relative to other view• Category

– Superview– Subviews

(Parent child relationship)

‹#›

Module Code and Module Title Title of Slides

Views

• Managing view hierarchies is a crucial part of developing UI.

• View Organization influences– Visual appearance – App respond toward changes and events

• View – Labels, text fields, buttons etc– Containers for other views

‹#›

Module Code and Module Title Title of Slides

Container View Controller

• Combine the content from multiple view controller into a single user interface

• Used to – facilitate navigation– create new user interface types based on

existing content• E.g.

– UINagivationController– UITabBarController– UISplitViewController

‹#›

Module Code and Module Title Title of Slides

View hierarchy example

Layered view in a clock app View architecture

‹#›

Module Code and Module Title Title of Slides

App Startup

• Calling UIApplicationMain (AppDelegate.swift)– Create app instance

• UIWindow instance• ViewController instance

• Initial view controller (storyboard entry point)– Window instance’s root view controller – First view controller to be loaded– Attribute inspector > view controller > is initial

view controller‹#›

Module Code and Module Title Title of Slides

Segue

• Represents the transition from one scene to the next scene, such as when one scene slides over another.

• Type– Show : Present the content (master / detail

area)– Present modally : present the content modally

(presentation / transition style)– Present as Popover: present the content as a

popover anchored to an existing view‹#›

Module Code and Module Title Title of Slides

View Switcher

‹#›

Module Code and Module Title Title of Slides

View Transition

• Affect the view hierarchy only• View transition help to hide sudden changes

associate with adding, removing, hiding or showing view in view hierarchy. – Change the visible subview of an existing view– Replace one view with different view

• Animated view transitions – Use view-based transitions to animate the

addition and removal of view

‹#›

Module Code and Module Title Title of Slides

Transition style

• Determine the type of animations used to display a presented view controller– Assign standard transition style to the

modelTransitionStyle property. – E.g built-in style :

• UIModelTransitionStyleCoverVertical• UIModelTransitionStyleFlipHorizontal• UIModelTransitionStyleCrossDissolve

‹#›

Module Code and Module Title Title of Slides

Navigation Controller

• Manage transitions backward and forward through a series of view controller (navigation stack)

• First item in the stack becomes the root view controller.

‹#›

Module Code and Module Title Title of Slides

Navigation controller

• Every controller on the navigation stack gets a navigation bar, which can contain controls for backward and forward navigation.

• Navigation bar consists of:– View controller title– Bar Button Item object (button)

• Navigate to next view controller.• Auto generate the back button from the next view

controller‹#›

Module Code and Module Title Title of Slides

Tab Bars

• Tab bar controller– Organize the app into one or more distinct

modes of operation– Coordinates the navigation between view

hierarchies• View hierarchy is self contained

– View that tab bar controller manage directly– View that are manage by the content view

controller

‹#›

Module Code and Module Title Title of Slides

Tab Bar Interface

• Provide different perspectives on the same set of data or organize the app along functional lines.

• Present the tab bar view along the bottom of the screen

• Initiate the navigation between different mode or function

• Tab bar controller object manage the tab bar interace

‹#›

Module Code and Module Title Title of Slides

Tab Bar Interface

• Standard tab bar interface:– Tab bar controller object (UITabBarController)– One content view controller object for each tab– An optional delegate object

• Implementation– Using tab application template– Drag and drop tab controller from object library – Editor > Embed in > tab bar controller

‹#›

Module Code and Module Title Title of Slides

Tab Bar Controller Object

• Create and manages the tab bar view and also content view controller for each mode.

• Select the tab and display the view associated with the corresponding content view controller.

‹#›

Module Code and Module Title Title of Slides

Date Picker

• Control used for selecting a specific date, time or both

• Provide interface for managing date and time selection

• Provide interface for a countdown timer.• Cannot customize the appearance

‹#›

Module Code and Module Title Title of Slides

Date Picker

• Implemented in UIDatePicker class– Uses multiple rating wheels to allow user to

select date and times– Send action message when user finishes

rotating one of the wheels to change the date and time

• Mode: – Date and time– Date only– Time only– Countdown timer

‹#›

Module Code and Module Title Title of Slides

Picker view

• Let user choose between certain options by spinning a wheel (slot machine) on the screen.

• Suitable for the user to choose an option from a set of distinct options.

• Consists of:– Component– Rows

A component consist of a series of rows‹#›

Module Code and Module Title Title of Slides

Picker view

• numberOfComponentsInPickerView– method asks for the number of columns in

your picker element.• numberOfRowsInComponent

– method asks for the number of rows of data in UIPickerView element

• pickerView:titleForRow:forComponen– method asks for the data for a specific row

and specific component.

‹#›

Module Code and Module Title Title of Slides

Reviews

1. What is View Controller

2. What are the differences between superview and subviews

3. Discuss the “view as the container for other view”

4. What is transitions

5. What is picker

‹#›

Module Code and Module Title Title of Slides

Next Session

Introduction to Table Views

‹#›