Compartilhar via

Trabalhando com visualizações empilhadas do 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.

O controle Stack View (UIStackView) aproveita o poder do Auto Layout e das Classes de Tamanho para gerenciar uma pilha de subvisualizações, horizontal ou verticalmente, que responde dinamicamente às alterações de conteúdo e ao tamanho da tela do dispositivo Apple TV.

O layout de todas as subexibições anexadas a uma Exibição de Pilha é gerenciado por ela com base em propriedades definidas pelo desenvolvedor, como eixo, distribuição, alinhamento e espaçamento:

Diagrama de layout de subexibição

Ao usar um UIStackView em um aplicativo Xamarin.tvOS, o desenvolvedor pode definir as subvisualizações dentro de um Storyboard no iOS Designer ou adicionando e removendo subvisualizações no código C#.

Sobre controles de exibição empilhados

O UIStackView é projetado como uma exibição de contêiner sem renderização e, como tal, não é desenhado para a tela como outras subclasses do UIView. Definir propriedades como BackgroundColor ou substituir DrawRect não terá efeito visual.

Há várias propriedades que controlam como um Modo de Exibição de Pilha organizará sua coleção de subexibições:

  • Eixo – Determina se o Modo de Exibição de Pilha organiza as subexibições Horizontal ou Verticalmente.
  • Alinhamento – Controla como as subexibições são alinhadas no Modo de Exibição de Pilha.
  • Distribuição – Controla como as subexibições são dimensionadas no Modo de Exibição de Pilha.
  • Espaçamento – Controla o espaço mínimo entre cada subvisualização no Modo de Exibição de Pilha.
  • Linha de base relativa – Se true, o espaçamento vertical de cada subexibição será derivado de sua linha de base.
  • Margens de layout relativas – coloca as subexibições em relação às margens de layout padrão.

Normalmente, você usará um Modo de Exibição de Pilha para organizar um pequeno número de subvisualizações. Interfaces de usuário mais complexas podem ser criadas aninhando uma ou mais exibições de pilha dentro umas das outras.

Você pode ajustar ainda mais a aparência das interfaces do usuário adicionando restrições adicionais às subexibições (por exemplo, para controlar a Altura ou a Largura). No entanto, deve-se tomar cuidado para não incluir restrições conflitantes àquelas introduzidas pelo próprio Modo de Exibição de Pilha.

Layout automático e classes de tamanho

Quando uma subexibição é adicionada a uma Exibição de Pilha, seu layout é totalmente controlado por essa Exibição de Pilha usando Layout Automático e Classes de Tamanho para posicionar e dimensionar as exibições organizadas.

O Modo de Exibição de Pilha fixará a primeira e a última subexibição de sua coleção nas bordas Superior e Inferior para Exibições de Pilha Vertical ou nas bordas Esquerda e Direita para Exibições de Pilha Horizontal. Se você definir a LayoutMarginsRelativeArrangement propriedade como true, o modo de exibição fixará as subvisualizações nas margens relevantes em vez da borda.

O Modo de Exibição de Pilha usa a propriedade da subexibição ao calcular o tamanho das IntrinsicContentSize subexibições ao longo do definido Axis (exceto para o FillEqually Distribution). O FillEqually Distribution redimensiona todas as subvisualizações para que tenham o mesmo tamanho, preenchendo assim a Visualização de pilha ao longo do Axis.

Com exceção do , o Modo de Exibição de Fill AlignmentPilha usa a propriedade da IntrinsicContentSize subexibição para calcular o tamanho da exibição perpendicular ao .Axis Para o Fill Alignment, todas as subexibições são dimensionadas de modo que preencham a Exibição de pilha perpendicularmente ao .Axis

Posicionando e dimensionando o modo de exibição de pilha

Embora o Modo de Exibição de Pilha tenha controle total sobre o layout de qualquer subexibição (com base em propriedades como Axis e Distribution), você ainda precisará posicionar o Modo de Exibição de Pilha (UIStackView) em seu modo de exibição pai usando Layout Automático e Classes de Tamanho.

Geralmente, isso significa fixar pelo menos duas arestas do Modo de Exibição de Pilha para expandir e contrair, definindo assim sua posição. Sem quaisquer restrições adicionais, o Modo de Exibição de Pilha será redimensionado automaticamente para se ajustar a todas as suas subexibições da seguinte maneira:

  • O tamanho ao longo dele Axis será a soma de todos os tamanhos de subvisualização mais qualquer espaço que tenha sido definido entre cada subexibição.
  • Se a LayoutMarginsRelativeArrangement propriedade for true, o tamanho Stack Views também incluirá espaço para as margens.
  • O tamanho perpendicular ao Axis será definido para a maior subexibição da coleção.

Além disso, você pode especificar restrições para a Altura e Largura do Modo de Exibição de Pilha. Nesse caso, as subexibições serão dispostas (dimensionadas) para preencher o espaço especificado pela Exibição de pilha, conforme determinado pelas Distribution propriedades e Alignment .

Se a BaselineRelativeArrangement propriedade for true, as subexibições serão dispostas com base na linha de base da primeira ou da última subexibição, em vez de usar a posição Y Superior, Inferior ou Central - . Eles são calculados no conteúdo do Modo de Exibição de Pilha da seguinte maneira:

  • Um Modo de Exibição de Pilha Vertical retornará a primeira subexibição para a primeira linha de base e a última para a última. Se qualquer uma dessas subexibições forem Stack Views, sua primeira ou última linha de base será usada.
  • Um Modo de Exibição de Pilha Horizontal usará sua subvisualização mais alta para a primeira e a última linha de base. Se o modo de exibição mais alto também for um Modo de Exibição de Pilha, ele usará sua subvisualização mais alta como linha de base.

Importante

O alinhamento da linha de base não funciona em tamanhos de subvisualização esticados ou compactados, pois a linha de base será calculada para a posição errada. Para Alinhamento da Linha de Base, verifique se a Altura da subexibição corresponde à Altura da Exibição de Conteúdo Intrínseco.

Usos comuns do modo de exibição de pilha

Há vários tipos de layout que funcionam bem com controles Stack View. De acordo com a Apple, aqui estão alguns dos usos mais comuns:

  • Definir o tamanho ao longo do eixo – Ao fixar ambas as bordas ao longo do modo de exibição Axis de pilha e uma das bordas adjacentes para definir a posição, o modo de exibição de pilha crescerá ao longo do eixo para se ajustar ao espaço definido por suas subvisualizações.
  • Definir a Posição da Subvisualização – Ao fixar as bordas adjacentes da Exibição de Pilha em sua exibição pai, a Exibição de Pilha crescerá em ambas as dimensões para se ajustar às subvisualizações que contêm.
  • Definir o Tamanho e a Posição da Pilha – Ao fixar todas as quatro bordas do Modo de Exibição de Pilha no modo de exibição pai, o Modo de Exibição de Pilha organiza as subexibições com base no espaço definido no Modo de Exibição de Pilha.
  • Definir o Tamanho Perpendicular ao Eixo – Ao fixar ambas as arestas perpendiculares à Vista Axis de Pilha e a uma das arestas ao longo do eixo para definir a posição, a Vista de Pilha crescerá perpendicularmente ao eixo para se ajustar ao espaço definido pelas suas subvistas.

Visualizações de pilha e storyboards

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

  1. No Solution Pad, clique duas vezes no arquivo e abra-o Main.storyboard para edição.

  2. Crie o layout dos elementos individuais que você adicionará ao Modo de Exibição de Pilha:

    Exemplo de layout de elemento

  3. Adicione quaisquer restrições necessárias aos elementos para garantir que eles sejam dimensionados corretamente. Esta etapa é importante depois que o elemento é adicionado ao modo de exibição de pilha.

  4. Faça o número necessário de cópias (quatro neste caso):

    O número necessário de cópias

  5. Arraste um Modo de Exibição de Pilha da Caixa de Ferramentas e solte-o no Modo de Exibição:

    Um modo de exibição de pilha

  6. Selecione a Visualização de Pilha, na guia Widget do Bloco de Propriedades, selecione Preencher para o Alinhamento, Preencher Igualmente para a Distribuição e insira 25 para o Espaçamento:

    A guia Widget

  7. Posicione o Modo de Exibição de Pilha na tela onde você deseja e adicione Restrições para mantê-lo no local necessário.

  8. Selecione os elementos individuais e arraste-os para o Modo de Exibição de Pilha:

    Os elementos individuais no Modo de Exibição de Pilha

  9. O layout será ajustado e os elementos serão organizados na Visualização de pilha com base nos atributos definidos acima.

  10. Atribua nomes na guia Widget do Gerenciador de propriedades para trabalhar com seus controles de interface do usuário em código C#.

  11. Salve suas alterações.

Importante

Embora seja possível atribuir ações como TouchUpInside a um elemento da interface do usuário (como um UIButton) no iOS Designer ao criar um manipulador de eventos, ele nunca será chamado porque a Apple TV não tem uma tela sensível ao toque ou oferece suporte a eventos de toque. Você deve sempre usar o padrão Action Type 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.

No caso do nosso exemplo, expomos uma Tomada e Ação para o Controle de Segmento e uma Tomada para cada "carta de jogador". No código, ocultamos e mostramos o player com base no segmento atual. Por exemplo:

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take Action based on the segment
    switch(PlayerCount.SelectedSegment) {
    case 0:
        Player1.Hidden = false;
        Player2.Hidden = true;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 1:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 2:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = true;
        break;
    case 3:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = false;
        break;
    }
}

Quando o aplicativo for executado, os quatro elementos serão igualmente distribuídos em nossa Visualização de pilha:

Quando o aplicativo for executado, os quatro elementos serão igualmente distribuídos em nosso Modo de Exibição de Pilha

Se o número de jogadores for reduzido, as visualizações não utilizadas ficarão ocultas e o Modo de Exibição de Pilha ajustará o layout para se ajustar:

Se o número de jogadores for diminuído, as visualizações não utilizadas ficarão ocultas e o Modo de Exibição de Pilha ajustará o layout para se ajustar

Preencher um modo de exibição de pilha a partir do código

Além de definir totalmente o conteúdo e o layout de uma Stack View no iOS Designer, você pode criá-la e removê-la dinamicamente do código C#.

Veja o exemplo a seguir que usa um modo de exibição de pilha para manipular "estrelas" em uma revisão (1 a 5):

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

Vamos dar uma olhada em algumas partes desse código em detalhes. Primeiro, usamos uma if instrução para verificar se não há mais de cinco "estrelas" ou menos de zero.

Para adicionar uma nova "estrela", carregamos sua imagem e definimos seu Modo de Conteúdo como Ajuste de Aspecto de Escala:

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

Isso evita que o ícone de "estrela" seja distorcido quando ele é adicionado ao Modo de Exibição de Pilha.

Em seguida, adicionamos o novo ícone de "estrela" à coleção de subvisualizações do Stack View:

RatingView.AddArrangedSubview(icon);

Você notará que adicionamos o UIImageView UIStackViewà propriedade do ArrangedSubviews e não ao SubView. Qualquer modo de exibição que você deseja que o Modo de Exibição de Pilha controle seu layout deve ser adicionado à ArrangedSubviews propriedade.

Para remover uma subvisualização de uma Visualização de Pilha, primeiro obtemos a subvisualização para remover:

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

Então precisamos removê-lo da ArrangedSubviews coleção e do Super View:

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

A remoção de uma subexibição apenas ArrangedSubviews da coleção a tira do controle da Visualização de Pilha, mas não a remove da tela.

Alterando dinamicamente o conteúdo

Um Modo de Exibição de Pilha ajustará automaticamente o layout das subexibições sempre que uma subexibição for adicionada, removida ou ocultada. O layout também será ajustado se qualquer propriedade do Modo de Exibição de Pilha for ajustada (como seu Axis).

As alterações de layout podem ser animadas colocando-as dentro de um Bloco de Animação, por exemplo:

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

Muitas das propriedades do Modo de Exibição de Pilha podem ser especificadas usando Classes de Tamanho em um Storyboard. Essas propriedades serão animadas automaticamente em resposta a alterações de tamanho ou orientação.

Resumo

Este artigo abordou o design e o trabalho com o Modo de Exibição Empilhado dentro de um aplicativo Xamarin.tvOS.