SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
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.

Weitere ähnliche Inhalte

Ähnlich wie 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 animationsNaman 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
 
Custom view
Custom viewCustom view
Custom viewSV.CO
 
Android App Development - 05 Action bar
Android App Development - 05 Action barAndroid App Development - 05 Action bar
Android App Development - 05 Action barDiego Grancini
 
Adopting 3D Touch in your apps
Adopting 3D Touch in your appsAdopting 3D Touch in your apps
Adopting 3D Touch in your appsJuan 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.pdfSatawareTechnologies4
 
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. iPadPaul Ardeleanu
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on AndroidCody Engel
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in AndroidRobert Cooper
 
ReactiveCocoa in Practice
ReactiveCocoa in PracticeReactiveCocoa in Practice
ReactiveCocoa in PracticeOutware Mobile
 
Displaying additional image types in XMetaL
Displaying additional image types in XMetaLDisplaying additional image types in XMetaL
Displaying additional image types in XMetaLXMetaL
 
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 developersPavel Lahoda
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon 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 & KotlinMiquel Beltran Febrer
 

Ähnlich wie 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
 

Mehr von SV.CO

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

Mehr von 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
 

Kürzlich hochgeladen

Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptxmary850239
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdfMr Bounab Samir
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseCeline George
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQuiz Club NITW
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQuiz Club NITW
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1GloryAnnCastre1
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operationalssuser3e220a
 
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfNarcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfPrerana Jadhav
 
Mental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young mindsMental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young mindsPooky Knightsmith
 
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...MerlizValdezGeronimo
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxVanesaIglesias10
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataBabyAnnMotar
 
How to Manage Engineering to Order in Odoo 17
How to Manage Engineering to Order in Odoo 17How to Manage Engineering to Order in Odoo 17
How to Manage Engineering to Order in Odoo 17Celine George
 

Kürzlich hochgeladen (20)

Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 Database
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operational
 
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfNarcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdf
 
Mental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young mindsMental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young minds
 
Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"
 
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptxINCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptx
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped data
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
How to Manage Engineering to Order in Odoo 17
How to Manage Engineering to Order in Odoo 17How to Manage Engineering to Order in Odoo 17
How to Manage Engineering to Order in Odoo 17
 

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.