Download - Session3 Introduction to Ios Development
-
8/3/2019 Session3 Introduction to Ios Development
1/86
Interaction Designfor Mobile Devices
Session 3, Introduction to iOS Development
David Lamas, Ilya Shmorgun
Tallinn University, 2012
-
8/3/2019 Session3 Introduction to Ios Development
2/86
Introduction to iOS Development
Requirements for developing iOS apps
Xcode (including Interface Builder)
Model-View-Controller Header and implementation files
iOS Simulator
iOS Human Interface Guidelines
January, 2012 2Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
3/86
Requirements for Developing iOS Apps
January, 2012 3Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
4/86
Requirements for Developing iOS Apps
A Mac
Preferably an iPhone, iPod Touch or an iPad
Xcode An iOS Developer Subscription, so that you
can test applications on your device
January, 2012 4Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
5/86
Xcode
January, 2012 5Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
6/86
Xcode
A suite of tools for developing software for
Mac OS X and iOS
A source and graphical user interface editor
Enables developing software following the
Model-View-Controller paradigm
Enables writing software in Objective-C Objective-C is Apples object oriented
programming language
January, 2012 6Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
7/86
Features of Xcode
A single-window interface for all major
workflows
Built in Interface Builder
Live discovery and fixing of issues
Autosave
Storyboarding
January, 2012 7Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
8/86
Interface Builder
January, 2012 8Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
9/86
Interface Builder
Allows developers to create interfaces for
applications using a graphical user interface
The resulting interface is stored as a .nib file,
short for NeXT Interface Builder, or more
recently, as a .xib file
January, 2012 9Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
10/86
The Model-View-Controller Paradigm
January, 2012 10Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
11/86
The Model-View-Controller Paradigm
Focuses on isolating the application logic
from the user interface, enabling
independent development, testing and
maintenance of each
Helps to ensure maximum reusability
January, 2012 11Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
12/86
Model
The classes that hold the users data
Responds to instructions to change state
January, 2012 12Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
13/86
View
Composed of windows, controls, and other
elements that the user can see and interact
with
Renders the model into a form suitable for
interaction, typically a user interface
element
January, 2012 13Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
14/86
Controller
The code that binds together the model and
view
Contains the application logic that decides
how to handle the users inputs
January, 2012 14Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
15/86
Header and Implementation Files
January, 2012 15Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
16/86
Header Files
Blueprints for objects
Allow programmers to separate certain
elements of a program's source code into
reusable files
January, 2012 16Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
17/86
Implementation Files
Contain the implementation code for the
method(s) of a class
The place where all the code is
implemented and executed from
January, 2012 17Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
18/86
iOS Simulator
January, 2012 18Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
19/86
iOS Simulator
Enables testing of iPhone and iPad applications on the Mac
Supports simulation for most of the actions a user performs on a
device
Supports various debugging features, such as toggling slowanimations, coloring misaligned images and elements which are
rendered offscreen
Does not support certain hardware specific features, such as
access to a camera or the accelerometer
January, 2012 19Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
20/86
Simulating Hardware Features
Device rotation
Performing gestures, such as tap, tap and hold, double tap, swipe,
flick, drag and pinch
Quitting the application to the Home screen
Locking the device
Simulating low-memory warnings
Toggling in-call status bar
Simulating the hardware keyboard
Simulating the TV out signal
January, 2012 20Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
21/86
Developing for iOS
January, 2012 21Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
22/86
Unique Features of Coding for
iOS Only one application is active and shown on the screen at a time
Applications get just one window to work with, which size is fixed
at the size of the screen
Applications work in a sandbox and have no access to other partsof the file system
Applications can be quit at any point so they need to be as
responsive as possible
Applications get access to limited screen size and systemresources
January, 2012 22Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
23/86
iOS Human Interface Guidelines
January, 2012 23Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
24/86
The Basics
The comfortable minimum size of tappable
UI elements is 44 x 44 points
The quality of the application artwork is
very apparent
The users focus is on the content
January, 2012 24Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
25/86
Screen Resolutions
January, 2012 25Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
26/86
Device Portait Landscape
iPhone 3GS 320 x 480 pixels 480 x 320 pixels
iPhone 4 640 x 960 pixels 960 x 640 pixels
iPad 768 x 1024 pixels 1024 x 768 pixels
January, 2012 26Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
27/86
Retina Display
January, 2012 27Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
28/86
January, 2012 28Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
29/86
January, 2012 29Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
30/86
iOS Platform Characteristics
January, 2012 30Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
31/86
iOS Platform Characteristics
Features of native applications
Features of web applications
User interface elements
January, 2012 31Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
32/86
Features of Native Applications
Come from the App Store
Cannot be side-loaded
All content needs to be saved automatically The filesystem is never exposed to the user
Onscreen user help is minimal
User interacts with one application at a time
January, 2012 32Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
33/86
Features of Web Applications
Can use HTML5 API-s
Can be added to the home screen and run in
full screen without the browsers chrome
Dont need to be approved in the App Store
Easy to push updates
Cannot access certain device features, suchas the camera or the dialer
January, 2012 33Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
34/86
iOS User Interface Elements
January, 2012 34Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
35/86
Application Icons
iPhone - 57 x 57 pixels
iPhone 4 - 114 x 114 pixels (high resolution)
iPhone search and settings - 29 x 29 pixels
iPhone 4 search and settings - 58 x 58 pixels (high resolution)
iPad - 72 x 72 pixels
iPad settings - 29 x 29 pixels
iPad search - 50 x 50 pixels
App Store - 512 x 512 pixel
January, 2012 35Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
36/86
Default Visual Effects for Icons
Rounded corners
Drop shadow
Reflective shine (unless you prevent theshine effect)
January, 2012 36Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
37/86
Original Icon On the Home Screen
January, 2012 37Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
38/86
Launch Images
iPhone - 320 x 480 pixels
iPhone 4 - 640 x 960 pixels
iPad portrait - 768 x 1024 pixels iPad landscape - 1024 x 748 pixels
January, 2012 38Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
39/86
January, 2012 39Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
40/86
Multitasking Bar
Launched with a double-tap on the Home
button
Appears at the bottom of the screen below
the user interface of the currently running
app or the Home screen
January, 2012 40Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
41/86
January, 2012 41Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
42/86
Status Bar
Displays important information about the
device and the current environment
January, 2012 42Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
43/86
January, 2012 43Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
44/86
Navigation Bar
Enables navigation through an information
hierarchy and, optionally, management of
screen contents
January, 2012 44Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
45/86
January, 2012 45Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
46/86
Toolbar
Contains controls that perform actions
related to objects in the screen or view
January, 2012 46Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
47/86
January, 2012 47Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
48/86
Tab Bar
Gives users the ability to switch between
different subtasks, views, or modes
January, 2012 48Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
49/86
January, 2012 49Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
50/86
Popover
Is transient
Can be revealed when people tap a control
or an onscreen area
January, 2012 50Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
51/86
January, 2012 51Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
52/86
Split View
A full-screen view that consists of two side-
by-side panes
January, 2012 52Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
53/86
January, 2012 53Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
54/86
Table View
Presents data in a single-column list of
multiple rows
January, 2012 54Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
55/86
January, 2012 55Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
56/86
January, 2012 Tallinn University 56
-
8/3/2019 Session3 Introduction to Ios Development
57/86
Text View
Accepts and displays multiple lines of text
January, 2012 57Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
58/86
January, 2012 58Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
59/86
Web View
A region that can display rich HTML content
January, 2012 59Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
60/86
January, 2012 60Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
61/86
Alerts
Give people important information that
affects their use of the application
January, 2012 61Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
62/86
January, 2012 62Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
63/86
January, 2012 63Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
64/86
January, 2012 64Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
65/86
January, 2012 65Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
66/86
Action Sheet
Displays a set of choices related to a task the
user initiates
January, 2012 66Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
67/86
January, 2012 67Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
68/86
Modal View
Provides self-contained functionality in the
context of the current task or workflow
January, 2012 68Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
69/86
January, 2012 69Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
70/86
Activity Indicator
Shows that a task or process is progressing
(shown here with a label)
January, 2012 70Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
71/86
Date and Time Picker
Displays components of date and time, such
as hours, minutes, days, and years
January, 2012 71Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
72/86
Detail Disclosure Button
Reveals additional details or functionality
related to an item
January, 2012 72Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
73/86
Info Button
Reveals configuration details about an
application, often on the back of the current
view
January, 2012 73Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
74/86
Label
Displays static text
January, 2012 74Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
75/86
Page Indicator
Indicates how many views are open and
which one is currently visible
January, 2012 75Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
76/86
Picker
Displays a set of values from which a user
picks one
January, 2012 76Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
77/86
Progress View
Shows the progress of a task or process that
has a known duration
January, 2012 77Tallinn University
l
-
8/3/2019 Session3 Introduction to Ios Development
78/86
Rounded Rectangular Buttons
Performs an application-specific action
January, 2012 78Tallinn University
h
-
8/3/2019 Session3 Introduction to Ios Development
79/86
Search Bar
Accepts text from users, which can be used
as input for a search
January, 2012 79Tallinn University
-
8/3/2019 Session3 Introduction to Ios Development
80/86
Scope Bar
Allows users to define the scope of a search
Is available only in conjunction with a search
bar
January, 2012 80Tallinn University
S d C l
-
8/3/2019 Session3 Introduction to Ios Development
81/86
Segmented Control
Linear list of segments
Each functions as a button
Each button can display a different view
January, 2012 81Tallinn University
Slid
-
8/3/2019 Session3 Introduction to Ios Development
82/86
Slider
Makes adjustments to a value
Has a specific range of values
January, 2012 82Tallinn University
S
-
8/3/2019 Session3 Introduction to Ios Development
83/86
Stepper
Increases or decreases a value by a constant
amount
January, 2012 83Tallinn University
S i h
-
8/3/2019 Session3 Introduction to Ios Development
84/86
Switch
Represents two mutually exclusive choices
January, 2012 84Tallinn University
T t Fi ld
-
8/3/2019 Session3 Introduction to Ios Development
85/86
Text Field
Accepts a single line of user input
January, 2012 85Tallinn University
I t d ti t iOS D l t
-
8/3/2019 Session3 Introduction to Ios Development
86/86
Introduction to iOS Development
And so we covered
Requirements for developing iOS apps
Xcode (including Interface Builder)
Model-View-Controller
Header and implementation files
iOS Simulator
iOS Human Interface Guidelines