Compartilhar via


Introdução aos storyboards no Xamarin.Mac

Este artigo fornece uma introdução ao trabalho com Storyboards em um aplicativo Xamarin.Mac. Ele aborda a criação e manutenção da interface do usuário do aplicativo usando storyboards e o Interface Builder do Xcode.

Os storyboards permitem que você desenvolva uma Interface do Usuário para seu aplicativo Xamarin.Mac que não apenas inclui as definições e controles de janela, mas também contém os links entre diferentes janelas (via segues) e estados de exibição.

Uma interface do usuário de exemplo no Xcode

Este artigo fornecerá uma introdução ao uso de Storyboards para definir a interface do usuário de um aplicativo Xamarin.Mac.

O que são Storyboards?

Usando Storyboards, toda a interface do usuário de um aplicativo Xamarin.Mac pode ser definida em um único local com toda a navegação entre seus elementos individuais e interfaces de usuário. Os storyboards para Xamarin.Mac funcionam de forma muito semelhante aos Storyboards para Xamarin.iOS. No entanto, eles contêm um conjunto diferente de Tipos de Segue por causa dos diferentes idiomas de interface.

Trabalhando com cenas

Como dito acima, um Storyboard define toda a interface do usuário de um determinado aplicativo dividida em uma visão geral funcional de seus controladores de exibição. No Construtor de Interfaces do Xcode, cada um desses controladores vive em sua própria Cena.

Um exemplo de controlador de exibição

Cada Cena representa um determinado par de controladores de exibição e exibição com um conjunto de linhas (chamadas Segues) que conectam cada cena na interface do usuário, mostrando assim suas relações. Alguns Segues definem como um View Controller contém um ou mais View Views ou View Controllers filho. Outros Segues, defina transições entre o View Controller (como exibir um popover ou caixa de diálogo).

Um exemplo de acompanhamento

A coisa mais importante a observar é que cada Segue representa o fluxo de alguma forma de dados entre o elemento dado da interface do usuário do aplicativo.

Trabalhando com controladores de exibição

Os controladores de exibição definem as relações entre uma determinada exibição de informações em um aplicativo Mac e o modelo de dados que fornece essas informações. Cada cena de nível superior no Storyboard representa um View Controller no código do aplicativo Xamarin.Mac.

Um exemplo de controlador de exibição desliza

Dessa forma, cada View Controller é um emparelhamento autocontido e reutilizável da representação visual da informação (View) e da lógica para apresentar e controlar essa informação.

Dentro de uma determinada cena, você pode fazer todas as coisas que normalmente seriam manipuladas por arquivos individuais .xib :

  • Coloque subexibições e controles (como botões e caixas de texto).
  • Defina posições de elementos e restrições de layout automático.
  • Ações de conexão e saídas para expor elementos da interface do usuário ao código.

Trabalhando com a Segues

Como dito acima, o Segues fornece as relações entre todas as Cenas que definem a interface do usuário do seu aplicativo. Se você está familiarizado com o trabalho em Storyboards no iOS, sabe que o Segues para iOS geralmente define transições entre visualizações em tela cheia. Isso difere do macOS, quando o Segues geralmente define "contenção" (onde uma Cena é filha de uma Cena pai).

No macOS, a maioria dos aplicativos tende a agrupar suas visualizações na mesma janela usando elementos da interface do usuário, como Visualizações divididas e Guias. Ao contrário do iOS, onde as visualizações precisam ser transferidas dentro e fora da tela, devido ao espaço físico limitado na tela.

Dadas as tendências do macOS para a contenção, há situações em que os Presentation Segues são usados, como Modal Windows, Sheet Views e Popovers.

Ao usar Presentation Segues, você pode substituir o PrepareForSegue método do controlador de exibição pai para apresentação para inicializar e variáveis e fornecer quaisquer dados para o controlador de exibição que está sendo apresentado.

Design e tempos de execução

Em tempo de design (quando o layout da interface do usuário no Construtor de Interfaces do Xcode), cada elemento da interface do usuário do aplicativo é dividido em seus itens constituintes:

  • Cenas - Que são compostas por:
    • View Controller - Define as relações entre as Exibições e os dados que as suportam.
    • Views e Subviews - Os elementos reais que compõem a interface do usuário.
    • Sequências de Contenção - Que definem as relações pai-filho entre as Cenas.
  • Apresentações - Que definem modos de apresentação individuais.

Ao definir cada elemento dessa maneira, ele permite o carregamento lento de cada elemento apenas conforme for necessário durante o tempo de execução. No macOS, todo o processo foi projetado para permitir que o desenvolvedor crie interfaces de usuário complexas e flexíveis que exigem um mínimo de código de backup para fazê-las funcionar, tudo isso enquanto é o mais eficiente possível com os recursos do sistema.

Início rápido do storyboard

No guia de Início Rápido do Storyboard, criaremos um aplicativo Xamarin.Mac simples que apresenta os principais conceitos de trabalho com storyboards para criar uma Interface do Usuário. O aplicativo de exemplo consistirá em uma Exibição Derramada contendo uma Área de Conteúdo e uma Área do Inspetor e apresentará uma janela de diálogo de Preferências simples. Usaremos o Segues para unir todos os elementos da Interface do Usuário.

Trabalhando com Storyboards

Esta seção aborda os detalhes detalhados de Trabalhando com Storyboards em um aplicativo Xamarin.Mac. Analisamos detalhadamente as Cenas e como elas são compostas por Controladores de Exibição e Exibição. Em seguida, vamos dar uma olhada em como as Cenas estão ligadas com as Sequências. Finalmente, vamos dar uma olhada no trabalho com tipos personalizados do Segue.

Resumo

Este artigo deu uma olhada rápida no trabalho com Storyboards em um aplicativo Xamarin.Mac. Vimos como criar um novo aplicativo usando storyboards e como definir uma interface de usuário. Também vimos como navegar entre diferentes janelas e exibir estados usando segues.