Resumo do Capítulo 14. Layout absoluto

Artigo
07/13/2023

Observação

Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou completos.

Como StackLayout, AbsoluteLayout deriva de Layout<View> e herda uma Children propriedade . AbsoluteLayout implementa um sistema de layout que exige que o programador especifique as posições de seus filhos e, opcionalmente, seu tamanho. A posição é especificada pelo canto superior esquerdo do filho em relação ao canto superior esquerdo do AbsoluteLayout em unidades independentes do dispositivo. AbsoluteLayout também implementa um recurso de posicionamento e dimensionamento proporcional.

AbsoluteLayout deve ser considerado como um sistema de layout de finalidade especial a ser usado somente quando o programador puder impor um tamanho aos filhos (por exemplo, BoxView elementos) ou quando o tamanho do elemento não afetar o posicionamento de outros filhos. As HorizontalOptions propriedades e VerticalOptions não têm nenhum efeito sobre os filhos de um AbsoluteLayout.

Este capítulo também apresenta o importante recurso de propriedades associáveis anexadas que permitem que as propriedades definidas em uma classe (nesse caso AbsoluteLayout) sejam anexadas a outra classe (um filho do AbsoluteLayout).

AbsoluteLayout no código

Você pode adicionar um filho à Children coleção de um AbsoluteLayout usando o método padrão Add , mas AbsoluteLayout também fornece um método estendido Add que permite especificar um Rectangle. Outro Add método requer apenas um Point, caso em que o filho é irrestrito e se dimensiona.

Você pode criar um Rectangle valor com um construtor que requer quatro valores — os dois primeiros indicando a posição do canto superior esquerdo do filho em relação ao pai e os dois segundos indicando o tamanho do filho. Ou você pode usar um construtor que requer um Point valor e Size .

Esses Add métodos são demonstrados em AbsoluteDemo, que posiciona elementos BoxView usando Rectangle valores e um Label elemento usando apenas um Point valor.

O exemplo ChessboardFixed usa 32 BoxView elementos para criar o padrão de tabuleiro de xadrez. O programa fornece aos BoxView elementos um tamanho embutido em código de 35 unidades quadradas. O AbsoluteLayout tem seu HorizontalOptions e VerticalOptions definido LayoutOptions.Centercomo , o que faz com que o AbsoluteLayout tenha um tamanho total de 280 unidades quadradas.

Propriedades associáveis anexadas

Também é possível definir a posição e, opcionalmente, o tamanho de um filho de um AbsoluteLayout após ele ter sido adicionado à Children coleção usando o método AbsoluteLayout.SetLayoutBoundsestático . O primeiro argumento é o filho; o segundo é um Rectangle objeto . Você pode especificar que o filho se dimensione horizontalmente e/ou verticalmente definindo valores de largura e altura para a AbsoluteLayout.AutoSize constante.

O exemplo ChessboardDynamic coloca o AbsoluteLayout em um ContentView com um SizeChanged manipulador para chamar AbsoluteLayout.SetLayoutBounds todos os filhos para torná-los o maior possível.

A propriedade associável anexada que AbsoluteLayout define é o campo somente leitura estático do tipo BindableProperty chamado AbsoluteLayout.LayoutBoundsProperty. O método estático AbsoluteLayout.SetLayoutBounds é implementado chamando SetValue no filho com o AbsoluteLayout.LayoutBoundsProperty. O filho contém um dicionário no qual a propriedade associável anexada e seu valor são armazenados. Durante o layout, o AbsoluteLayout pode obter esse valor chamando AbsoluteLayout.GetLayoutBounds, que é implementado com uma GetValue chamada .

Dimensionamento e posicionamento proporcionais

AbsoluteLayout implementa um recurso de dimensionamento e posicionamento proporcional. A classe define uma segunda propriedade associável anexada, LayoutFlagsProperty, com os métodos estáticos AbsoluteLayout.SetLayoutFlags relacionados e AbsoluteLayout.GetLayoutFlags.

O argumento para AbsoluteLayout.SetLayoutFlags e o valor retornado de AbsoluteLayout.GetLayoutFlags é um valor do tipo AbsoluteLayoutFlags, uma enumeração com os seguintes membros:

Você pode combiná-los com o operador OR bit a bit C#.

Com esses sinalizadores definidos, determinadas propriedades da Rectangle estrutura de limites de layout usada para posicionar e dimensionar o filho são interpretadas proporcionalmente.

Quando o WidthProportional sinalizador é definido, um Width valor de 1 significa que o filho tem a mesma largura que o AbsoluteLayout. Uma abordagem semelhante é usada para a altura.

O posicionamento proporcional leva em conta o tamanho. Quando o XProportional sinalizador é definido, a X propriedade dos limites de Rectangle layout é proporcional. Um valor 0 significa que a borda esquerda do filho está posicionada na borda esquerda do AbsoluteLayout, mas uma posição de 1 significa que a borda direita do filho está posicionada na borda direita do AbsoluteLayout, não além da borda direita do AbsoluteLayout como você poderia esperar. Uma X propriedade de 0,5 centraliza o filho horizontalmente no AbsoluteLayout.

O exemplo ChessboardProportional demonstra o uso de dimensionamento e posicionamento proporcionais.

Trabalhando com coordenadas proporcionais

Às vezes, é mais fácil pensar no posicionamento proporcional de forma diferente de como ele é implementado no AbsoluteLayout. Talvez você prefira trabalhar com coordenadas proporcionais em que uma X propriedade de 1 posicione a borda esquerda do filho (em vez da borda direita) na borda direita do AbsoluteLayout.

Esse esquema de posicionamento alternativo pode ser chamado de "coordenadas filho fracionárias". Você pode converter de coordenadas filho fracionárias para os limites de layout necessários para AbsoluteLayout usar as seguintes fórmulas:

layoutBounds.X = (fractionalChildCoordinate.X / (1 - layoutBounds.Width))

layoutBounds.Y = (fractionalChildCoordinate.Y / (1 - layoutBounds.Height))

O exemplo ProportionalCoordinateCalc demonstra isso.

AbsoluteLayout e XAML

Você pode usar um AbsoluteLayout em XAML e definir as propriedades associáveis anexadas nos filhos de um AbsoluteLayout usando valores de atributo de AbsoluteLayout.LayoutBounds e AbsoluteLayout.LayoutFlags. Isso é demonstrado nos exemplos AbsoluteXamlDemo e ChessboardXaml . O último programa contém 32 BoxView elementos, mas usa um implícito Style que inclui a AbsoluteLayout.LayoutFlags propriedade para manter a marcação no mínimo.

Um atributo em XAML que consiste em um nome de classe, um ponto e um nome de propriedade é sempre uma propriedade associável anexada.

Sobreposições

Você pode usar AbsoluteLayout para construir uma sobreposição, que abrange a página com outros controles, talvez para proteger o usuário de interagir com os controles normais na página.

O exemplo SimpleOverlay demonstra essa técnica e também demonstra o ProgressBar, que exibe até que ponto um programa concluiu uma tarefa.

Um pouco de diversão

O exemplo DotMatrixClock exibe a hora atual com uma exibição simulada de matriz de pontos 5x7. Cada ponto é um BoxView (há 228 deles) dimensionado e posicionado no AbsoluteLayout.

O programa BouncingText anima dois Label objetos para saltar horizontal e verticalmente pela tela.