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


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


3/86

Requirements for Developing iOS Apps



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



5/86

Xcode



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



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



8/86

Interface Builder



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



10/86

The Model-View-Controller Paradigm



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



12/86

Model

The classes that hold the users data

Responds to instructions to change state



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



14/86

Controller

The code that binds together the model and

view

Contains the application logic that decides

how to handle the users inputs



15/86

Header and Implementation Files



16/86

Header Files

Blueprints for objects

Allow programmers to separate certain

elements of a program's source code into

reusable files



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



18/86

iOS Simulator



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



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



21/86

Developing for iOS



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



23/86




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



25/86

Screen Resolutions



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



27/86

Retina Display



28/86



29/86



30/86

iOS Platform Characteristics



31/86

iOS Platform Characteristics

Features of native applications

Features of web applications

User interface elements



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



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



34/86

iOS User Interface Elements



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



36/86

Default Visual Effects for Icons

Rounded corners

Drop shadow

Reflective shine (unless you prevent theshine effect)



37/86

Original Icon On the Home Screen



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



39/86



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



41/86



42/86

Status Bar

Displays important information about the

device and the current environment



43/86



44/86

Navigation Bar

Enables navigation through an information

hierarchy and, optionally, management of

screen contents



45/86



46/86

Toolbar

Contains controls that perform actions

related to objects in the screen or view



47/86



48/86

Tab Bar

Gives users the ability to switch between

different subtasks, views, or modes



49/86



50/86

Popover

Is transient

Can be revealed when people tap a control

or an onscreen area



51/86



52/86

Split View

A full-screen view that consists of two side-

by-side panes



53/86



54/86

Table View

Presents data in a single-column list of

multiple rows



55/86



56/86

January, 2012 Tallinn University 56


57/86

Text View

Accepts and displays multiple lines of text



58/86



59/86

Web View

A region that can display rich HTML content



60/86



61/86

Alerts

Give people important information that

affects their use of the application



62/86



63/86



64/86



65/86



66/86

Action Sheet

Displays a set of choices related to a task the

user initiates



67/86



68/86

Modal View

Provides self-contained functionality in the

context of the current task or workflow



69/86



70/86

Activity Indicator

Shows that a task or process is progressing

(shown here with a label)



71/86

Date and Time Picker

Displays components of date and time, such

as hours, minutes, days, and years



72/86

Detail Disclosure Button

Reveals additional details or functionality

related to an item



73/86

Info Button

Reveals configuration details about an

application, often on the back of the current

view



74/86

Label

Displays static text



75/86

Page Indicator

Indicates how many views are open and

which one is currently visible



76/86

Picker

Displays a set of values from which a user

picks one



77/86

Progress View

Shows the progress of a task or process that

has a known duration


l


78/86

Rounded Rectangular Buttons

Performs an application-specific action


h


79/86

Search Bar

Accepts text from users, which can be used

as input for a search



80/86

Scope Bar

Allows users to define the scope of a search

Is available only in conjunction with a search

bar


S d C l


81/86

Segmented Control

Linear list of segments

Each functions as a button

Each button can display a different view


Slid


82/86

Slider

Makes adjustments to a value

Has a specific range of values


S


83/86

Stepper

Increases or decreases a value by a constant

amount


S i h


84/86

Switch

Represents two mutually exclusive choices


T t Fi ld


85/86

Text Field

Accepts a single line of user input


I t d ti t iOS D l t


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


session3 introduction to ios development

Documents