Resumo do Capítulo 14. Layout absoluto
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 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 das unidades independentes do AbsoluteLayout dispositivo. AbsoluteLayout também implementa um recurso de posicionamento e dimensionamento proporcional.
AbsoluteLayout deve ser considerado como um sistema de layout de propósito especial a ser usado somente quando o programador pode impor um tamanho aos filhos (por exemplo, BoxView elementos) ou quando o tamanho do elemento não afeta o posicionamento de outros filhos. As HorizontalOptions propriedades e VerticalOptions não têm efeito sobre os filhos de um AbsoluteLayout.
Este capítulo também apresenta o importante recurso de propriedades vinculáveis anexadas que permitem que propriedades definidas em uma classe (neste 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 a criança é irrestrita 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 um Size .
Esses Add métodos são demonstrados em AbsoluteDemo, que posiciona BoxView elementos usando Rectangle valores e um Label elemento usando apenas um Point valor.
O exemplo ChessboardFixed usa 32 BoxView elementos para criar o padrão do tabuleiro de xadrez. O programa dá aos BoxView elementos um tamanho codificado de 35 unidades quadradas. O AbsoluteLayout tem seu HorizontalOptions e VerticalOptions definido como LayoutOptions.Center, o que faz com que o AbsoluteLayout tenha um tamanho total de 280 unidades quadradas.
Propriedades vinculáveis anexadas
Também é possível definir a posição e, opcionalmente, o tamanho de um filho de um AbsoluteLayout depois de ter sido adicionado à Children coleção usando o método AbsoluteLayout.SetLayoutBoundsestático . O primeiro argumento é a criança; o segundo é um Rectangle objeto. Você pode especificar que o filho se dimensione horizontalmente e/ou verticalmente definindo os 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 estático somente leitura do tipo BindableProperty chamado AbsoluteLayout.LayoutBoundsProperty. O método estático AbsoluteLayout.SetLayoutBounds é implementado chamando SetValue o 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 AbsoluteLayout.SetLayoutFlags estáticos 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:
None(igual a 0)XProportional(1)YProportional(2)PositionProportional(3)WidthProportional(4)HeightProportional(8)SizeProportional(12)All(\xFFFFFFFF)
Você pode combiná-los com o operador OR bit a bit do C#.
Com esses sinalizadores definidos, determinadas propriedades da estrutura de limites de Rectangle 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 consideração o tamanho. Quando o XProportional sinalizador é definido, a X Rectangle propriedade dos limites do layout é proporcional. Um valor de 0 significa que a borda esquerda da criança está posicionada na borda esquerda do AbsoluteLayout, mas uma posição de 1 significa que a borda direita da criança 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 a criança horizontalmente no AbsoluteLayout.
A amostra do 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 do que em como ele é implementado no AbsoluteLayout. Você pode preferir trabalhar com coordenadas proporcionais em que uma X propriedade de 1 posiciona a borda esquerda do filho (em vez da borda direita) contra a borda direita do AbsoluteLayout.
Esse esquema de posicionamento alternativo pode ser chamado de "coordenadas fracionárias da criança". 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 in 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 cobre 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 de matriz de pontos 5x7 simulada. Cada ponto é de tamanho ( BoxView há 228 deles) e posicionado AbsoluteLayoutno .
O programa BouncingText anima dois Label objetos para saltar horizontal e verticalmente pela tela.