Post on 08-Apr-2017
3D Touch: Preparando sua app para o futuro do iOS
Rodrigo Borges Soares
Introdução
Mobile Developer & Co-Founder @ Meatless
iOS Developer @ VivaReal
TwitterLinkedInMedium
rdgborges
Outline
1. 3D Touch: Ontem e hoje
2. Caso de uso: Meatless
3. Implementando o Peek & Pop
4. Referências
3D Touch: Ontem
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
3D Touch ontem: iOS 9
Peek & Pop
3D Touch ontem: iOS 9
Quick Actions
3D Touch: Hoje
3D Touch hoje: Notifications
3D Touch hoje: Widgets
3D Touch hoje: Groups
3D Touch hoje: Everywhere
3D Touch hoje: Everywhere
O 3D Touch se tornará cada vez mais natural para o
usuário
Peek & Pop
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
Peek & Pop
Peek & Actions!
Implementando o Peek & Popif #available(iOS 9.1, *) {
Peek & Pop pode ser configurado direto no Storyboard e Segues 🎉
} else {
UIViewControllerPreviewingDelegate 👌
}
Implementando o Peek & PopStoryboard & Segues
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
Implementando o Peek & Pop1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}
Implementando o Peek & Pop1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}
Implementando o Peek & Pop1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}
Implementando o Peek & Pop1. Registrando o View Controller
func setupForceTouchIsAvailable() {
if #available(iOS 9.0, *) {
if traitCollection.forceTouchCapability == .Available {
registerForPreviewingWithDelegate(self, sourceView: self.collectionView)
}
}
}
Implementando o Peek & Pop2. UIViewControllerPreviewingDelegate
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { }
func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) { }
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
}
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
}
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
}
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
}
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
}
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]
}
}
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]
}
}
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]
}
}
Peek & Pop & Actions!
DesafioPense onde você poderia integrar o 3D Touch na sua app e invista alguns poucos minutos implementando. 😉
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
Obrigado!
Rodrigo Borges@rdgborgeslinkedin.com/in/rdgborges