Restrições de layout programático no Xamarin.iOS
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
ouHeightAnchor
) 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 TopAnchor
propriedades 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 fornecidoconstant
opcionalmente. - ConstraintGreaterThanOrEqualTo – define uma relação
first attribute >= second attribute + [constant]
em que com um valor de deslocamento fornecidoconstant
opcionalmente. - ConstraintLessThanOrEqualTo – define uma relação
first attribute <= second attribute + [constant]
em que com um valor de deslocamento fornecidoconstant
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:
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
, Top
Right
e e Bottom
a NSLayoutRelation
enum define a relação que será criada entre os atributos fornecidos como Equal
ou LessThanOrEqual
GreaterThanOrEqual
.
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:
- 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. - Opcionalmente, crie um
NSDictionary
que define um conjunto de chaves e valores (NSNumber
) usados como o valor Constante para a restrição. - Crie a cadeia de caracteres de formato para layout de uma única coluna ou linha de itens.
- Chame o
FromVisualFormat
método daNSLayoutConstraint
classe para gerar as restrições. - Chame o
ActivateConstraints
método daNSLayoutConstraint
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 AlignAllTop
NSLayoutFormatOptions
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.