3D TOUCH An introduction to 3D Touch for Swift developers Simon Gladman for Swift London / October 2015

HELLO FLEX MONKEY • Blog: flexmonkey.blogspot.co.uk • GitHub: github.com/FlexMonkey • Twitter: @FlexMonkey

3D TOUCH FOR USERS

3D TOUCH FOR USERS • Peek

3D TOUCH FOR USERS • Peek • Preview Actions

3D TOUCH FOR USERS • Peek • Preview Actions • Pop

3D TOUCH FOR USERS • Peek • Preview Actions • Pop • Quick Actions

3D TOUCH FOR USERS • Peek • Preview Actions • Pop • Quick Actions • Pressure Sensitivity

3D TOUCH FOR DEVS • Simple API • Check device supports 3D Touch traitCollection.forceTouchCapability == UIForceTouchCapability.Available

• Simple API • Getting force value override func touchesBegan(touches: Set, withEvent event: UIEvent?) { guard let touch = touches.first else { return } let normalisedForce = touch.force / touch.maximumPossibleForce print(normalisedForce) }

• Simple API • Implementing peek and pop registerForPreviewingWithDelegate(delegate, sourceView: sourceView) • sourceView reacts to deep press • delegate must implement UIViewControllerPreviewingDelegate

• Peeking & Popping with Previewing Delegate • Protocol contains func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController?

• Peeking & Popping with Previewing Delegate • Protocol contains func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController)

3D TOUCH: PEEKING • Peeking - a deep press func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController?

• Peeking func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { let peek = PeekViewController(hsl: hsl, delegate: previewingContext.delegate) return peek }

• Peeking let hsl: HSL unowned let delegate: UIViewControllerPreviewingDelegate required init(hsl: HSL, delegate: UIViewControllerPreviewingDelegate) { self.hsl = hsl self.delegate = delegate super.init(nibName: nil, bundle: nil) let color = UIColor(hue: hsl.hue, saturation: hsl.saturation, brightness: hsl.lightness, alpha: 1) label.text = "Your color: \(color.getHex())" label.textAlignment = NSTextAlignment.Center smallSwatch.backgroundColor = color }

No content

3D TOUCH: PREVIEW ACTIONS • Preview Actions • The previewing delegate simply needs to implement previewActions()

• Preview Actions enum ColorPresets: String { case Red, Green, Blue } var previewActions: [UIPreviewActionItem] { return [ColorPresets.Red, ColorPresets.Green, ColorPresets.Blue].map { UIPreviewAction(title: $0.rawValue, style: UIPreviewActionStyle.Default, handler: { (previewAction, viewController) in (viewController as? PeekViewController)?.updateColor(previewAction) }) } }

• Preview Actions func updateColor(previewAction: UIPreviewActionItem) { guard let delegate = delegate as? ChromaTouchViewController, preset = ColorPresets(rawValue: previewAction.title) else { return } let hue: CGFloat switch preset { case .Blue: hue = 0.667 case .Green: hue = 0.333 case .Red: hue = 0 } delegate.hsl = HSL(hue: hue, saturation: 1, lightness: 1) }

No content

3D TOUCH: POPPING • Popping - a deeper press func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController)

• Popping func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) { swatch.userInteractionEnabled = false hslSlidersStackView.hidden = true }

No content

3D TOUCH: PRESSURE SENSITIVITY • Touch gestures have ‘x’ and ‘y’ coordinates • Now have a ‘z’ coordinate corresponding to the pressure of the touch

• Override touchesMoved(): override func touchesMoved(touches: Set, withEvent event: UIEvent?) { guard let touch = touches.first else { return } let touchLocation = touch.locationInView(self) let force = touch.force let maximumPossibleForce = touch.maximumPossibleForce let normalisedXPosition = touchLocation.x / frame.width let normalisedYPosition = touchLocation.y / frame.height let normalisedZPosition = force / maximumPossibleForce hsl = HSL(hue: normalisedXPosition, saturation: normalisedYPosition, lightness: normalisedZPosition) sendActionsForControlEvents(.ValueChanged) }

No content

GESTURE RECOGNISERS • As an alternative to overriding a control’s touch handling methods • By extending UIGestureRecognizer let deepPressGestureRecognizer = DeepPressGestureRecognizer(target: self, action: "deepPressHandler:", threshold: 0.75) button.addGestureRecognizer(deepPressGestureRecognizer)

• Handle user’s actions in gesture recogniser’s touch handlers override func touchesMoved(touches: Set, withEvent event: UIEvent) { guard let view = view, touch = touches.first where touch.force != 0 && touch.maximumPossibleForce != 0 else { return } if !deepPressed && (touch.force / touch.maximumPossibleForce) >= threshold { state = UIGestureRecognizerState.Began deepPressed = true } else if deepPressed && (touch.force / touch.maximumPossibleForce) < threshold { state = UIGestureRecognizerState.Ended deepPressed = false } }

TOUCH COALESCING • touchesMoved() samples at up to 60 hertz

TOUCH COALESCING • touchesMoved() samples at up to 60 hertz • iPhone 6s has a touch sample rate of 120 hertz

TOUCH COALESCING • touchesMoved() samples at up to 60 hertz • iPhone 6s has a touch sample rate of 120 hertz • iPad Pro will sample touches at 240 hertz

• The missing touches can be accessed through the event’s coalescedTouches override func touchesMoved(touches: Set, withEvent event: UIEvent?) { super.touchesMoved(touches, withEvent: event) guard let touch = touches.first, coalescedTouches = event?.coalescedTouchesForTouch(touch) else { return } for coalescedTouch in coalescedTouches { let locationInView = coalescedTouch.locationInView(view) print(locationInView) } }

No content

SOME DEMO APPS

No content

No content

No content

No content

No content

http://goo.gl/rzPExI flexmonkey.blogspot.co.uk github.com/FlexMonkey