3d touch: preparando sua app para o futuro do ios

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

Upload: rodrigo-borges

Post on 08-Apr-2017

105 views

Category:

Mobile


0 download

TRANSCRIPT

Page 1: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch: Preparando sua app para o futuro do iOS

Rodrigo Borges Soares

Page 2: 3D Touch: Preparando sua app para o futuro do iOS

Introdução

Mobile Developer & Co-Founder @ Meatless

iOS Developer @ VivaReal

TwitterLinkedInMedium

rdgborges

Page 3: 3D Touch: Preparando sua app para o futuro do iOS

Outline

1. 3D Touch: Ontem e hoje

2. Caso de uso: Meatless

3. Implementando o Peek & Pop

4. Referências

Page 4: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch: Ontem

Page 5: 3D Touch: Preparando sua app para o futuro do iOS

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

Page 6: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch ontem: iOS 9

Peek & Pop

Page 7: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch ontem: iOS 9

Quick Actions

Page 8: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch: Hoje

Page 9: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch hoje: Notifications

Page 10: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch hoje: Widgets

Page 11: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch hoje: Groups

Page 12: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch hoje: Everywhere

Page 13: 3D Touch: Preparando sua app para o futuro do iOS

3D Touch hoje: Everywhere

Page 14: 3D Touch: Preparando sua app para o futuro do iOS

O 3D Touch se tornará cada vez mais natural para o

usuário

Page 15: 3D Touch: Preparando sua app para o futuro do iOS

Peek & Pop

Page 16: 3D Touch: Preparando sua app para o futuro do iOS
Page 17: 3D Touch: Preparando sua app para o futuro do iOS

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

Page 18: 3D Touch: Preparando sua app para o futuro do iOS

Peek & Pop

Page 19: 3D Touch: Preparando sua app para o futuro do iOS

Peek & Actions!

Page 20: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Popif #available(iOS 9.1, *) {

Peek & Pop pode ser configurado direto no Storyboard e Segues 🎉

} else {

UIViewControllerPreviewingDelegate 👌

}

Page 21: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & PopStoryboard & Segues

Page 22: 3D Touch: Preparando sua app para o futuro do iOS

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

Page 23: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop1. Registrando o View Controller

func setupForceTouchIsAvailable() {

if #available(iOS 9.0, *) {

if traitCollection.forceTouchCapability == .Available {

registerForPreviewingWithDelegate(self, sourceView: self.collectionView)

}

}

}

Page 24: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop1. Registrando o View Controller

func setupForceTouchIsAvailable() {

if #available(iOS 9.0, *) {

if traitCollection.forceTouchCapability == .Available {

registerForPreviewingWithDelegate(self, sourceView: self.collectionView)

}

}

}

Page 25: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop1. Registrando o View Controller

func setupForceTouchIsAvailable() {

if #available(iOS 9.0, *) {

if traitCollection.forceTouchCapability == .Available {

registerForPreviewingWithDelegate(self, sourceView: self.collectionView)

}

}

}

Page 26: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop1. Registrando o View Controller

func setupForceTouchIsAvailable() {

if #available(iOS 9.0, *) {

if traitCollection.forceTouchCapability == .Available {

registerForPreviewingWithDelegate(self, sourceView: self.collectionView)

}

}

}

Page 27: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop2. UIViewControllerPreviewingDelegate

func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { }

func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) { }

Page 28: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Popfunc 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

}

Page 29: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Popfunc 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

}

Page 30: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Popfunc 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

}

Page 31: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Popfunc 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

}

Page 32: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Popfunc 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

}

Page 33: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop3. 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]

}

}

Page 34: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop3. 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]

}

}

Page 35: 3D Touch: Preparando sua app para o futuro do iOS

Implementando o Peek & Pop3. 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]

}

}

Page 36: 3D Touch: Preparando sua app para o futuro do iOS

Peek & Pop & Actions!

Page 37: 3D Touch: Preparando sua app para o futuro do iOS

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

Page 38: 3D Touch: Preparando sua app para o futuro do iOS

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

Page 39: 3D Touch: Preparando sua app para o futuro do iOS

Obrigado!

Rodrigo [email protected]/in/rdgborges