.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 :
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)
<AbsoluteLayout> <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="100, 50, 150, 200" /> </AbsoluteLayout> |
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:
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:
<AbsoluteLayout> <BoxView Color="Red" AbsoluteLayout.LayoutFlags="XProportional" AbsoluteLayout.LayoutBounds="0, 50, 30, 30" /> <BoxView Color="Red" AbsoluteLayout.LayoutFlags="XProportional" AbsoluteLayout.LayoutBounds="0.6, 100, 30, 30" /> <BoxView Color="Red" AbsoluteLayout.LayoutFlags="XProportional" AbsoluteLayout.LayoutBounds="1, 150, 30, 30" /> </AbsoluteLayout> |
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:
<AbsoluteLayout> <BoxView Color="Red" AbsoluteLayout.LayoutFlags="YProportional" AbsoluteLayout.LayoutBounds="10, 0, 30, 30" /> <BoxView Color="Red" AbsoluteLayout.LayoutFlags="YProportional" AbsoluteLayout.LayoutBounds="100, 0.6, 30, 30" /> <BoxView Color="Red" AbsoluteLayout.LayoutFlags="YProportional" AbsoluteLayout.LayoutBounds="200, 1, 30, 30" /> </AbsoluteLayout> |
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 :
<AbsoluteLayout> <BoxView Color="Black" AbsoluteLayout.LayoutBounds=".5,.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" /> <BoxView Color="Yellow" AbsoluteLayout.LayoutBounds="1,.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" /> <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" /> <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25" AbsoluteLayout.LayoutFlags="PositionProportional" /> <BoxView Color="Green" AbsoluteLayout.LayoutBounds=".5,1,100,25" AbsoluteLayout.LayoutFlags="PositionProportional" /> </AbsoluteLayout> |
Neste outro exemplo usamos o AbsoluteLayout para
posicionar um botão no canto superior direito de uma página:
<AbsoluteLayout
BackgroundColor="LightGray"> <Button Text="Clique-me!" FontSize="Large" AbsoluteLayout.LayoutBounds="0.9, 0.1, 150, 50" AbsoluteLayout.LayoutFlags="PositionProportional"/> </AbsoluteLayout> |
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 :
<AbsoluteLayout
BackgroundColor="LightGray">
<Button Text="Clique-me!" FontSize="Large" AbsoluteLayout.LayoutBounds="0.9, 0.1, 150, 50" AbsoluteLayout.LayoutFlags="PositionProportional"/> <Button Text="Clique em mim!" FontSize="Large" AbsoluteLayout.LayoutBounds="0.9, 0.3, 150, 50" AbsoluteLayout.LayoutFlags="PositionProportional"/> <Button Text="Clique em mim!" FontSize="Large" AbsoluteLayout.LayoutBounds="0.9, 0.9, 150, 50" AbsoluteLayout.LayoutFlags="PositionProportional"/> </AbsoluteLayout> |
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.
<AbsoluteLayout
BackgroundColor="LightGray"> <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0.1, 0.1, 0.3, 0.3" AbsoluteLayout.LayoutFlags="All"/> <BoxView Color="Green" AbsoluteLayout.LayoutBounds="0.4, 0.4, 0.4, 0.4" AbsoluteLayout.LayoutFlags="All"/> <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0.6, 0.6, 100, 100" AbsoluteLayout.LayoutFlags="PositionProportional"/> </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:
<AbsoluteLayout
BackgroundColor="Cyan">
<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0.1, 0.1, 0.3, 0.3" AbsoluteLayout.LayoutFlags="All"/> <BoxView Color="Green" AbsoluteLayout.LayoutBounds="0.5, 0.5, 150, 150" AbsoluteLayout.LayoutFlags="PositionProportional"/> <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="200, 100, 0.5, 100" AbsoluteLayout.LayoutFlags="WidthProportional"/> </AbsoluteLayout> |
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:
NET - Unit of Work - Padrão Unidade de ...