Partilhar via

Restrições de layout programático no Xamarin.iOS

  • Artigo

Este guia apresenta o trabalho com restrições de Layout Automático do iOS no código C# em vez de criá-las no Designer do iOS.

O Layout Automático (também chamado de "layout adaptável") é uma abordagem de design responsivo. Ao contrário do sistema de layout de transição, em que o local de cada elemento é embutido em código para um ponto na tela, o Layout Automático é sobre relações - as posições dos elementos em relação a outros elementos na superfície de design. No centro do Layout Automático está a ideia de restrições ou regras que definem o posicionamento de um elemento ou conjunto de elementos no contexto de outros elementos na tela. Como os elementos não estão vinculados a uma posição específica na tela, as restrições ajudam a criar um layout adaptável que tenha uma boa aparência em diferentes tamanhos de tela e orientações do dispositivo.

Normalmente, ao trabalhar com o Layout Automático no iOS, você usará o Construtor de Interfaces do Xcode para colocar graficamente restrições de layout em seus itens de interface do usuário. No entanto, pode haver momentos em que você precisa criar e aplicar restrições no código C#. Por exemplo, ao usar elementos de interface do usuário criados dinamicamente adicionados a um UIView.

Este guia mostrará como criar e trabalhar com restrições usando código C# em vez de criá-las graficamente no Construtor de Interfaces do Xcode.

Criando restrições programaticamente

Conforme mencionado acima, normalmente você trabalhará com restrições de layout automático no Designer do iOS. Para aqueles momentos em que você precisa criar suas restrições programaticamente, você tem três opções para escolher:

  • Âncoras de Layout – essa API fornece acesso às propriedades de âncora (como TopAnchor, BottomAnchor ou HeightAnchor) dos itens de interface do usuário que estão sendo restritos.
  • Restrições de layout – você pode criar restrições diretamente usando a NSLayoutConstraint classe .
  • Linguagem de Formatação Visual – fornece um método ascii de arte como para definir suas restrições.

As seções a seguir passarão por cada opção em detalhes.

Âncoras de Layout

Usando a NSLayoutAnchor classe , você tem uma interface fluente para criar restrições com base nas propriedades de âncora dos itens de interface do usuário que estão sendo restritos. Por exemplo, as guias de layout superior e inferior de um Controlador de Exibição expõem as TopAnchorpropriedades de âncora e HeightAnchor , BottomAnchor enquanto uma Exibição expõe as propriedades de borda, centro, tamanho e linha de base.

Importante

Além do conjunto padrão de propriedades de âncora, as exibições do iOS também incluem as LayoutMarginsGuides propriedades e ReadableContentGuide . Essas propriedades expõem UILayoutGuide objetos para trabalhar com as margens da Exibição e guias de conteúdo legíveis, respectivamente.

As Âncoras de Layout fornecem vários métodos para criar restrições em um formato compacto e fácil de ler:

  • ConstraintEqualTo – define uma relação em first attribute = second attribute + [constant] que com um valor de deslocamento fornecido constant opcionalmente.
  • ConstraintGreaterThanOrEqualTo – define uma relação first attribute >= second attribute + [constant] em que com um valor de deslocamento fornecido constant opcionalmente.
  • ConstraintLessThanOrEqualTo – define uma relação first attribute <= second attribute + [constant] em que com um valor de deslocamento fornecido constant opcionalmente.

Por exemplo:

// Get the parent view's layout
var margins = View.LayoutMarginsGuide;

// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;

// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;

// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);

Uma restrição de layout típica pode ser expressa simplesmente como uma expressão linear. Veja o exemplo seguinte:

Uma restrição de layout expressa como uma expressão linear

Que seria convertido na seguinte linha de código C# usando Âncoras de Layout:

PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;

Em que as partes do código C# correspondem às partes especificadas da equação da seguinte maneira:

Equação Código
Item 1 PurpleView
Atributo 1 LeadingAnchor
Relação ConstraintEqualTo
Multiplicador O padrão é 1.0, portanto, não especificado
Item 2 OrangeView
Atributo 2 TrailingAnchor
Constante 10.0

Além de fornecer apenas os parâmetros necessários para resolver uma determinada equação de restrição de layout, cada um dos métodos de Âncora de Layout impõe a segurança de tipo dos parâmetros passados a eles. Portanto, âncoras de restrição horizontais, como LeadingAnchor ou TrailingAnchor , só podem ser usadas com outros tipos de âncora horizontal e multiplicadores são fornecidas apenas para restrições de tamanho.

Restrições de layout

Você pode adicionar restrições de Layout Automático manualmente construindo diretamente um NSLayoutConstraint no código C#. Ao contrário do uso de Âncoras de Layout, você deve especificar um valor para cada parâmetro, mesmo que ele não tenha nenhum efeito sobre a restrição que está sendo definida. Como resultado, você acabará produzindo uma quantidade considerável de código clichê e difícil de ler. Por exemplo:

//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;

//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;

//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;

Em que a NSLayoutAttribute enumeração define o valor para as margens da exibição e corresponde às LayoutMarginsGuide propriedades como Left, TopRighte e Bottom a NSLayoutRelation enum define a relação que será criada entre os atributos fornecidos como Equalou LessThanOrEqualGreaterThanOrEqual.

Ao contrário da API de Âncora de Layout, os NSLayoutConstraint métodos de criação não realçam os aspectos importantes de uma restrição específica e não há verificações de tempo de compilação executadas na restrição. Como resultado, é fácil construir uma restrição inválida que lançará uma exceção em runtime.

Linguagem de formato visual

A Linguagem de Formato Visual permite definir restrições usando arte ASCII como cadeias de caracteres que fornecem uma representação visual da restrição que está sendo criada. Isso tem as seguintes vantagens e desvantagens:

  • A Linguagem de Formato Visual impõe apenas a criação de restrições válidas.
  • O Layout Automático gera restrições para o console usando a Linguagem de Formato Visual para que as mensagens de depuração se assemelhem ao código usado para criar a restrição.
  • A Linguagem de Formato Visual permite que você crie várias restrições ao mesmo tempo com uma expressão muito compacta.
  • Como não há validação do lado da compilação das cadeias de caracteres da Linguagem de Formato Visual, os problemas só podem ser descobertos em runtime.
  • Como a Linguagem de Formato Visual enfatiza a visualização sobre a integridade, alguns tipos de restrição não podem ser criados com ela (como proporções).

Execute as seguintes etapas ao usar a Linguagem de Formato Visual para criar uma restrição:

  1. Crie um NSDictionary que contenha os objetos View e Guias de Layout e uma chave de cadeia de caracteres que será usada ao definir os formatos.
  2. Opcionalmente, crie um NSDictionary que define um conjunto de chaves e valores (NSNumber) usados como o valor Constante para a restrição.
  3. Crie a cadeia de caracteres de formato para layout de uma única coluna ou linha de itens.
  4. Chame o FromVisualFormat método da NSLayoutConstraint classe para gerar as restrições.
  5. Chame o ActivateConstraints método da NSLayoutConstraint classe para ativar e aplicar as restrições.

Por exemplo, para criar uma restrição à esquerda e à direita na Linguagem de Formato Visual, você pode usar o seguinte:

// Get views being constrained
var views = new NSMutableDictionary (); 
views.Add (new NSString ("orangeView"), OrangeView);

// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);

// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);

Como a Linguagem de Formato Visual sempre cria restrições de ponto zero anexadas às margens da Exibição pai ao usar o espaçamento padrão, esse código produz resultados idênticos aos exemplos apresentados acima.

Para designs de interface do usuário mais complexos, como várias exibições filho em uma única linha, a Linguagem de Formato Visual especifica o espaçamento horizontal e o alinhamento vertical. Como no exemplo acima, em que especifica o AlignAllTopNSLayoutFormatOptions alinha todos os modos de exibição em uma linha ou coluna à parte superior.

Consulte o Apêndice de Linguagem de Formato Visual da Apple para obter alguns exemplos de especificação de restrições comuns e a Gramática de Cadeia de Caracteres de Formato Visual.

Resumo

Este guia apresentou a criação e o trabalho com restrições de Layout Automático em C# em vez de criá-las graficamente no Designer do iOS. Primeiro, ele analisou o uso de Âncoras de Layout (NSLayoutAnchor) para manipular o Layout Automático. Em seguida, ele mostrou como trabalhar com restrições de layout (NSLayoutConstraint). Por fim, ele foi apresentado usando a Linguagem de Formato Visual para Layout Automático.