Advertisement
  1. Code
  2. iOS SDK

iOS 10: Criando interfaces personalizadas para Notificações

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Introdução

Com o iOS 10, a Apple agora permite aos desenvolvedores criar interfaces personalizadas para notificações apresentadas aos seus usuários.  As possibilidade deste framework são mostradas no app Message, onde você pode ver a interface de conversação como se você estivesse dentro do app.

O framework que torna toda essa funcionalidade possível é o novo framework UserNotificationsUI. Usando este framework, você pode adaptar qualquer subclasse UIViewController para apresentar o conteúdo da sua notificação.

Neste tutoria, eu mostrarei à você como usar este novo framework para criar uma interface personalizada para seus próprias notificações.

Este tutorial requer que você esteja rodando o Xcode 8 com o SDK do iOS 10. Você também precisa baixar o projeto inicial no GitHub.

Por favor, perceba que o projeto inicial esta usando o novo framework UserNotification no iOS 10 para programar as notificações locais para teste. Estaremos usando esse framework durante todo o tutorial, então se você não estiver familiarizado com ele, confira meu post cobrindo-o aqui:

1. Notification Content Extension

Como muitos outros tipos de funcionalidades extra de app iOS como compartilhamento e teclados personalizados, interfaces de notificação é uma extensão.

Com o projeto inicial abra o Xcode, navegue para File > New > Target... na barra de menu. Na caixa de dialogo que aparecer, selecione iOS> Application Extension > Notification Content:

Extension Type

Nomeie sua extensão com quiser e clique em Finish:

Extension Options

Se uma janela pedindo para ativar o novo esquema aparecer, clique o botão Ativar pra configurá-la para depuração.

Activate Scheme Dialog

Você verá agora uma nova pasta com o nome da sua extensão no File Navigator do Xcode para seu projeto: Essa pasta contém os arquivos a seguir:

  • NotificationViewController.swift que contem a classe NotificationViewController (uma subclasse UIViewController) para você personalizar sua interface. Por padrão, o Xcode automaticamente faz com que essa classe esteja em conformidade com o protocolo necessário do framework UserNotificationUI. Iremos olhar este protocolo com mais detalhes mais tarde no tutorial.
  • MainInterface.storyboard que é um arquivo storyboard que contém uma view controller simples. Esta é a interface apresentada quando um usuário interage com sua notificação. O xcode automaticamente liga esta interface com a classe NotificationViewController, então não precisa ser feito nada manualmente.
  • Info.plist contendo muitos detalhes importantes sobre sua extensão. Ao abrí-lo, veremos que contém vários itens. O único que você precisa se preocupar, entretanto, é o dicionário NSExtension que contém o seguinte:
Extension Dictionary Contents

Você verá que o Xcode automaticamente liga sua extensão de conteúdo de notificação ao sistema correto de extensão, com.apple.usernotifications.content-extension, e o arquivo storyboard de interface, MainInterface. Dentro do sub-dicionário NSExtensionAttributes, há dois atributos que você deve definir:

  • UNNotificationExtensionCategory, uma cadeia de caracteres idêntica à categoria da notificação que exibiremos na interface customizada. No arquivo Info.plist, alteremos o valor para com.tutplus.CustomNotification-Interface.notification para combinar com a categoria usada no projeto inicial
  • UNNotificationExtensionInitialContentSizeRatio que é um número entre 0 e 1 que define o a proporção da tela da sua interface personalizada. O valor padrão 1, diz ao sistema que sua interface tem uma altura total igual a sua largura. Um valor 0.5 por exemplo, resultaria em uma interface com uma altura igual a metade da largura total. É importante saber que a altura da sua interface pode ser alterada dinamicamente quando é carregada. O valor na Info.plist é apenas uma estimativa para que o sistema possa exibir uma animação da melhor maneira.

Além disso, também podemos definir o atributo UNNotificationExtensionDefaultContentHidden no dicionário NSExtensionAttributes. Ele requer um valor binário que informa ao sistema se deve mostrar ou não a visão da notificação padrão junto da interface. A barra de título no topo, contendo o ícone e nome do app, assim como o botão de ignorar, sempre será mostrado. Para qualquer ação customizada definida para a categoria de notificação, um botão para o usuário realizar aquela ação sempre será mostrado. Usar o valor true para esse atributo resultará no sistema mostrar apenas a interface customizada e não a visão de notificação padrão. Se você não definir este atributo, or fornecer um valor false, então a view padrão da notificação será exibida abaixo da sua interface.

2. Criando a interface

Criar a interface do conteúdo da sua notificação personalizada é idêntico a você cria uma interface qualquer de view controller de iOS.

Um coisa muito importar para se ter em mente quando projetar sua interface, é que sua view controller não receberá nenhum evento de toque quando for exibida para o usuário. Isso significa que sua view controller não pode incluir qualquer elemento de interface que o usuário espere estar habilitado a interagir, isso inclui botões, switches, slides, etc. Por favor, perceba que você ainda pode incluir itens, tais como UITableViews e UIScrollViews em sua interface e rola-los programaticamente se o seu conteúdo não couber dentro de toda sua interface.

A unica excesão para isso, se sua interface contém algum tipo de mídia associada à notificação, você pode pedir ao sistema para exibir uma botão play/pause.

Para criar a interface para este tutoria, abra seu arquivo MainInterface.storyboard. Primeiramente, selecione a view controller e no Attributes Inspector, altere o altura para ser igual a largura.

View Controller Height

Em seguida, altere a cor do background da sua view principal para branco. Por ultimo, altere a cor do texto da label existente para preto e o tamanho do texto para 96. Quando finalizado, sua interface será similar com a seguinte:

Completed Interface

Embora tenhamos feito apenas modificações simples na interface padrão fornecida pelo Xcode, dependendo do tipo de conteúdo que sua aplicativo conter, você pode facilmente criar qualquer interface presente no UIKit com suas notificações.

3. Programando a view controller

Agora com nossa interface completa, abra seu arquivo NotificationViewController.swift para iniciar a implementação das funcionalidade dentro da view controller.

A definição da visão do conteúdo da notificação, além de ser subclasse de UIViewController, é sua conformidadeo ao protocolo UNNotificationContentExtension. Este protocolo faz parte do framework UserNotificationUI e define os seguintes métodos:

  • didReceive(_:) que é chamado sempre que seu app receber uma nova notificação. Ele contém sim unico objeto UNNotification como parâmetro que você pode usar para acessar todo o conteúdo da notificação recebida. É importante notar que este método pode ser chamado várias vezes se seus app continuar recebendo notificações quando sua interface estiver aberta, então seu aplicativo deve tratar isso.
  • didReceive(_:completionHandler:) que é chamado quando o usuário toca em um dos botões de ações personalizadas da sua notificação. Este método contém um objeto UNNotificationResponse que você pode usar para determinar qual ação o usuário selecionou. Quando você finalizar o processamento da ação da notificação, você deve chamar o completo handler com um valor UNNotificationContentExtensionResponseOption.

UNNotificationContentExtensionResponseOption define as opções a seguir:

  • doNotDismiss que você deve usar quando sua notification view controller lida com toda a lógica para essa ação e você quer que sua interface permaneça na tela.
  • dismiss que você deve usar quando sua notification view controller lida com toda a lógica para essa açÃo e você quer que sua interface se feche.
  • dismissAndForwardAction que você pode usar quando você quer fechar sua interface e deixar seu app delegate (ou o que for seu objeto UNUserNotificationCenterDelegate) lidar com a ação personalizada.

Outra funcionalidade que o protocolo UNNotificationContentExtension provê é a habilidade de adicionar um botão de reprodução de mídia gerada pelo sistema. Esta é a única exceção para as limitações de design de interface que mencionei anteriormente. Ao sobrescrever os métodos e propriedades, podemos adicionar esse botão à interface e detectar quando ele é pressionado pelo usuário:

  • mediaPlayPauseButtonType: um valor UNNotificationContentExtensionMediaPlayPauseButtonType
  • mediaPlayPauseButtonFrame: um valor CGRect
  • mediaPlayPauseButtonTintColor: um valor UIColor
  • mediaPlay: chamado quando sua interface deve tocar sua mídia.
  • mediaPause: chamado quando sua interface deve pausar sua mídia

A notificação local que o projeto inicial cria, inclui um número na propriedade userInfo da notificação e isso é o que mostraremos na interface customizada. Para tanto, alteremos o método didReceive(_:) da classe NotificationViewController pelo seguinte:

Agora, é hora de testarmos nossa interface customizada. Primeiro, garantamos que a aplicação iOS em questão está selecionada no Xcode no canto esquerdo superior:

iOS Application Target

Quando selecionado, apertemos Command-R ou o botão de reprodução no top esquerdo para executar o app. Após a primeira execução, veremos o alerta a seguir para permitir notificações:

Notification Alert

Cliquemos em Allow e apertemos o botão home do aparelho (ou Command-Shift-H, se no simulador) para fechar o app. Esperemos aproximadamente 30 segundos e a notificação a seguir aparecerá no aparelho:

Regular Notification

Para ver a interface customiada, podemos clicar ou puxar para baixo a notificação ou usar o 3D Touch se for um iPhone 6S, 7 ou no simulador. Se usarmos o simulador, podemos simular os recursos do 3D Touch usando as opções em Hardware > Touch Pressure:

Simulator 3D Touch Options

Quando a interface da notificação carregar, deve parecer com a captura abaixo:

Custom Notification Interface

Veremos que o título, subtitulo, e corpo da notificação são visto abaixo da interface customizada e isso se dá porque não especificamos o valor true para a chave UNNotificationExtensionDefaultContentHidden.

É possível notar que a interface da notificação inicia como um quadrado, dado o valor configurado anteriormente para UNNotificationExtensionInitialContentSizeRatio e depois move-se para baixo para caber o rótulo mostrando 100. O dimensionamento da interface de notificação é totalmente manipulada pelo sistema de Auto-Layout do iOS, então, por exemplo, se quisermos que a interface permance quadrada, podemos restringir a visão para ter proporção 1:1.

Conclusão

No geral, a framewokr UserNotificationsUI permite-nos criar facilmente interfaces ricas para nossas notificações, permitindo usuários interagiram com nossos apps sem fechar o que estão trabalhando no momento. Embora tendo sido um exemplo simples, qualquer coisa que pudermos usar numa visão de um app iOS, podemos colocar na interface de notificação, incluindo elementos detalhados e complexos, como visões SceneKit e SpriteKit.

Como sempre, deixe seu comentário na seção abaixo. E veja alguns dos nossos outros artigos e tutoriais sobre novos recursos no iOS 10 e watchOS 3!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.