Compartilhar via

Aprimoramentos de widget de pesquisa e tela inicial no iOS 10

  • Artigo

Este artigo aborda as melhorias que a Apple fez no Widget System no iOS 10.

A Apple introduziu várias melhorias no Sistema de Widgets para garantir que os widgets fiquem ótimos em qualquer plano de fundo existente na nova tela de bloqueio do iOS 10. Além disso, os widgets agora contêm uma propriedade NCWidgetDisplayMode que permite ao desenvolvedor descrever quanto conteúdo está disponível e permite que o usuário expanda e recolha o conteúdo.

Widgets (também conhecidos como extensões de hoje) são um tipo especial de extensão do iOS que exibem uma pequena quantidade de informações úteis ou expõem a funcionalidade específica do aplicativo em tempo hábil. Por exemplo, o aplicativo Notícias tem um widget que mostra as principais manchetes e o aplicativo Calendário fornece dois widgets diferentes: um para exibir os eventos de hoje e outro para mostrar os próximos eventos.

Os widgets são altamente personalizáveis e podem conter elementos da interface do usuário, como texto, imagens, botões, etc. Além disso, o desenvolvedor pode personalizar ainda mais o layout de seus widgets.

Widgets de exemplo

Há dois locais principais que um usuário pode visualizar e interagir com os Widgets de um aplicativo:

  • A tela de pesquisa - Os usuários podem adicionar os widgets que acharem mais úteis à tela de pesquisa. A tela Pesquisar é acessada deslizando para a direita nas telas Início e Bloqueio.
  • A tela inicial - Na tela inicial, o usuário pode usar o 3D Touch para abrir a lista de ações rápidas, aplicando pressão no ícone do aplicativo. Os Widgets de um aplicativo serão exibidos acima da Lista de Ações Rápidas. Consulte nossa documentação de Introdução ao 3D Touch para obter mais informações.

Sugestões do desenvolvedor de widgets

Idealmente, o desenvolvedor deve sempre tentar projetar Widgets que o usuário vai querer adicionar às suas telas de pesquisa. Para isso, a Apple tem as seguintes sugestões:

  • Crie uma experiência excelente e visualizável - Os usuários querem widgets que forneçam informações breves e visíveis de atualizações de status ou permitam que eles executem tarefas simples rapidamente. Isso torna essencial fornecer a quantidade certa de informações e interatividade. Sempre que possível, permita que o usuário execute uma determinada tarefa com um único toque. Além disso, como os Widgets não suportam movimento panorâmico ou rolagem, isso terá que ser levado em consideração no design do Widget.
  • Mostrar conteúdo rapidamente - Os widgets são projetados para serem visualizáveis, portanto, o usuário nunca deve ter que esperar que o conteúdo seja carregado depois que um widget for exibido. Os widgets devem armazenar em cache seu conteúdo localmente para que possam mostrar conteúdo recente enquanto o conteúdo novo é carregado em segundo plano.
  • Fornecer preenchimento e margens apropriados - Os widgets nunca devem parecer lotados, portanto, evite estender o conteúdo para as bordas da visualização de um widget. Sempre deve haver uma margem de vários pixels entre as bordas e o conteúdo. A Apple também sugere usar o ícone do aplicativo, exibido na parte superior do Widget, como um guia de alinhamento. Se o Widget apresentar um layout de grade, verifique se há preenchimento adequado entre os itens na grade e tente limitar o número de itens a quatro no máximo.
  • Usar layouts adaptáveis - A largura de um widget varia de acordo com o dispositivo em que ele está sendo executado e a orientação do dispositivo. A Altura de um Widget também pode variar com base no fato de ele estar sendo exibido em um estado Recolhido (o padrão) ou Expandido (não suportado por todos os Widgets). Um widget recolhido tem uma altura de aproximadamente duas linhas e meia de tabela padrão do iOS. O desenvolvedor pode solicitar o tamanho de um Widget Expandido, mas o ideal é que ele seja menor que a altura da tela. No estado Recolhido, o Widget deve mostrar apenas informações essenciais e autônomas. Quando expandido, o widget deve mostrar informações suplementares que aprimoram o conteúdo primário mostrado no estado recolhido. Os widgets mostrados na Lista de Ações Rápidas estarão apenas no estado Recolhido.
  • Não personalizar o plano de fundo do widget - Os widgets são exibidos em um fundo claro e desfocado fornecido pelo sistema. Isso é feito para promover a consistência entre os Widgets e melhorar a legibilidade de seu conteúdo. Evite usar uma imagem como plano de fundo do Widget porque ela pode entrar em conflito com os papéis de parede de Bloqueio e Tela inicial do usuário.
  • Use a fonte do sistema em preto ou cinza escuro - Ao exibir texto em um widget, a fonte do sistema funciona melhor. A fonte deve estar em uma cor preta ou cinza escuro para se destacar contra o fundo claro e desfocado do Widget.
  • Fornecer acesso ao aplicativo quando apropriado - Os widgets devem sempre operar separadamente de seu aplicativo, no entanto, se uma funcionalidade mais profunda for necessária, o widget deve ser capaz de iniciar o aplicativo para ver ou editar uma informação específica. Nunca inclua um botão "abrir aplicativo", basta permitir que o usuário toque no conteúdo em si e nunca abra um aplicativo 3rd party.
  • Selecione um Nome de widget claro e conciso - O ícone do aplicativo e o nome do widget são sempre exibidos sobre o conteúdo do widget. A Apple sugere usar o nome do aplicativo para seu widget principal e um nome claro e conciso para qualquer outro que ele forneça. Ao fornecer um Título de Widget personalizado, eles devem ser prefixados com o nome do aplicativo (como Mapas nas proximidades, Mapas Restaurantes, etc.).
  • Informar quando a autenticação agrega valor - Se a funcionalidade ou informações adicionais estiverem disponíveis somente quando o usuário estiver autenticado e conectado, apresente isso ao usuário. Por exemplo, um aplicativo de compartilhamento de viagens pode dizer "Entrar para reservar viagem".
  • Selecione um Widget de Lista de Ações Rápidas - Se o aplicativo fornecer mais de um Widget, o desenvolvedor deverá escolher aquele a ser apresentado quando o usuário exibir a Lista de Ações Rápidas aplicando pressão no ícone do aplicativo usando o 3D Touch.

Para obter mais detalhes sobre como trabalhar com widgets, consulte nossa documentação de Introdução às Extensões, Introdução ao 3D Touch e Guia de Programação de Extensões de Aplicativos da Apple.

Trabalhando com Vitalidade

A vibração garante que o texto de um Widget permaneça legível quando apresentado no fundo claro e desfocado do Widget (fornecido pelo sistema). Antes do iOS 10, o desenvolvedor usava um NotificationCenterVibrancyEffect para a vibração do Widget. Por exemplo:

// DEPRECATED: Get Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreateForNotificationCenter ();

Isso foi preterido no iOS 10 e deve ser substituído por um WidgetPrimaryVibrancyEffect ou um WidgetSecondaryVibrancyEffect. Por exemplo:

// Get Primary Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreatePrimaryVibrancyEffectForNotificationCenter ();

// Get Secondary Widget Vibrancy Effect
var vibrancy2 = UIVibrancyEffect.CreateSecondaryVibrancyEffectForNotificationCenter ();

Trabalhando com widgets recolhidos e expandidos

Novo no iOS 10, os widgets agora contêm uma propriedade NCWidgetDisplayMode que permite ao desenvolvedor descrever quanto conteúdo está disponível e permite que o usuário expanda e recolha o conteúdo.

Quando um Widget é mostrado inicialmente, ele está em um estado Recolhido. Um widget recolhido tem uma altura de aproximadamente duas linhas e meia de tabela padrão do iOS. O desenvolvedor pode solicitar o tamanho de um Widget Expandido, mas o ideal é que ele seja menor que a altura da tela.

No estado Recolhido, o Widget deve mostrar apenas informações essenciais e autônomas. Quando expandido, o widget deve mostrar informações suplementares que aprimoram o conteúdo primário mostrado no estado recolhido. Por exemplo, o aplicativo Tempo mostra as condições meteorológicas atuais quando recolhido e adiciona a previsão horária quando expandido.

Os widgets mostrados na Lista de Ações Rápidas estarão apenas no estado Recolhido. Se o aplicativo fornecer mais de um Widget, o desenvolvedor deverá escolher aquele a ser apresentado quando o usuário exibir a Lista de Ações Rápidas aplicando pressão no ícone do aplicativo usando o 3D Touch.

O exemplo a seguir é de uma extensão de hoje simples (Widget) que manipula os estados Collapsed e Expanded:

using System;
using NotificationCenter;
using Foundation;
using UIKit;
using CoreGraphics;

namespace MonkeyAbout
{
    public partial class TodayViewController : UIViewController, INCWidgetProviding
    {
        protected TodayViewController (IntPtr handle) : base (handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Tell widget it can be expanded
            ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

            // Get the maximum size
            var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);
        }

        [Export ("widgetPerformUpdateWithCompletionHandler:")]
        public void WidgetPerformUpdate (Action<NCUpdateResult> completionHandler)
        {
            // Take action based on the display mode
            switch (ExtensionContext.GetWidgetActiveDisplayMode()) {
            case NCWidgetDisplayMode.Compact:
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                Content.Text = "Gorilla!!!!";
                break;
            }

            // Report results
            // If an error is encoutered, use NCUpdateResultFailed
            // If there's no update required, use NCUpdateResultNoData
            // If there's an update, use NCUpdateResultNewData
            completionHandler (NCUpdateResult.NewData);
        }

        [Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
        public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
        {
            // Take action based on the display mode
            switch (activeDisplayMode) {
            case NCWidgetDisplayMode.Compact:
                PreferredContentSize = maxSize;
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                PreferredContentSize = new CGSize (0, 200);
                Content.Text = "Gorilla!!!!";
                break;
            }
        }

    }
}

Dê uma olhada no código específico do Modo de Exibição do Widget em detalhes. Para informar ao sistema que este Widget suporta o estado Expandido, ele usa:

// Tell widget it can be expanded
ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

Para obter o modo de exibição atual do Widget, ele usa:

ExtensionContext.GetWidgetActiveDisplayMode()

Para obter o tamanho máximo para o estado Recolhido ou Expandido, ele usa:

// Get the maximum size
var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);

E para lidar com a mudança de estado (Modo de Exibição), ele usa:

[Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
{
    // Take action based on the display mode
    switch (activeDisplayMode) {
    case NCWidgetDisplayMode.Compact:
        PreferredContentSize = maxSize;
        Content.Text = "Let's Monkey About!";
        break;
    case NCWidgetDisplayMode.Expanded:
        PreferredContentSize = new CGSize (0, 200);
        Content.Text = "Gorilla!!!!";
        break;
    }
}

Além de definir o tamanho solicitado para cada estado (Recolhido ou Expandido), ele também atualiza o conteúdo que está sendo exibido para corresponder ao novo tamanho.

Resumo

Este artigo abordou as melhorias que a Apple fez no Widget System no iOS 10 e mostrou como implementá-las no Xamarin.iOS.