An introduction to 3D Touch for Swift developers

My Swift London talk of October 19, 2015 discussing 3D Touch for Swift

Transcript

1. 3D TOUCH An introduction to 3D Touch for Swift developers Simon Gladman for Swift London / October 2015
2. HELLO FLEX MONKEY • Blog: flexmonkey.blogspot.co.uk • GitHub: github.com/FlexMonkey • Twitter: @FlexMonkey
3. 3D TOUCH FOR USERS
4. 3D TOUCH FOR USERS • Peek
5. 3D TOUCH FOR USERS • Peek • Preview Actions
6. 3D TOUCH FOR USERS • Peek • Preview Actions • Pop
7. 3D TOUCH FOR USERS • Peek • Preview Actions • Pop • Quick Actions
8. 3D TOUCH FOR USERS • Peek • Preview Actions • Pop • Quick Actions • Pressure Sensitivity
9. 3D TOUCH FOR DEVS • Simple API • Check device supports 3D Touch traitCollection.forceTouchCapability == UIForceTouchCapability.Available
10. • Simple API • Getting force value override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { guard let touch = touches.first else { return } let normalisedForce = touch.force / touch.maximumPossibleForce print(normalisedForce) }
11. • Simple API • Implementing peek and pop registerForPreviewingWithDelegate(delegate, sourceView: sourceView) • sourceView reacts to deep press • delegate must implement UIViewControllerPreviewingDelegate
12. • Peeking & Popping with Previewing Delegate • Protocol contains func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController?
13. • Peeking & Popping with Previewing Delegate • Protocol contains func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController)
14. 3D TOUCH: PEEKING • Peeking - a deep press func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController?
15. • Peeking func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { let peek = PeekViewController(hsl: hsl, delegate: previewingContext.delegate) return peek }
16. • 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 }
18. 3D TOUCH: PREVIEW ACTIONS • Preview Actions • The previewing delegate simply needs to implement previewActions()
19. • 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) }) } }
20. • 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) }
22. 3D TOUCH: POPPING • Popping - a deeper press func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController)
23. • Popping func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) { swatch.userInteractionEnabled = false hslSlidersStackView.hidden = true }
25. 3D TOUCH: PRESSURE SENSITIVITY • Touch gestures have ‘x’ and ‘y’ coordinates • Now have a ‘z’ coordinate corresponding to the pressure of the touch
26. • Override touchesMoved(): override func touchesMoved(touches: Set<UITouch>, 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) }
28. 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)
29. • Handle user’s actions in gesture recogniser’s touch handlers override func touchesMoved(touches: Set<UITouch>, 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 } }
30. TOUCH COALESCING • touchesMoved() samples at up to 60 hertz
31. TOUCH COALESCING • touchesMoved() samples at up to 60 hertz • iPhone 6s has a touch sample rate of 120 hertz
32. 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
33. • The missing touches can be accessed through the event’s coalescedTouches override func touchesMoved(touches: Set<UITouch>, 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) } }
35. SOME DEMO APPS
41. http://goo.gl/rzPExI flexmonkey.blogspot.co.uk github.com/FlexMonkey