SlideShare a Scribd company logo
CS193p

Fall 2017-18
Stanford CS193p
Developing Applications for iOS

Fall 2017-18
CS193p

Fall 2017-18
Today
Views
PlayingCard demo continued
Gestures
Getting multitouch input from users
Demo: Manipulating our Playing Card
Swiping, tapping and pinching
CS193p

Fall 2017-18
Demo
PlayingCard continued …
Now that we have our PlayingCard Model, time to implement our Controller and View
Creating a custom UIView subclass
Drawing with Core Graphics and UIBezierPath
UIView’s contentMode (i.e. redraw vs. scaling the bits on bounds change)
Drawing with transparency
More NSAttributedString dictionary keys … UIFont and NSParagraphStyle
UIFontMetrics scaling for users who want larger fonts
Managing subviews of your custom UIView
Using isHidden
CGAffineTransform
Constraint Priority
Assets.xcassets and drawing with UIImage
@IBDesignable and @IBInspectable
Using didSet to ensure redraws and relayouts when properties change
CS193p

Fall 2017-18
Gestures
We’ve seen how to draw in a UIView, how do we get touches?
We can get notified of the raw touch events (touch down, moved, up, etc.)
Or we can react to certain, predefined “gestures.” The latter is the way to go!
Gestures are recognized by instances of UIGestureRecognizer
The base class is “abstract.” We only actually use concrete subclasses to recognize.
There are two sides to using a gesture recognizer
1. Adding a gesture recognizer to a UIView (asking the UIView to “recognize” that gesture)
2. Providing a method to “handle” that gesture (not necessarily handled by the UIView)
Usually the first is done by a Controller
Though occasionally a UIView will do this itself if the gesture is integral to its existence
The second is provided either by the UIView or a Controller
Depending on the situation. We’ll see an example of both in our demo.
CS193p

Fall 2017-18
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Gestures
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
Gestures
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
Gestures
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
Gestures
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (here it’s the Controller itself)
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Gestures
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (here it’s the Controller itself)
The action is the method invoked on recognition (that method’s argument? the recognizer)
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Gestures
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (here it’s the Controller itself)
The action is the method invoked on recognition (that method’s argument? the recognizer)
Here we ask the UIView to actually start trying to recognize this gesture in its bounds
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
@IBOutlet weak var pannableView: UIView {
didSet {
let panGestureRecognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(recognizer:))
)
pannableView.addGestureRecognizer(panGestureRecognizer)
}
}
Gestures
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (here it’s the Controller itself)
The action is the method invoked on recognition (that method’s argument? the recognizer)
Here we ask the UIView to actually start trying to recognize this gesture in its bounds
Let’s talk about how we implement the handler …
We can configure it to do so in the property observer for the outlet to that UIView …
CS193p

Fall 2017-18
Gestures
A handler for a gesture needs gesture-specific information
So each concrete subclass provides special methods for handling that type of gesture
For example, UIPanGestureRecognizer provides 3 methods
func translation(in: UIView?) -> CGPoint // cumulative since start of recognition
func velocity(in: UIView?) -> CGPoint // how fast the finger is moving (points/s)
func setTranslation(CGPoint, in: UIView?)
This last one is interesting because it allows you to reset the translation so far
By resetting the translation to zero all the time, you end up getting “incremental” translation
The abstract superclass also provides state information
var state: UIGestureRecognizerState { get }
This sits around in .possible until recognition starts
For a continuous gesture (e.g. pan), it moves from .began thru repeated .changed to .ended
For a discrete (e.g. a swipe) gesture, it goes straight to .ended or .recognized.
It can go to .failed or .cancelled too, so watch out for those!
CS193p

Fall 2017-18
func pan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .changed: fallthrough
case .ended:
let translation = recognizer.translation(in: pannableView)
// update anything that depends on the pan gesture using translation.x and .y
recognizer.setTranslation(CGPoint.zero, in: pannableView)
default: break
}
}
So, given this information, what would the pan handler look like?
Gestures
Remember that the action was pan(recognizer:)
CS193p

Fall 2017-18
func pan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .changed: fallthrough
case .ended:
let translation = recognizer.translation(in: pannableView)
// update anything that depends on the pan gesture using translation.x and .y
recognizer.setTranslation(CGPoint.zero, in: pannableView)
default: break
}
}
So, given this information, what would the pan handler look like?
Gestures
Remember that the action was pan(recognizer:)
We are only going to do anything when the finger moves or lifts up off the device’s surface
CS193p

Fall 2017-18
func pan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .changed: fallthrough
case .ended:
let translation = recognizer.translation(in: pannableView)
// update anything that depends on the pan gesture using translation.x and .y
recognizer.setTranslation(CGPoint.zero, in: pannableView)
default: break
}
}
So, given this information, what would the pan handler look like?
Gestures
Remember that the action was pan(recognizer:)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too)
CS193p

Fall 2017-18
func pan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .changed: fallthrough
case .ended:
let translation = recognizer.translation(in: pannableView)
// update anything that depends on the pan gesture using translation.x and .y
recognizer.setTranslation(CGPoint.zero, in: pannableView)
default: break
}
}
So, given this information, what would the pan handler look like?
Gestures
Remember that the action was pan(recognizer:)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too)
Here we get the location of the pan in the pannableView’s coordinate system
CS193p

Fall 2017-18
func pan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .changed: fallthrough
case .ended:
let translation = recognizer.translation(in: pannableView)
// update anything that depends on the pan gesture using translation.x and .y
recognizer.setTranslation(CGPoint.zero, in: pannableView)
default: break
}
}
So, given this information, what would the pan handler look like?
Gestures
Remember that the action was pan(recognizer:)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too)
Here we get the location of the pan in the pannableView’s coordinate system
Now we do whatever we want with that information
CS193p

Fall 2017-18
So, given this information, what would the pan handler look like?
func pan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .changed: fallthrough
case .ended:
let translation = recognizer.translation(in: pannableView)
// update anything that depends on the pan gesture using translation.x and .y
recognizer.setTranslation(CGPoint.zero, in: pannableView)
default: break
}
}
Gestures
Remember that the action was pan(recognizer:)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too)
Here we get the location of the pan in the pannableView’s coordinate system
Now we do whatever we want with that information
By resetting the translation, the next one we get will be incremental movement
CS193p

Fall 2017-18
Gestures
UIPinchGestureRecognizer
var scale: CGFloat // not read-only (can reset)
var velocity: CGFloat { get } // scale factor per second
UIRotationGestureRecognizer
var rotation: CGFloat // not read-only (can reset); in radians
var velocity: CGFloat { get } // radians per second
UISwipeGestureRecognizer
Set up the direction and number of fingers you want
var direction: UISwipeGestureRecoginzerDirection // which swipe directions you want
var numberOfTouchesRequired: Int // finger count
CS193p

Fall 2017-18
Gestures
UITapGestureRecognizer
This is discrete, but you should check for .ended to actually do something.
Set up the number of taps and fingers you want …
var numberOfTapsRequired: Int // single tap, double tap, etc.
var numberOfTouchesRequired: Int // finger count
UILongPressRecognizer
This is a continuous (not discrete) gesture (i.e. you’ll get .changed if the finger moves)
You still configure it up-front …
var minimumPressDuration: TimeInterval // how long to hold before its recognized
var numberOfTouchesRequired: Int // finger count
var allowableMovement: CGFloat // how far finger can move and still recognize
Very important to pay attention to .cancelled because of drag and drop
CS193p

Fall 2017-18
Demo Code
Download the demo code from today’s lecture.

More Related Content

Similar to Gestures

Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Yuji Hato
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animations
Naman Dwivedi
 
Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...
Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...
Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...
Codemotion
 
Android 3
Android 3Android 3
Android 3
Robert Cooper
 
I os 11
I os 11I os 11
I os 11
信嘉 陳
 
004
004004
Custom view
Custom viewCustom view
Custom view
SV.CO
 
Android App Development - 05 Action bar
Android App Development - 05 Action barAndroid App Development - 05 Action bar
Android App Development - 05 Action bar
Diego Grancini
 
Adopting 3D Touch in your apps
Adopting 3D Touch in your appsAdopting 3D Touch in your apps
Adopting 3D Touch in your apps
Juan C Catalan
 
iOS Transition Animations The proper way to do it.pdf
iOS Transition Animations The proper way to do it.pdfiOS Transition Animations The proper way to do it.pdf
iOS Transition Animations The proper way to do it.pdf
SatawareTechnologies4
 
What's new in iOS9
What's new in iOS9What's new in iOS9
What's new in iOS9
CocoaHeads France
 
There is no spoon - iPhone vs. iPad
There is no spoon - iPhone vs. iPadThere is no spoon - iPhone vs. iPad
There is no spoon - iPhone vs. iPad
Paul Ardeleanu
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on Android
Cody Engel
 
Android Oreo
Android OreoAndroid Oreo
Android Oreo
Siddharth Yadav
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
Robert Cooper
 
ReactiveCocoa in Practice
ReactiveCocoa in PracticeReactiveCocoa in Practice
ReactiveCocoa in Practice
Outware Mobile
 
Displaying additional image types in XMetaL
Displaying additional image types in XMetaLDisplaying additional image types in XMetaL
Displaying additional image types in XMetaL
XMetaL
 
Improving android experience for both users and developers
Improving android experience for both users and developersImproving android experience for both users and developers
Improving android experience for both users and developers
Pavel Lahoda
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahoda
Droidcon Berlin
 
Say bye to Fragments with Conductor & Kotlin
Say bye to Fragments with Conductor & KotlinSay bye to Fragments with Conductor & Kotlin
Say bye to Fragments with Conductor & Kotlin
Miquel Beltran Febrer
 

Similar to Gestures (20)

Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animations
 
Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...
Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...
Reactive Thinking in iOS Development - Pedro Piñera Buendía - Codemotion Amst...
 
Android 3
Android 3Android 3
Android 3
 
I os 11
I os 11I os 11
I os 11
 
004
004004
004
 
Custom view
Custom viewCustom view
Custom view
 
Android App Development - 05 Action bar
Android App Development - 05 Action barAndroid App Development - 05 Action bar
Android App Development - 05 Action bar
 
Adopting 3D Touch in your apps
Adopting 3D Touch in your appsAdopting 3D Touch in your apps
Adopting 3D Touch in your apps
 
iOS Transition Animations The proper way to do it.pdf
iOS Transition Animations The proper way to do it.pdfiOS Transition Animations The proper way to do it.pdf
iOS Transition Animations The proper way to do it.pdf
 
What's new in iOS9
What's new in iOS9What's new in iOS9
What's new in iOS9
 
There is no spoon - iPhone vs. iPad
There is no spoon - iPhone vs. iPadThere is no spoon - iPhone vs. iPad
There is no spoon - iPhone vs. iPad
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on Android
 
Android Oreo
Android OreoAndroid Oreo
Android Oreo
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
 
ReactiveCocoa in Practice
ReactiveCocoa in PracticeReactiveCocoa in Practice
ReactiveCocoa in Practice
 
Displaying additional image types in XMetaL
Displaying additional image types in XMetaLDisplaying additional image types in XMetaL
Displaying additional image types in XMetaL
 
Improving android experience for both users and developers
Improving android experience for both users and developersImproving android experience for both users and developers
Improving android experience for both users and developers
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahoda
 
Say bye to Fragments with Conductor & Kotlin
Say bye to Fragments with Conductor & KotlinSay bye to Fragments with Conductor & Kotlin
Say bye to Fragments with Conductor & Kotlin
 

More from SV.CO

Handout level-1-module-1
Handout   level-1-module-1Handout   level-1-module-1
Handout level-1-module-1
SV.CO
 
Persistence And Documents
Persistence And DocumentsPersistence And Documents
Persistence And Documents
SV.CO
 
Building complex input screens
Building complex input screensBuilding complex input screens
Building complex input screens
SV.CO
 
Working with the Web: 
Decoding JSON
Working with the Web: 
Decoding JSONWorking with the Web: 
Decoding JSON
Working with the Web: 
Decoding JSON
SV.CO
 
Saving Data
Saving DataSaving Data
Saving Data
SV.CO
 
Alerts notification
Alerts notificationAlerts notification
Alerts notification
SV.CO
 
Practical animation
Practical animationPractical animation
Practical animation
SV.CO
 
Segues and navigation controllers
Segues and navigation controllersSegues and navigation controllers
Segues and navigation controllers
SV.CO
 
Camera And Email
Camera And EmailCamera And Email
Camera And Email
SV.CO
 
Scroll views
Scroll viewsScroll views
Scroll views
SV.CO
 
Intermediate table views
Intermediate table viewsIntermediate table views
Intermediate table views
SV.CO
 
Table views
Table viewsTable views
Table views
SV.CO
 
Closures
ClosuresClosures
Closures
SV.CO
 
Protocols
ProtocolsProtocols
Protocols
SV.CO
 
App anatomy and life cycle
App anatomy and life cycleApp anatomy and life cycle
App anatomy and life cycle
SV.CO
 
Extensions
ExtensionsExtensions
Extensions
SV.CO
 
View controller life cycle
View controller life cycleView controller life cycle
View controller life cycle
SV.CO
 
Controls in action
Controls in actionControls in action
Controls in action
SV.CO
 
Auto layout and stack views
Auto layout and stack viewsAuto layout and stack views
Auto layout and stack views
SV.CO
 
Tab bar controllers
Tab bar controllersTab bar controllers
Tab bar controllers
SV.CO
 

More from SV.CO (20)

Handout level-1-module-1
Handout   level-1-module-1Handout   level-1-module-1
Handout level-1-module-1
 
Persistence And Documents
Persistence And DocumentsPersistence And Documents
Persistence And Documents
 
Building complex input screens
Building complex input screensBuilding complex input screens
Building complex input screens
 
Working with the Web: 
Decoding JSON
Working with the Web: 
Decoding JSONWorking with the Web: 
Decoding JSON
Working with the Web: 
Decoding JSON
 
Saving Data
Saving DataSaving Data
Saving Data
 
Alerts notification
Alerts notificationAlerts notification
Alerts notification
 
Practical animation
Practical animationPractical animation
Practical animation
 
Segues and navigation controllers
Segues and navigation controllersSegues and navigation controllers
Segues and navigation controllers
 
Camera And Email
Camera And EmailCamera And Email
Camera And Email
 
Scroll views
Scroll viewsScroll views
Scroll views
 
Intermediate table views
Intermediate table viewsIntermediate table views
Intermediate table views
 
Table views
Table viewsTable views
Table views
 
Closures
ClosuresClosures
Closures
 
Protocols
ProtocolsProtocols
Protocols
 
App anatomy and life cycle
App anatomy and life cycleApp anatomy and life cycle
App anatomy and life cycle
 
Extensions
ExtensionsExtensions
Extensions
 
View controller life cycle
View controller life cycleView controller life cycle
View controller life cycle
 
Controls in action
Controls in actionControls in action
Controls in action
 
Auto layout and stack views
Auto layout and stack viewsAuto layout and stack views
Auto layout and stack views
 
Tab bar controllers
Tab bar controllersTab bar controllers
Tab bar controllers
 

Recently uploaded

How to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in useHow to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in use
Celine George
 
How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17
Celine George
 
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
220711130083 SUBHASHREE RAKSHIT  Internet resources for social science220711130083 SUBHASHREE RAKSHIT  Internet resources for social science
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
Kalna College
 
Ch-4 Forest Society and colonialism 2.pdf
Ch-4 Forest Society and colonialism 2.pdfCh-4 Forest Society and colonialism 2.pdf
Ch-4 Forest Society and colonialism 2.pdf
lakshayrojroj
 
Accounting for Restricted Grants When and How To Record Properly
Accounting for Restricted Grants  When and How To Record ProperlyAccounting for Restricted Grants  When and How To Record Properly
Accounting for Restricted Grants When and How To Record Properly
TechSoup
 
INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION
INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION
INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION
ShwetaGawande8
 
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxxSimple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
RandolphRadicy
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
deepaannamalai16
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
danielkiash986
 
BPSC-105 important questions for june term end exam
BPSC-105 important questions for june term end examBPSC-105 important questions for june term end exam
BPSC-105 important questions for june term end exam
sonukumargpnirsadhan
 
220711130100 udita Chakraborty Aims and objectives of national policy on inf...
220711130100 udita Chakraborty  Aims and objectives of national policy on inf...220711130100 udita Chakraborty  Aims and objectives of national policy on inf...
220711130100 udita Chakraborty Aims and objectives of national policy on inf...
Kalna College
 
Contiguity Of Various Message Forms - Rupam Chandra.pptx
Contiguity Of Various Message Forms - Rupam Chandra.pptxContiguity Of Various Message Forms - Rupam Chandra.pptx
Contiguity Of Various Message Forms - Rupam Chandra.pptx
Kalna College
 
adjectives.ppt for class 1 to 6, grammar
adjectives.ppt for class 1 to 6, grammaradjectives.ppt for class 1 to 6, grammar
adjectives.ppt for class 1 to 6, grammar
7DFarhanaMohammed
 
KHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGH
KHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGHKHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGH
KHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGH
shreyassri1208
 
欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】
欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】
欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】
andagarcia212
 
Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10
nitinpv4ai
 
HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.
deepaannamalai16
 
Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)
nitinpv4ai
 
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
indexPub
 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
ImMuslim
 

Recently uploaded (20)

How to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in useHow to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in use
 
How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17
 
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
220711130083 SUBHASHREE RAKSHIT  Internet resources for social science220711130083 SUBHASHREE RAKSHIT  Internet resources for social science
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
 
Ch-4 Forest Society and colonialism 2.pdf
Ch-4 Forest Society and colonialism 2.pdfCh-4 Forest Society and colonialism 2.pdf
Ch-4 Forest Society and colonialism 2.pdf
 
Accounting for Restricted Grants When and How To Record Properly
Accounting for Restricted Grants  When and How To Record ProperlyAccounting for Restricted Grants  When and How To Record Properly
Accounting for Restricted Grants When and How To Record Properly
 
INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION
INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION
INTRODUCTION TO HOSPITALS & AND ITS ORGANIZATION
 
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxxSimple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
 
BPSC-105 important questions for june term end exam
BPSC-105 important questions for june term end examBPSC-105 important questions for june term end exam
BPSC-105 important questions for june term end exam
 
220711130100 udita Chakraborty Aims and objectives of national policy on inf...
220711130100 udita Chakraborty  Aims and objectives of national policy on inf...220711130100 udita Chakraborty  Aims and objectives of national policy on inf...
220711130100 udita Chakraborty Aims and objectives of national policy on inf...
 
Contiguity Of Various Message Forms - Rupam Chandra.pptx
Contiguity Of Various Message Forms - Rupam Chandra.pptxContiguity Of Various Message Forms - Rupam Chandra.pptx
Contiguity Of Various Message Forms - Rupam Chandra.pptx
 
adjectives.ppt for class 1 to 6, grammar
adjectives.ppt for class 1 to 6, grammaradjectives.ppt for class 1 to 6, grammar
adjectives.ppt for class 1 to 6, grammar
 
KHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGH
KHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGHKHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGH
KHUSWANT SINGH.pptx ALL YOU NEED TO KNOW ABOUT KHUSHWANT SINGH
 
欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】
欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】
欧洲杯下注-欧洲杯下注押注官网-欧洲杯下注押注网站|【​网址​🎉ac44.net🎉​】
 
Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10
 
HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.
 
Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)
 
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
 

Gestures

  • 1. CS193p Fall 2017-18 Stanford CS193p Developing Applications for iOS Fall 2017-18
  • 2. CS193p Fall 2017-18 Today Views PlayingCard demo continued Gestures Getting multitouch input from users Demo: Manipulating our Playing Card Swiping, tapping and pinching
  • 3. CS193p Fall 2017-18 Demo PlayingCard continued … Now that we have our PlayingCard Model, time to implement our Controller and View Creating a custom UIView subclass Drawing with Core Graphics and UIBezierPath UIView’s contentMode (i.e. redraw vs. scaling the bits on bounds change) Drawing with transparency More NSAttributedString dictionary keys … UIFont and NSParagraphStyle UIFontMetrics scaling for users who want larger fonts Managing subviews of your custom UIView Using isHidden CGAffineTransform Constraint Priority Assets.xcassets and drawing with UIImage @IBDesignable and @IBInspectable Using didSet to ensure redraws and relayouts when properties change
  • 4. CS193p Fall 2017-18 Gestures We’ve seen how to draw in a UIView, how do we get touches? We can get notified of the raw touch events (touch down, moved, up, etc.) Or we can react to certain, predefined “gestures.” The latter is the way to go! Gestures are recognized by instances of UIGestureRecognizer The base class is “abstract.” We only actually use concrete subclasses to recognize. There are two sides to using a gesture recognizer 1. Adding a gesture recognizer to a UIView (asking the UIView to “recognize” that gesture) 2. Providing a method to “handle” that gesture (not necessarily handled by the UIView) Usually the first is done by a Controller Though occasionally a UIView will do this itself if the gesture is integral to its existence The second is provided either by the UIView or a Controller Depending on the situation. We’ll see an example of both in our demo.
  • 5. CS193p Fall 2017-18 Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Gestures We can configure it to do so in the property observer for the outlet to that UIView …
  • 6. CS193p Fall 2017-18 @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. Gestures The property observer’s didSet code gets called when iOS hooks up this outlet at runtime We can configure it to do so in the property observer for the outlet to that UIView …
  • 7. CS193p Fall 2017-18 @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. Gestures The property observer’s didSet code gets called when iOS hooks up this outlet at runtime Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans) We can configure it to do so in the property observer for the outlet to that UIView …
  • 8. CS193p Fall 2017-18 @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. Gestures The property observer’s didSet code gets called when iOS hooks up this outlet at runtime Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans) The target gets notified when the gesture is recognized (here it’s the Controller itself) We can configure it to do so in the property observer for the outlet to that UIView …
  • 9. CS193p Fall 2017-18 Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Gestures The property observer’s didSet code gets called when iOS hooks up this outlet at runtime Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans) The target gets notified when the gesture is recognized (here it’s the Controller itself) The action is the method invoked on recognition (that method’s argument? the recognizer) We can configure it to do so in the property observer for the outlet to that UIView …
  • 10. CS193p Fall 2017-18 Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Gestures The property observer’s didSet code gets called when iOS hooks up this outlet at runtime Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans) The target gets notified when the gesture is recognized (here it’s the Controller itself) The action is the method invoked on recognition (that method’s argument? the recognizer) Here we ask the UIView to actually start trying to recognize this gesture in its bounds We can configure it to do so in the property observer for the outlet to that UIView …
  • 11. CS193p Fall 2017-18 @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Adding a gesture recognizer to a UIView Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture. @IBOutlet weak var pannableView: UIView { didSet { let panGestureRecognizer = UIPanGestureRecognizer( target: self, action: #selector(ViewController.pan(recognizer:)) ) pannableView.addGestureRecognizer(panGestureRecognizer) } } Gestures The property observer’s didSet code gets called when iOS hooks up this outlet at runtime Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans) The target gets notified when the gesture is recognized (here it’s the Controller itself) The action is the method invoked on recognition (that method’s argument? the recognizer) Here we ask the UIView to actually start trying to recognize this gesture in its bounds Let’s talk about how we implement the handler … We can configure it to do so in the property observer for the outlet to that UIView …
  • 12. CS193p Fall 2017-18 Gestures A handler for a gesture needs gesture-specific information So each concrete subclass provides special methods for handling that type of gesture For example, UIPanGestureRecognizer provides 3 methods func translation(in: UIView?) -> CGPoint // cumulative since start of recognition func velocity(in: UIView?) -> CGPoint // how fast the finger is moving (points/s) func setTranslation(CGPoint, in: UIView?) This last one is interesting because it allows you to reset the translation so far By resetting the translation to zero all the time, you end up getting “incremental” translation The abstract superclass also provides state information var state: UIGestureRecognizerState { get } This sits around in .possible until recognition starts For a continuous gesture (e.g. pan), it moves from .began thru repeated .changed to .ended For a discrete (e.g. a swipe) gesture, it goes straight to .ended or .recognized. It can go to .failed or .cancelled too, so watch out for those!
  • 13. CS193p Fall 2017-18 func pan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .changed: fallthrough case .ended: let translation = recognizer.translation(in: pannableView) // update anything that depends on the pan gesture using translation.x and .y recognizer.setTranslation(CGPoint.zero, in: pannableView) default: break } } So, given this information, what would the pan handler look like? Gestures Remember that the action was pan(recognizer:)
  • 14. CS193p Fall 2017-18 func pan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .changed: fallthrough case .ended: let translation = recognizer.translation(in: pannableView) // update anything that depends on the pan gesture using translation.x and .y recognizer.setTranslation(CGPoint.zero, in: pannableView) default: break } } So, given this information, what would the pan handler look like? Gestures Remember that the action was pan(recognizer:) We are only going to do anything when the finger moves or lifts up off the device’s surface
  • 15. CS193p Fall 2017-18 func pan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .changed: fallthrough case .ended: let translation = recognizer.translation(in: pannableView) // update anything that depends on the pan gesture using translation.x and .y recognizer.setTranslation(CGPoint.zero, in: pannableView) default: break } } So, given this information, what would the pan handler look like? Gestures Remember that the action was pan(recognizer:) We are only going to do anything when the finger moves or lifts up off the device’s surface fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too)
  • 16. CS193p Fall 2017-18 func pan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .changed: fallthrough case .ended: let translation = recognizer.translation(in: pannableView) // update anything that depends on the pan gesture using translation.x and .y recognizer.setTranslation(CGPoint.zero, in: pannableView) default: break } } So, given this information, what would the pan handler look like? Gestures Remember that the action was pan(recognizer:) We are only going to do anything when the finger moves or lifts up off the device’s surface fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too) Here we get the location of the pan in the pannableView’s coordinate system
  • 17. CS193p Fall 2017-18 func pan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .changed: fallthrough case .ended: let translation = recognizer.translation(in: pannableView) // update anything that depends on the pan gesture using translation.x and .y recognizer.setTranslation(CGPoint.zero, in: pannableView) default: break } } So, given this information, what would the pan handler look like? Gestures Remember that the action was pan(recognizer:) We are only going to do anything when the finger moves or lifts up off the device’s surface fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too) Here we get the location of the pan in the pannableView’s coordinate system Now we do whatever we want with that information
  • 18. CS193p Fall 2017-18 So, given this information, what would the pan handler look like? func pan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .changed: fallthrough case .ended: let translation = recognizer.translation(in: pannableView) // update anything that depends on the pan gesture using translation.x and .y recognizer.setTranslation(CGPoint.zero, in: pannableView) default: break } } Gestures Remember that the action was pan(recognizer:) We are only going to do anything when the finger moves or lifts up off the device’s surface fallthrough is “execute the code for the next case down” (case .changed,.ended: ok too) Here we get the location of the pan in the pannableView’s coordinate system Now we do whatever we want with that information By resetting the translation, the next one we get will be incremental movement
  • 19. CS193p Fall 2017-18 Gestures UIPinchGestureRecognizer var scale: CGFloat // not read-only (can reset) var velocity: CGFloat { get } // scale factor per second UIRotationGestureRecognizer var rotation: CGFloat // not read-only (can reset); in radians var velocity: CGFloat { get } // radians per second UISwipeGestureRecognizer Set up the direction and number of fingers you want var direction: UISwipeGestureRecoginzerDirection // which swipe directions you want var numberOfTouchesRequired: Int // finger count
  • 20. CS193p Fall 2017-18 Gestures UITapGestureRecognizer This is discrete, but you should check for .ended to actually do something. Set up the number of taps and fingers you want … var numberOfTapsRequired: Int // single tap, double tap, etc. var numberOfTouchesRequired: Int // finger count UILongPressRecognizer This is a continuous (not discrete) gesture (i.e. you’ll get .changed if the finger moves) You still configure it up-front … var minimumPressDuration: TimeInterval // how long to hold before its recognized var numberOfTouchesRequired: Int // finger count var allowableMovement: CGFloat // how far finger can move and still recognize Very important to pay attention to .cancelled because of drag and drop
  • 21. CS193p Fall 2017-18 Demo Code Download the demo code from today’s lecture.