Nessa palestra vamos falar sobre o 3D Touch e como ele será uma das bases de interação dos usuários na próxima versão do iOS. Mostrarei como integrar sua app com recursos do 3D Touch como o Peek & Pop e discutiremos sobre as novidades lançadas na WWDC 2016.

1. 3D Touch: Preparando sua app
para o futuro do iOS
Rodrigo Borges Soares

2. Introdução
Mobile Developer & Co-Founder @ Meatless
iOS Developer @ VivaReal
Twitter
LinkedIn
Medium
rdgborges

3. Outline
1. 3D Touch: Ontem e hoje
2. Caso de uso: Meatless
3. Implementando o Peek & Pop
4. Referências

4. 3D Touch: Ontem

5. 3D Touch ontem: iOS 9
Lançado com os iPhones 6S e 6S+
Nova forma de interação usando o
nível de força durante o toque
Evolução do Force Touch do Apple
Watch

6. 3D Touch ontem: iOS 9
Peek & Pop

7. 3D Touch ontem: iOS 9
Quick Actions

8. 3D Touch: Hoje

9. 3D Touch hoje: Notifications

10. 3D Touch hoje: Widgets

11. 3D Touch hoje: Groups

12. 3D Touch hoje: Everywhere

13. 3D Touch hoje: Everywhere

14. O 3D Touch se tornará cada
vez mais natural para o
usuário

15. Peek & Pop

17. Peek & Pop
Um caso de uso real: Meatless
No cardápio, usuários poderiam pré-visualizar
foto ampliada, descrição e modificadores
Ação rápida para adicionar ao carrinho

18. Peek & Pop

19. Peek & Actions!

20. Implementando o Peek & Pop
if #available(iOS 9.1, *) {
Peek & Pop pode ser configurado direto no
Storyboard e Segues 🎉
} else {
UIViewControllerPreviewingDelegate 👌
}

21. Implementando o Peek & Pop
Storyboard & Segues

22. Implementando o Peek & Pop
1. Registrar o View Controller para gerenciar o Peek & Pop
2. Implementar os métodos do UIViewControllerPreviewingDelegate
3. Implementar o método previewActionItems() no View Controller que
é mostrado no Peek
UIViewControllerPreviewingDelegate

23. Implementando o Peek & Pop
1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}

24. Implementando o Peek & Pop
1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}

25. Implementando o Peek & Pop
1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}

26. Implementando o Peek & Pop
1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}

27. Implementando o Peek & Pop
2. UIViewControllerPreviewingDelegate
func previewingContext(previewingContext: UIViewControllerPreviewing,
viewControllerForLocation location: CGPoint) -> UIViewController? { }
func previewingContext(previewingContext: UIViewControllerPreviewing,
commitViewController viewControllerToCommit: UIViewController) { }

28. Implementando o Peek & Pop
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
let path = collectionView.indexPathForItemAtPoint(location)
guard let indexPath = path, let cell = self.collectionView.cellForItemAtIndexPath(indexPath) else {
return nil
}
guard let itemDetailsNavigationController = storyboard?.instantiateViewControllerWithIdentifier("itemDetailsNavigationControllerIdentifier")
as? ItemDetailsNavigationController else { return nil }
guard let itemDetailsViewController = itemDetailsNavigationController.viewControllers[0] as? ItemDetailsViewController else { return nil }
let item = self.itemsByCategory[indexPath.section-1].items[indexPath.row]
itemDetailsViewController.item = item
itemDetailsViewController.preferredContentSize = CGSize(width: 0.0, height: 0.0)
previewingContext.sourceRect = self.collectionView.convertRect(cell.frame, fromCoordinateSpace: self.collectionView)
return itemDetailsNavigationController
}

29. Implementando o Peek & Pop
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
let path = collectionView.indexPathForItemAtPoint(location)
guard let indexPath = path, let cell = self.collectionView.cellForItemAtIndexPath(indexPath) else {
return nil
}
guard let itemDetailsNavigationController = storyboard?.instantiateViewControllerWithIdentifier("itemDetailsNavigationControllerIdentifier")
as? ItemDetailsNavigationController else { return nil }
guard let itemDetailsViewController = itemDetailsNavigationController.viewControllers[0] as? ItemDetailsViewController else { return nil }
let item = self.itemsByCategory[indexPath.section-1].items[indexPath.row]
itemDetailsViewController.item = item
itemDetailsViewController.preferredContentSize = CGSize(width: 0.0, height: 0.0)
previewingContext.sourceRect = self.collectionView.convertRect(cell.frame, fromCoordinateSpace: self.collectionView)
return itemDetailsNavigationController
}

30. Implementando o Peek & Pop
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
let path = collectionView.indexPathForItemAtPoint(location)
guard let indexPath = path, let cell = self.collectionView.cellForItemAtIndexPath(indexPath) else {
return nil
}
guard let itemDetailsNavigationController = storyboard?.instantiateViewControllerWithIdentifier("itemDetailsNavigationControllerIdentifier")
as? ItemDetailsNavigationController else { return nil }
guard let itemDetailsViewController = itemDetailsNavigationController.viewControllers[0] as? ItemDetailsViewController else { return nil }
let item = self.itemsByCategory[indexPath.section-1].items[indexPath.row]
itemDetailsViewController.item = item
itemDetailsViewController.preferredContentSize = CGSize(width: 0.0, height: 0.0)
previewingContext.sourceRect = self.collectionView.convertRect(cell.frame, fromCoordinateSpace: self.collectionView)
return itemDetailsNavigationController
}

31. Implementando o Peek & Pop
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
let path = collectionView.indexPathForItemAtPoint(location)
guard let indexPath = path, let cell = self.collectionView.cellForItemAtIndexPath(indexPath) else {
return nil
}
guard let itemDetailsNavigationController = storyboard?.instantiateViewControllerWithIdentifier("itemDetailsNavigationControllerIdentifier")
as? ItemDetailsNavigationController else { return nil }
guard let itemDetailsViewController = itemDetailsNavigationController.viewControllers[0] as? ItemDetailsViewController else { return nil }
let item = self.itemsByCategory[indexPath.section-1].items[indexPath.row]
itemDetailsViewController.item = item
itemDetailsViewController.preferredContentSize = CGSize(width: 0.0, height: 0.0)
previewingContext.sourceRect = self.collectionView.convertRect(cell.frame, fromCoordinateSpace: self.collectionView)
return itemDetailsNavigationController
}

32. Implementando o Peek & Pop
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
let path = collectionView.indexPathForItemAtPoint(location)
guard let indexPath = path, let cell = self.collectionView.cellForItemAtIndexPath(indexPath) else {
return nil
}
guard let itemDetailsNavigationController = storyboard?.instantiateViewControllerWithIdentifier("itemDetailsNavigationControllerIdentifier")
as? ItemDetailsNavigationController else { return nil }
guard let itemDetailsViewController = itemDetailsNavigationController.viewControllers[0] as? ItemDetailsViewController else { return nil }
let item = self.itemsByCategory[indexPath.section-1].items[indexPath.row]
itemDetailsViewController.item = item
itemDetailsViewController.preferredContentSize = CGSize(width: 0.0, height: 0.0)
previewingContext.sourceRect = self.collectionView.convertRect(cell.frame, fromCoordinateSpace: self.collectionView)
return itemDetailsNavigationController
}

33. Implementando o Peek & Pop
3. Preview Actions
class ItemDetailsNavigationController: UINavigationController {
@available(iOS 9.0, *)
override func previewActionItems() -> [UIPreviewActionItem] {
let previewAction = UIPreviewAction(title: "Adicionar ao carrinho", style: .Default, handler: { action, viewController in
if self.viewControllers.count == 0 {
return
}
if let itemDetailsViewController = self.viewControllers[0] as? ItemDetailsViewController {
itemDetailsViewController.addToCartFromPeek()
}
})
return [previewAction]
}
}

34. Implementando o Peek & Pop
3. Preview Actions
class ItemDetailsNavigationController: UINavigationController {
@available(iOS 9.0, *)
override func previewActionItems() -> [UIPreviewActionItem] {
let previewAction = UIPreviewAction(title: "Adicionar ao carrinho", style: .Default, handler: { action, viewController in
if self.viewControllers.count == 0 {
return
}
if let itemDetailsViewController = self.viewControllers[0] as? ItemDetailsViewController {
itemDetailsViewController.addToCartFromPeek()
}
})
return [previewAction]
}
}

35. Implementando o Peek & Pop
3. Preview Actions
class ItemDetailsNavigationController: UINavigationController {
@available(iOS 9.0, *)
override func previewActionItems() -> [UIPreviewActionItem] {
let previewAction = UIPreviewAction(title: "Adicionar ao carrinho", style: .Default, handler: { action, viewController in
if self.viewControllers.count == 0 {
return
}
if let itemDetailsViewController = self.viewControllers[0] as? ItemDetailsViewController {
itemDetailsViewController.addToCartFromPeek()
}
})
return [previewAction]
}
}

36. Peek & Pop & Actions!

37. Desafio
Pense onde você poderia integrar o 3D Touch na sua app e invista
alguns poucos minutos implementando. 😉

38. Referências
1. iOS Developer Library — Getting Started with 3D Touch
2. iOS Developer Library — Peek and Pop Example
3. iOS Human Interface Guidelines—3D Touch
4. A Peek at 3D Touch—WWDC 2016
5. 3D Touch: Implementando uma ótima experiência para os usuários

39. Obrigado!
Rodrigo Borges
@rdgborges
linkedin.com/in/rdgborges