Trabalhando com controladores de barra de guias tvOS no Xamarin
Para muitos tipos de aplicativos tvOS, a navegação principal é apresentada como uma barra de guias na parte superior da tela. O usuário passa o dedo para a esquerda e para a direita na lista de possíveis Categorias e na área de conteúdo abaixo das alterações para refletir a seleção do usuário.
A barra de guias é translúcida por padrão e sempre aparece na parte superior da tela. Quando em foco, uma Barra de Guias cobrirá os 140 pixels superiores da tela, mas deslizará rapidamente quando o foco mudar para a área de conteúdo abaixo.
Barras de tabulação no tvOS
O UITabViewController funciona de maneira semelhante e serve a um propósito semelhante no tvOS como no iOS, com as seguintes diferenças principais:
- Ao contrário da Tab Bar no iOS, que aparece na parte inferior da tela, as Tab Bars no tvOS ocupam os 140 pixels superiores da tela e são translúcidas por padrão.
- Quando o foco sair da Barra de Guias da área de conteúdo abaixo, a Barra de Guias deslizará rapidamente para fora da parte superior da tela e ficará oculta. O usuário pode tocar no botão Menu uma vez ou deslizar para cima no Siri Remote para mostrar a Barra de guias novamente.
- Passar o dedo para baixo no Siri Remote moverá o foco para a área de conteúdo abaixo da Barra de guias para o primeiro Item Focalizável no conteúdo que está sendo mostrado. Novamente, isso ocultará a Barra de Guias assim que o foco mudar.
- Clicar para selecionar uma Categoria exibida na Barra de Guias alternará para o conteúdo dessa categoria e o foco será alternado para o primeiro Item Focalizável nessa exibição.
- O número de Categorias exibidas na Barra de Guias deve ser fixo e todas as Categorias devem estar acessíveis o tempo todo, uma determinada Categoria nunca deve ser desabilitada.
- As barras de tabulação não suportam personalização no tvOS. Além disso, eles não mostram a Categoria Mais (como o iOS) se houver mais Categorias do que cabem na Barra de Guias.
A Apple tem as seguintes sugestões para trabalhar com Tab Bars:
- Use Barras de Guias para Organizar Logicamente o Conteúdo - Use a Barra de Guias para organizar logicamente o conteúdo com o qual seu aplicativo tvOS funciona. Por exemplo, Destaque, Principais gráficos, Comprado e Pesquisar.
- Adicionar Selos para Informar os Usuários sobre Novo Conteúdo - Opcionalmente, você pode exibir um Selo (um oval vermelho com um número branco ou ponto de exclamação) para informar o usuário sobre o novo conteúdo em uma Categoria.
- Use Emblemas com moderação - Não sobrecarregue a Barra de Guias com Selos e exiba-os apenas onde eles fornecem informações críticas ao usuário.
- Limitar o Número de Categorias - Para reduzir a complexidade e manter seu aplicativo gerenciável, não sobrecarregue sua Barra de Guias com Categorias e certifique-se de que todas as Categorias estejam visíveis e não lotadas. Títulos simples e curtos funcionam melhor.
- Não desativar uma categoria - Todas as guias (categorias) devem estar sempre visíveis e habilitadas o tempo todo. Se uma determinada guia não tiver conteúdo, forneça uma explicação ao usuário por quê. Por exemplo, a guia Compras estará vazia se o usuário não tiver feito nenhuma compra.
Itens da barra de guias
Cada Categoria (Guia) na Barra de Guias é representada por um Item da Barra de Guias (UITabBarItem). A Apple tem as seguintes sugestões para trabalhar com itens da barra de guias:
- Usar guias baseadas em texto - Embora o item da barra de guias possa ser representado como um ícone, a Apple sugere usar texto apenas porque um título conciso é mais fácil de interpretar do que um ícone.
- Use substantivos ou verbos curtos e significativos - Um item da barra de guias deve retransmitir claramente o conteúdo que ele contém e funciona melhor quando é um substantivo simples (como Fotos, Filmes ou Música) ou verbos (como Pesquisar ou Reproduzir).
Barras de guias e storyboards
A maneira mais fácil de trabalhar com Barras de Guias em um aplicativo Xamarin.tvOS é adicioná-las à interface do usuário do aplicativo usando o iOS Designer.
Inicie um novo aplicativo Xamarin.tvOS e selecione Aplicativo com guias tvOS>>:
Siga todas as instruções para criar uma nova solução Xamarin.tvOS.
No Solution Pad, clique duas vezes no arquivo e abra-o
Main.storyboardpara edição.Para alterar o Ícone ou o Título de uma determinada Categoria, selecione o Item da Barra de Guias do Controlador de Exibição na Estrutura de Tópicos do Documento:
Em seguida, defina as propriedades necessárias na guia Widget do Gerenciador de propriedades:
Para adicionar uma nova Categoria (Guia), solte um Controlador de Exibição na superfície de design:
Clique com a tecla Control pressionada e arraste do Controlador de Exibição de Guia para o novo Controlador de Exibição.
No pop-up, selecione controladores de exibição para adicionar o novo modo de exibição como uma guia (Categoria):
Crie o layout da interface do usuário para cada área de conteúdo do Caterogies normalmente, adicionando elementos da interface do usuário no iOS Designer.
Exponha todos os eventos necessários para trabalhar com seus controles de interface do usuário no código C#.
Nomeie todos os controles de interface do usuário que você deseja expor no código C#.
Salve suas alterações.
Importante
Embora seja possível atribuir eventos como TouchUpInside a um elemento da interface do usuário (como um UIButton) no iOS Designer, ele nunca será chamado porque a Apple TV não tem uma tela sensível ao toque ou suporta eventos de toque. Você sempre deve usar o Primary Action evento ao criar manipuladores de eventos para elementos da interface do usuário do tvOS.
Para obter mais informações sobre como trabalhar com Storyboards, consulte nosso Guia de Início Rápido Olá, tvOS.
Trabalhando com barras de guias
Use a Items propriedade de para UITabBar acessar a coleção que contém como uma matriz indexada UITabBarItems zero (0). A SelectedItem propriedade retornará a guia (Categoria) selecionada no momento como um UITabBarItemarquivo .
Trabalhando com itens da barra de guias
Para exibir um Selo em uma determinada guia (um oval vermelho com texto branco), use o seguinte código:
// Display a badge
TabBar.Items [2].BadgeValue = "10";
O que produziria os seguintes resultados quando executado:
Use a Title propriedade de para UITabBarItem alterar o título e a Image propriedade para alterar o ícone.
Resumo
Este artigo abordou o design e o trabalho com o Controlador de Barra de Guias dentro de um aplicativo Xamarin.tvOS.