Today Extension (Widget)
O que é?
Uma Today Extension, ou widget, é uma extensão que exibe uma pequena e útil quantidade de informação, ou ações rápidas e específicas do aplicativo.
Eles aparecem na Search Screen, deslizando para a direita na tela de início, e também na Quick Action List a partir do iPhone 6S, ao usar o 3D touch no ícone do aplicativo.
É possível fazer qualquer tipo de operação dentro de um widget, uma vez que ele é uma ViewController convencional. Porém ele possui limitações grandes de processamento, e não permite entrada de texto com teclado. Além disso, a documentação não recomenda o uso de ScrollViews nos widgets.
Exemplos
De acordo com as guidelines, o widget deve ser interativo e simples, as ações de preferência devem ser executadas com um toque. A seguir há alguns exemplos de apps que fazem isso com excelência.
Google Maps
O Google Maps possui um widget que localiza o ponto de ônibus mais próximo a você, ou o que você usa com mais frequência, e te mostra os itinerários em tempo real.
Tempo
O aplicativo nativo de previsão do tempo tem um widget muito útil, que te mostra um resumo da previsão do tempo do dia.
Nubank
O widget do Nubank te mostra de maneira bem simples, todas as informações úteis sobre o balanço da sua conta.
Como criar um widget?
1º — Criar um projeto no Xcode
Abra o Xcode e crie um novo projeto com o template Single View Application:
Em seguida nomeie o projeto como “aWidget”:
E por último, escolha um diretório para salvar o projeto.
Se você rodar o projeto agora, você terá uma LaunchScreen e uma ViewController em branco. E nós não vamos acrescentar nada no aplicativo, pois o foco aqui é no widget. Então vamos proseguir.
2º — Adicionar a extensão
Dentro do projeto do Xcode, a Today Extension se comportará como um segundo aplicativo totalmente desvinculado do principal. E para adicioná-la, teremos que criar um noto Target dentro do projeto.
Para isso vá em File -> New -> Target…
E então selecione a Today Extension:
E dê o nome de “TheWidget”:
Agora o projeto tem dois targets. Mas o que isso significa? Como eu havia falado anteriormente, o widget vai ser comportar como se fosse um outro aplicativo dentro do projeto. A partir de agora, você terá de selecionar qual target você quer debugar antes de rodar o aplicativo. Toda vez que você rodar o aplicativo ele irá compilar os dois targets, porém só um por vez será observado pelo debugger.
Antes de rodar o projeto, vamos dar uma olhada nos novos arquivos criados para a extensão. Uma pasta foi criada, com o nome de TheWidget, e ela contém todos os arquivos relacionados à extensão. Sendo a TodayViewController.swift a classe padrão responsável pela ViewController do Widget, e MainInterface.storyboard a interface do mesmo.
Vamos selecionar o Target do widget e rodar para ver como ele funciona.
No canto superior esquerdo, clique no ícone do projeto aWidget:
Isso irá te mostrar todos os targets existentes no projeto. Selecione o target “The Widget”, e rode o projeto.
Por padrão, o widget vem com uma label com a escrita “Hello World.”
3º — Como expandir o widget
O widget tem dois tipos de layout. O Compact mode, que oferece uma altura fixa de 110pt, e o Expanded mode, que oferece altura variável.
Para utilizar o Expanded mode, basta fazer o seguinte:
Vá até a classe do widget, TodayViewController.swift. Adicione ao método viewDidLoad() as seguintes linhas de código:
Esta configuração habilita o botão “Show More” no canto superior direito do widget, porém ele ainda não possui nenhum efeito. Toda vez que este botão é pressionado, ele chama o método widgetActiveDisplayModeDidChange(:withMaximumSize), que nós usaremos para configurar a sua nova altura.
Adicione a função a seguir após o viewDidLoad:
- Se o activeDisplayMode for igual a .expanded no momento que que o botão “Show More” é pressionado, nós podemos redefinir seu preferredContentSize, que corresponde as suas proporções, para uma altura maior do que a original. Neste caso eu capturei a largura o widget, e a passei como parâmetro de largura e altura, tornando o widget maior, e quadrado.
- Se o activeDisplayMode for igual a .compact no momento que que o botão “Show More” é pressionado, preferredContentSize é setado para seu tamanho padrão, contido no parâmetro maxSize do método.
O Today extension se resume a isso, o resto pode ser feito igual como em qualquer outra ViewController.
Obrigado pela leitura.
