Compartilhar via

Trabalhando com botões tvOS no Xamarin

  • Artigo

Aviso

O iOS Designer foi preterido no Visual Studio 2019 versão 16.8 e Visual Studio 2019 para Mac versão 8.8 e removido no Visual Studio 2019 versão 16.9 e Visual Studio para Mac versão 8.9. A maneira recomendada de criar interfaces de usuário do iOS é diretamente em um Mac executando o Construtor de Interfaces do Xcode. Para obter mais informações, consulte Criando interfaces de usuário com o Xcode.

Use uma instância da UIButton classe para criar um botão focalizável e selecionável em uma janela do tvOS. Quando o usuário seleciona um botão, ele envia uma mensagem de ação para o objeto de destino permitir que seu aplicativo Xamarin.tvOS responda à entrada do usuário.

Botões de exemplo

Para obter mais informações sobre como trabalhar com o Focus e navegar com o Siri Remote, consulte nossa documentação Trabalhando com navegação e foco e Siri Remote e Controladores Bluetooth.

Sobre botões

No tvOS, os botões são usados para ações específicas do aplicativo e podem conter um título, um ícone ou ambos. À medida que o usuário navega na Interface do Usuário do aplicativo usando o Siri Remote, o Foco muda para o Botão fornecido, fazendo com que ele altere as cores do texto e do plano de fundo. Uma sombra também é aplicada ao Button, adicionando um efeito 3D, fazendo com que ele pareça subir acima do resto da Interface do Usuário.

Botões de exemplo

A Apple tem as seguintes sugestões para trabalhar com botões:

  • Use um título ou um ícone - Embora um ícone e um título possam ser incluídos em um botão, o espaço é limitado, então tente não combinar ambos.
  • Marcar claramente botões destrutivos - Se o botão executar uma ação destrutiva (como excluir um arquivo), marque-o claramente como tal usando texto e/ou ícone. Ações destrutivas devem sempre apresentar um Alerta pedindo ao usuário para limitar a ação.
  • Não usar botões Voltar - O botão Menu no Siri Remote é usado para retornar à tela anterior. A única exceção a essa regra é para compras no aplicativo ou ações destrutivas em que um botão Cancelar deve ser exibido.

Para obter mais informações sobre como trabalhar com Foco e Navegação, consulte nossa documentação Trabalhando com Navegação e Foco .

Ícones de botão

A Apple sugere que você use imagens simples e altamente reconhecíveis para os ícones do botão. Ícones excessivamente complexos são difíceis de reconhecer em uma tela de TV em um sofá, então tente usar a representação mais simples possível para transmitir a ideia. Sempre que possível, use imagens padrão e conhecidas para ícones (como uma lupa para pesquisa).

Títulos dos botões

A Apple tem as seguintes sugestões ao criar os títulos para seus botões:

  • Mostrar texto descritivo abaixo dos botões dos ícones - Sempre que possível, coloque texto claro e descritivo abaixo do ícone apenas Botões para obter ainda mais a finalidade do botão.
  • Use Verbos ou Frases Verbais para o Título - Indique claramente a ação que ocorrerá quando o usuário clicar no Botão.
  • Use maiúsculas estilo título - Com exceção de artigos, conjunções ou preposições (quatro letras ou menos), todas as palavras do título do botão devem estar em maiúsculas.
  • Use um título curto e direto ao ponto - Use a menor verborragia possível para descrever a ação do botão.

Botões e Storyboards

A maneira mais fácil de trabalhar com botões em um aplicativo Xamarin.tvOS é adicioná-los à interface do usuário do aplicativo usando o Xamarin Designer para iOS.

  1. No Gerenciador de Soluções, clique duas vezes no arquivo e abra-o Main.storyboard para edição.

  2. Arraste um botão da biblioteca e solte-o na exibição:

    Botão A

  3. No Gerenciador de Propriedades, você pode ajustar várias propriedades do botão, como seu Título e Cor do Texto:

    Propriedades do botão

  4. Em seguida, alterne para a guia Eventos e conecte um Evento a partir do Botão e chame-o:ButtonPressed

    A guia Eventos

  5. Você será automaticamente alternado para o ViewController.cs modo de exibição onde você pode colocar a nova Ação em seu código usando as teclas de seta para cima e para baixo :

    Colocando uma nova ação no código

  6. Pressione Enter para selecionar o local:

    O editor de código

  7. Salve as alterações em todos os arquivos.

Contanto que a propriedade de Enabled um botão seja true e não seja coberta por outro controle ou visualização, ele pode ser transformado no item em foco usando o Siri Remote. Se o usuário selecionar o botão e clicar no Touch Surface, a ButtonPressed ação definida acima será executada.

Importante

Embora seja possível atribuir ações como TouchUpInside a um UIButton ao criar um manipulador de eventos, 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 Tipo de Ação padrão ao criar Ações 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.

Botões e código

Opcionalmente, um UIButton pode ser criado em código C# e adicionado à visualização do aplicativo tvOS. Por exemplo:

var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};
View.AddSubview (button);

Ao criar um novo UIButton código, você o UIButtonType especifica como um dos seguintes:

  • Sistema - Este é o tipo padrão de botão apresentado pelo tvOS e é o tipo que você usará com mais frequência.
  • DetailDisclosure - Apresenta um tipo de botão "turn down" usado para ocultar ou mostrar informações detalhadas.
  • InfoDark - Um botão de informações detalhadas escuro exibia um "i" em um círculo.
  • InfoLight - Um botão de informações detalhadas leve exibia um "i" em um círculo.
  • AddContact - Exibe o botão como um botão Adicionar contato.
  • Personalizado - Permite personalizar várias características do botão.

Em seguida, defina o tamanho na tela e a localização do botão. Exemplo:

button.Frame = new CGRect (25, 25, 300, 150);

Em seguida, defina o título para o botão. UIButtons são diferentes da maioria dos UIKit controles em que eles têm um estado, então você não pode simplesmente mudar o título, você tem que alterá-lo para um determinado UIControlState. Por exemplo:

button.SetTitle ("Hello", UIControlState.Normal);

Em seguida, use o AllEvents evento para ver quando o usuário clicou no botão. Exemplo:

button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};

Finalmente, adicione o botão à vista para o apresentar:

View.AddSubview (button);

Importante

Embora seja possível atribuir ações como TouchUpInside a um UIButton, 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 eventos como AllEvents ou PrimaryActionTriggered.

Definindo o estilo de um botão

tvOS fornece várias propriedades de um UIButton que pode ser usado para fornecer seu título e estilizá-lo com coisas como cor de fundo e imagens.

Títulos dos botões

Como vimos acima, UIButtons são diferentes da maioria dos UIKit controles em que eles têm um Estado, então você não pode simplesmente mudar o título, você tem que alterá-lo para um determinado UIControlState. Por exemplo:

button.SetTitle ("Hello", UIControlState.Normal);

Você pode definir a cor do título para o botão usando o SetTitleColor método. Por exemplo:

button.SetTitleColor (UIColor.White, UIControlState.Normal);

E você pode ajustar a sombra do título usando o SetTitleShadowColor. Por exemplo:

button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);

Você pode definir a sombra do título para mudar de Gravado para Em relevo quando o botão estiver realçado usando o seguinte código:

button.ReverseTitleShadowWhenHighlighted = true;

Além disso, você pode usar texto atribuído como título do botão. Por exemplo:

var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);

var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);

Imagens de botão

Um UIButton pode ter uma imagem anexada a ele e pode usar uma imagem como plano de fundo.

Para definir a imagem de plano de fundo de um botão para um determinado UIControlState, use o seguinte código:

button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

Defina a AdjustsImageWhenHiglighted propriedade para true desenhar a imagem mais leve quando o botão estiver realçado (esse é o padrão). Defina a AdjustsImageWhenDisabled propriedade para true tornar a imagem mais escura quando o botão estiver desativado (novamente, esse é o padrão).

Para definir a imagem exibida no botão, use o seguinte código:

button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

Use a TintColor propriedade para definir uma tonalidade de cor aplicada ao título e à imagem do botão. Para botões do Custom tipo, essa propriedade não tem efeito, você mesmo deve implementar o TintColor comportamento.

Resumo

Este artigo abordou o design e o trabalho com botões dentro de um aplicativo Xamarin.tvOS. Ele mostrou como trabalhar com botões no iOS Designer e como criar botões no código C#. Finalmente, mostrou como modificar o título de um botão e alterar seu estilo e aparência.