Apple Watch — Complications

Pedro Ortiz
Apple Developer Academy | Mackenzie
5 min readApr 27, 2018

Neste artigo você irá compreender melhor o que é uma Complication, para que ela serve e como implementar uma.

O que é uma Complication?

Através das Complications do Apple Watch é possível visualizar informações relevantes do seu app dentro da Watch Face ( tela inicial do Apple Watch ), ou seja, fora do aplicativo em si, funcionando de forma análoga aos widgets em uma aplicação iOS.

É importante que as informações exibidas em uma complication sejam úteis e de fácil compreensão para se adequar às diferentes famílias de complications. Cada uma delas tem diferentes layouts e diferentes formas de expor seus conteúdos, sendo que cada Watch Face comporta uma quantidade pré-determinada de complications de cada tipo, e algumas delas suporta nenhuma. Por esse motivo é sugerido que seu aplicativo possua todos os tipos possíveis de complications, para que sempre haja suporte para todas as Watch Faces.

É constado na documentação oficial da Apple as seguintes famílias de Complications:

  • Circular
  • Modular Small
  • Modular Large
  • Utility Small
  • Utility Large
  • Extra Large

A seguir, são mostrados alguns exemplos de Complications em diferentes Watch Faces, retirados da documentação da Apple

Como Implementar?

Como funciona?

Antes de tudo, é importante saber como uma Complication funciona. Basicamente, criamos e configuramos uma Complication para mostrar uma informação específica em um determinado momento. Por exemplo: imagine um aplicativo de uma empresa área, que possui uma Complication que te mostra o horário do próximo voo que você agendou, e dependendo da hora atual, o seu status pode ser: no horário certo, ou atrasado.

Esse mecânismo de visualização de informação de acordo com o tempo é chamado de Timeline. Ela pode ser utiliza para mostrar dados futuros ou dados passados. Cada aplicativo possui um número limitado de Timelines, bem como um número limitado de atualizações para cada Timeline. Veja o exemplo da documentação oficial:

Entradas para a timeline de um app de encontro

Hands on

Agora que você já sabe o que é, e para que serve ma Complication, vamos implementar uma. De modo geral, sua implementação é simples e se dá da seguinte maneira:

A primeira coisa a se fazer para criar uma complication é marcar a opção “Include Complication” ao criar um novo projeto de watchOS:

Com isto feito, é criado o arquivo ComplicationController.swift que controlará as funcionalidades e será o DataSource da Conplication, e o local no qual a timeline será configurada.

Selecione o projeto no painel de navegação e caso não esteja selecionado, mude o target do mesmo para o WatchKit Extension:

Vá para a aba General, e em Complications Configuration desmarque todas as opções, deixando apenas “Modular Large” marcada (esse será o tipo da complication que criaremos).

Começando a Complication

Para começarmos, vá para a ComplicationController.swift e crie um vetor que conterá os dados a serem mostrados na complication.

Adicione a seguinte propriedade nesta classe:

Como você pode supor, essa propriedade representa as mensagens que serão mostradas na complication que iremos criar.

Adicione a seguinte imagem na pasta da complication, porém fora da pasta assets, é necessário que imagens sejam pequenas no watch para não ocupar muito espaço da tela.

No método getLocalizableSampleTemplate temos que configurar como a complication será apresentada ao usuário quando o aplicativo for instalado pela primeira vez no Apple Watch, essas configurações serão mostradas quando o usuário for customizar a WatchFace selecionada.

Em getSupportedTimeTravelDirectionsForComplication selecione o handler para .forward para que a timeline siga nesta direção.

Para criarmos os elementos que pertencerão á complication criaremos um método chamado createTimeLineEntry que em nosso tutorial colocará as informações referentes ao header e body da complication.

Temos que configurar agora o início e final da timeline nos seguintes métodos respectivamente:

Agora, está na hora de configurar como se dará a disposição dos elementos e o layout geral para cada família de complication, através de complication.family, devemos configurar todas as que estarão sendo utilizadas, no nosso caso, apenas modularLarge.

Antes de testarmos, temos que escolher a frequência que as mensagens aparecerão dentro da complication, calculando sempre quando acontecerá a próxima entrada a partir do que foi definido anteriormente com StartDate e EndDate, desta forma, a cada determinado período de tempo, o que é mostrado na complication mudará conforme o que está em nosso vetor.

Antes da complication ser visível para o usuário, ela deve ser adicionada em uma Watch Face, rode agora em um simulador para o Watch e siga os passos para adicionar e executar a complication:

Dê um force touch na tela do Apple Watch ou se estiver no simulador vá em Hardware -> Force Touch Pressure -> Deep Press, clique na tela e volte para o modo Shallow Press. Feito isso, o menu de customização aparecerá, deslize até aparecer a WatchFace Modular ( família da qual nossa complication pertence ).

Clique no botão “Customize” e deslize novamente para a esquerda para poder editar a complication. Rode a Digital Crown para selecionar a sua. No simulador apenas dê scroll horizontal no mouse pad, por último apenas pressione Digital Crown para salvar sua nova complication customizada do seu aplicativo.

Conclusão

Com esse tutorial, podemos ver que o desenvolvimento de uma Complication para Apple Watch é bem simples, porém requer muitos passos, que se não forem seguidos corretamente podem complicar a vida do desenvolvedor.

--

--