.NET Maui - AbsoluteLayout

.NET Maui - AbsoluteLayout

Neste artigo vou apresentar o layout AbsoluteLayout do .NET MAUI.

Se você esta chegando agora e não sabe o que é o .NET MAUI nem como usá-lo acompanhe o meu artigo : Criando seu primeiro projeto onde eu mostro como verificar e configurar o ambiente para criar sua primeira aplicação .NET MAUI.

Apresentando o AbsoluteLayout

As classes de Layout do .NET MAUI permitem organizar e agrupar controles de interface do usuário em seu aplicativo. Escolher uma classe de layout requer conhecimento de como o layout posiciona seus elementos filho e como o layout dimensiona seus elementos filho. Além disso, pode ser necessário aninhar layouts para criar o layout desejado.

Os principais layouts disponíveis no .NET MAUI são :

StackLayout
AbsoluteLayout
GridLayout
FlexlLayout

O AbsoluteLayout é um layout usado para posicionar e dimensionar filhos usando valores explícitos, incluindo valores absolutos e proporcionais.

A posição e o tamanho de um filho é definido pela configuração da propriedade anexada AbsoluteLayout.LayoutBounds de cada filho

A posição e o tamanho de um filho pode usar valores proporcionais no intervalo de 0 a 1 definindo a propriedade AbsoluteLayout.LayoutFlags.

Este layout deve ser considerado como um layout de finalidade especial a ser usado somente quando você pode impor um tamanho aos filhos ou quando o tamanho do elemento não afeta o posicionamento de outros filhos.

Principais Propriedades

A classe AbsoluteLayout define duas propriedades usadas para definir a posição, altura e largura de um filho :

1- AbsoluteLayout.LayoutBounds

Pode ser definida usando dois formatos, independentemente de valores absolutos ou proporcionais serem usados:

x, y - Indicam a posição do canto superior esquerdo do filho em relação ao pai. O filho se dimensiona

x, y, largura, altura - Os valores x e y indicam a posição do canto superior esquerdo do filho em relação ao pai, enquanto os valores de largura e altura indicam o tamanho do filho.

Para especificar que um filho se dimensiona horizontalmente ou verticalmente, ou ambos, basta definir os valores de largura e/ou altura para a AbsoluteLayout.AutoSize.

O valor padrão desta propriedade é : (0,0,AutoSize,AutoSize)

Nota: Proporcional - indica uma relação entre um layout e uma visualização e Absoluto - Define os valores com posição fixa. Obtém a posição, independentemente de caber na tela ou não.

Na figura a seguir temos um exemplo de LayouBounds definindo os valores de X e Y para indicar a posição
(canto superior esquerdo do filho em relação ao pai) e da largura e altura para indicar o tamanho do filho

A sintaxe usada no código XAML usa o nome do Layout AbsoluteLayout ponto e o nome da propriedade
seguido dos valores para x , y , width e height :

No exemplo a seguir exemplo estamos usando AbsoluteLayout que contem um BoxView como filho e estamos definindo os valores da posição (x,y) e da largura e altura do BoxView com cor Azul usando LayoutBounds.(como não indicamos o valor de LayoutFlags os valores são tratados como absolutos)

2- AbsoluteLayout.LayoutFlags

Esta propriedade permite indicar que a posição dos limites do layout e os valores de tamanho para um filho são proporcionais ao tamanho do AbsoluteLayout. Os valores possíveis são:

None – todo os valores tratados como absolutos (padrão)
Xproportional – x tratado como proporcional e os demais valores como absolutos
YProportional – y tratado como proporcional e os demais valores como absolutos
WidthProportional – trata o valor da largura como proporcional e os demais valores como absolutos
HeigthProprtional – trata o valor da altura como proporcional e os demais valores como absolutos
PositionProportional – x e y são tratados como proporcionais e os valores da largura e altura são tratados como absolutos
SizeProportional – trata os valores da largura e altura como proporcionais e os valores de posição como absolutos
All – Interpreta todos os valores como proporcionais

Criando o projeto .NET MAUI

A seguir vou mostrar alguns exemplos usando FlexLayout. Para isso vamos criar um novo projeto no VS 2022 usando o template .NET MAUI App chamado AppAbsoluteLayout :

A seguir vamos criar uma pasta Pages no projeto e nesta pasta vamos criar uma Content Page usando a opção .NET MAUI e selecionando .NET MAUI ContentPage (XAML) e informando o nome AbsoluteLayoutDemo1.xaml :

A seguir altere o código do arquivo App.xaml.cs definindo a MainPage conforme abaixo:

namespace AppAbsoluteLayout;
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new AbsoluteLayoutDemo1());
}
}

Vamos iniciar com um exemplo onde temos um layout definido com um BoxView com cor vermelha onde estamos usando o valor XProportional para LayoutFlags que vai considerar os valores para x como proporcionais e os demais como absolutos para LayoutBounds:

No primeiro BoxView, LayoutBounds é definido como 0, 50, 30, 30, o que significa que ele está posicionado no canto superior esquerdo da tela (0% da largura e 50 pixels da borda superior) e tem 30 por 30 pixels de tamanho.

No segundo BoxView, LayoutBounds é definido como 0.6, 100, 30, 30, o que significa que ele está posicionado a 60% da largura da tela e 100 pixels da borda superior, e tem 30 por 30 pixels de tamanho.

No terceiro BoxView, LayoutBounds é definido como 1, 150, 30, 30, o que significa que ele está posicionado na borda direita da tela (100% da largura) e 150 pixels da borda superior, e tem 30 por 30 pixels de tamanho.

Assim ao definir o LayoutFlags como XProportional, a posição horizontal da BoxView é proporcional à largura da tela, mas a posição vertical é definida absolutamente.

Usando o valor YProportional a posição vertical da BoxView é proporcional à largura da tela mas a posição horizontal e absoluta:

Vejamos agora outro exemplo onde vamos usar cinco BoxView cada uma com um cor, onde definimos o valor da enumeração para LayoutFlags como PositionProportional. Agora os valores de x e y são tratados como proporcionais e a largura e altura como absolutos para os valores de LayoutBounds :

Neste outro exemplo usamos o AbsoluteLayout para posicionar um botão no canto superior direito de uma página:

Ao usar PositionProportional indicamos que x e y são tratados como proporcionais e os valores da largura e altura são tratados como absolutos. Neste exemplo, a propriedade LayoutBounds do botão define a posição e o tamanho do botão no layout.

Os valores "0.9" e "0.1" significam que o botão deve ser posicionado a 90% da largura da tela e 10% da altura da tela a partir do canto superior esquerdo.

Os valores "100" e "50" significam que o botão deve ter uma largura de 100 unidades e uma altura de 50 unidades.

A propriedade LayoutFlags define como o AbsoluteLayout deve interpretar os valores de LayoutBounds.

Neste caso, estamos usando PositionProportional, o que significa que os valores de x e y de LayoutBounds são proporcionais à largura e altura da tela e os valores da largura e altura são tratados como absolutos

Vamos incluir mais dois botões um abaixo do outro, onde o segundo vai estar mais perto da base da página. Para isso basta alterar o valor de y :

Agora veremos um exemplo mostrando o uso do AbsoluteLayout com 3 filhos mostrando o AbsoluteLayout é capaz de posicionar os filhos para que eles se sobreponham usando usando as propriedades do AbsoluteLayout.

Neste exemplo, estamos adicionando 3 BoxView ao AbsoluteLayout, cada uma com uma cor diferente. A primeira BoxView é posicionada no canto superior esquerdo da tela, ocupando 30% da largura e 30% da altura da tela.

A segunda BoxView é posicionada no centro da tela, ocupando 40% da largura e 40% da altura da tela.

A terceira BoxView é posicionada a 60% da largura e 60% da altura da tela, e tem um tamanho absoluto de 100 por 100 unidades.

Observe que em cada BoxView definimos as propriedades LayoutBounds e LayoutFlags :

1- LayoutBounds define a posição e tamanho da BoxView no layout
2- LayoutFlags define como a BoxView deve ser posicionada e redimensionada em relação à sua posição e tamanho.

Na primeira BoxView, definimos LayoutFlags como All, o que significa que a posição e o tamanho da BoxView são proporcionais à largura e altura da tela.

Na segunda BoxView, definimos LayoutFlags como All novamente para tornar a posição e tamanho da BoxView proporcionais.

Na terceira BoxView, definimos LayoutFlags como PositionProportional para tornar a posição (x,y) da BoxView proporcional à tela, mas o tamanho (width e height) é definido com valores absolutos.

Para concluir temos uma variação do exemplo anterior onde agora estamos usando o valor WidthProportional para o BoxView Azul:

A primeira BoxView é posicionada no canto superior esquerdo da tela, ocupando 30% da largura e 30% da altura da tela.

A segunda BoxView é posicionada a 50% da largura e 50% da altura da tela, e tem um tamanho absoluto de 150 por 150 unidades.

A terceira BoxView é posicionada a 80% da largura da tela e 10% da altura da tela, e tem uma largura proporcional à largura da tela.

Observe que cada BoxView tem suas propriedades LayoutBounds e LayoutFlags definidas para controlar sua posição e tamanho no layout.

Na primeira BoxView, definimos LayoutFlags como All, o que significa que a posição e o tamanho da BoxView são proporcionais à largura e altura da tela.

Na segunda BoxView, definimos LayoutFlags como PositionProportional para tornar a posição e tamanho da BoxView proporcional à largura e altura da tela.

Na terceira BoxView, definimos LayoutFlags como WidthProportional para tornar a largura da BoxView proporcional à largura da tela, enquanto a altura é definida absolutamente.

Creio que com isso você já percebeu como usar este Layout.

E estamos conversados...

Disse Jesus: "Olhai para as aves do céu, que nem semeiam, nem segam, nem ajuntam em celeiros; e vosso Pai celestial as alimenta. Não tendes vós muito mais valor do que elas?"
Matheus 6:26

Referências:

José Carlos Macoratti

C# - Retornando múltiplos valores de um método - Tuplas

C# - 10 dicas para aumentar sua produtividade - Macoratti.net

C# - 5 Dicas para incrementar o desempenho do seu código

C# - Otimizando o código - Macoratti.net

Dicas para boas práticas de programação - Macoratti.net

C# - Guia para uma boa modelagem de classes - Macoratti.net

.NET - Padronização de código - Macoratti.net