Implementando o 3D Touch / Haptic Touch no iOS
Resumo
Antes de começar vamos resumir essa funcionalidade, apresentado ao mundo em 2016 junto do iPhone 6S / 6S Plus , o 3D Touch é uma tecnologia que reconhece o nível de pressão de toque na tela. Ele consegue reconhecer se você esta pressionando com força a tela e qual a intensidade de força.
No lançamento do iPhone XR a Apple removeu o ForceTouch e introduziu o Haptic Touch, que a nível de desenvolvimento não muda muita coisa, na verdade todos os apps compatíveis com o 3D Touch não precisaram ser atualizados, pois a forma de desenvolvimento é o mesmo . (SIM você vai fazer de uma forma e vai servir tanto para os iPhones antigos e os novos).
Este artigo ele é focado para os Desenvolvedores, mas é interessante para você que é UX Design conhecer este recurso, pois ele agrega valor e usabilidade para o app. Se você é um UX rola até o final que deixei um texto voltado para você .
Temos algumas maneiras de trabalhar com este recurso:
- Ações rápidas da tela inicial.
- UIKit “ peek and pop”
- Web view “peek and pop”
- Widgets na tela inicial
Existe varias outras formas e pretendo deixar artigos linkados aqui conforme for escrevendo. Hoje vamos trabalhar com as “Ações rápidas da tela inicial”
Ações rápidas da tela inicial
No iOS 9 a Apple adicionou o Home Screen Quick Actions, você pode testar isso em alguns Apps, se você tem o Whatsapp instalado em seu celular você poderá pressionar e segurar por alguns instantes e ver um menu com algunas opções surgir em sua tela
Quando o usuário seleciona uma ação rápida, seu aplicativo será iniciado. Se seu aplicativo estiver iniciado ou estiver suspenso (segundo plano ), ele será iniciado e o Delegate da aplicação irá receber a ação selecionada e você pode la criar a ação necessária. (Continue vendo este artigo que você vai ver um pouco mais sobre isso). Podemos ter até o momento até 4 ações rápidas, alem de uma quinta opção que ira aparecer automaticamente pelo sistema caso você tenha baixado o app pela AppStore, essa ação se chama “shareApp” e basicamente é uma ação para compartilhar seu app para algum amigo.
De maneira pratica, podemos separar essas ações em duas camadas.
- Estáticas : São ações pré definidas pelo desenvolvedor e elas ficaram sempre sendo exibidas na mesma ordem e com as mesmas funções.
- Dinâmicas : São ações que justamente como o nome diz, podem ter ações variadas de acordo com seu uso . Um bom exemplo disso é o app Mensagem, conforme você vai falando com as pessoas, elas vão aparecendo como um item.
Porem nem tudo são flores, você pode somente ter 4 itens no seu app sendo exibidos e as estáticas tem prioridade. Então se você configurar 3 estáticas e 3 dinâmicas, quando você for testar só verá as 3 estáticas no topo e a primeira das ações dinâmicas. Então isso deve ser levado em consideração .
Bora codar !
Estou partindo do principio que você já tenha um projeto criado, caso não , crie um projeto em branco para testar ou baixe este modelo . Eu irei seguir este artigo baseado neste modelo já criado ;)
Ações Estáticas
Abra o arquivo info.plist do seu projeto e crie um novo Array que você irá chamar de UIApplicationShortcutItems. Cada item deste Array será um dicionário que irá conter as propriedades das nossas ações rápidas.
Itens que podem conter neste dicionário. (lembrando que o tipo do dicionário é de [String: String]):
- UIApplicationShortcutItemType: Serve para passar ao delegate qual item foi selecionado na tela principal. Este item é obrigatório e deve ser exclusivo em sua aplicação.
- UIApplicationShortcutItemIconType: Serve para adicionar um ícone a sua ação. Basta adicionar o ícone em seus “Assets” e chamar pelo nome dele. Este item não é obrigatório, caso você não use o sistema irá adicionar um ícone de ponto no lugar.
- UIApplicationShortcutItemTitle : Este é o titulo que será exibido em sua ação rápida. Este item é obrigatório
- UIApplicationShortcutItemSubtitle: Este item trará uma breve descrição sobe a ação rápida. Ela não é obrigatória, caso não coloque o sistema irá apenas criar um botão menor .
- UIApplicationShortcutItemUserInfo: um dicionário que contém algumas informações extras que você deseja passar com a Ação Rápida.
Então teremos algo parecido com isso :
Dicas adicionais : Em UIApplicationShortcutItemIconType você pode usar o “$ (PRODUCT_BUNDLE_IDENTIFIER)” para deixa padronizado suas ações (porem eu não gosto muito )
Agora precisamos lidar com a seleção do usuario, e o melhor lugar para isso é no nosso AppDelegate onde iremos adicionar uma função chamada
func application(_ application: UIApplication, performActionFor shortcutItem: UIApplicationShortcutItem, completionHandler: @escaping (Bool) -> Void)Antes de começar a tratar essa requisição , vamos criar um enum para facilitar erros de digitação e possíveis mudanças. Este enum para fim de estudo deixarei no AppDelegate mesmo, porem o ideal seria você criar um arquivo só para ele ou um arquivo de Enuns.
Se você não sabe o que é um enum sugiro que leia este artigo feito por mim antes de continuar a leitura ;)
Em nosso delegate, com a nova função que adicionamos acima vimos que ela recebe como parâmetro a variável shortcutItem que é um UIApplicationShortcutItem . Esta variável possui uma propriedade chamada type onde vamos conseguir capturar o UIApplicationShortcutItemType da opção selecionada pelo usuario. Então agora é só tratar a requisição.
Para fazer isso faça um switch em shortcutItem.type, os cases devem ser justamente nosso enum.
Agora dentro de cada item do switch basta criar as tratativas necessárias para chamar a tela ou executar a ação que voce deseja.
Ações Dinâmicas
Agora vamos tratar de ações dinâmicas , onde nela podemos exibir itens dependendo da usabilidade de nosso app como já falamos lá no inicio, Mas um lembrete importante, apenas 4 ações serão exibidas e em prioridade serão as estática ;)
Vamos começar criando uma função generica para criar um UIApplicationShortcutItems, ela ficará dessa forma.
Eu criei essa função publica no AppDelegate da aplicação. Onde eu posso chamar e registrar um novo item em qualquer parte do meu app.
Agora em uma ViewController você pode chamar AppDelegate.createUIApplicationShortcutItem e registrar sua ação. Só lembre que para cada ação que você registrar você deve ter uma tratativa na função onde criamos nosso switch.
Para os UX Desing
Se você é UX este artigo é legal para você conhecer os recursos nativos que a Apple fornece para agregar valor. Na pagina “Apple Design Resources” ela fornece para download um modelo de todas as telas nativas para criar a prototipagem em alta. Lá você irá encontrar como este recurso se apresenta no sistema, então isso pode ser usado em sua prototipagem
Espero que tenha gostado, me envie feedbacks , deixo aqui onde me encontrar.
Abraços ;)
