2

Estou precisando utilizar numa tela Grid(para organizar os Entry e Botões) e AbsoluteLayout(para ter a bolinha de espera(ou Loading) no meio da tela). Se isso é feito o Layout da tela fica deformada(imagem abaixo). Se tiro o AbsoluteLayout a tela fica organizada como deveria.

inserir a descrição da imagem aqui

Minha necessidade é utilizar a Grid e o AbsoluteLayout sem ter as deformações.

Segue o código XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodSuppy.Login"
             Title="FoodSuppy">
    <AbsoluteLayout>
        <Grid>
            <Grid.RowDefinitions>
                <!-- Define as linhas -->
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <BoxView Grid.Row="0"
                         BackgroundColor="Bisque"/>
            <BoxView Grid.Row="1"
                         BackgroundColor="Accent"/>
            <BoxView Grid.Row="2"
                         BackgroundColor="Aqua"/>
            <BoxView Grid.Row="3"
                         BackgroundColor="Beige"/>
            <BoxView Grid.Row="4"
                         BackgroundColor="Blue"/>

            <!-- Entry's -->
            <Entry Grid.Row="2"
                       x:Name="entryEmail" 
                       Text="[email protected]"
                       FontSize="Small"
                       VerticalOptions="StartAndExpand"/>
            <Entry Grid.Row="2"
                       x:Name="entrySenha" 
                       IsPassword="True"
                       Text="123456"
                       FontSize="Small"
                       VerticalOptions="CenterAndExpand"/>

            <!-- Botões -->
            <Button Grid.Row="3"
                    Text="Cadastro"
                    Clicked="btnCadastrarUserAsync"
                    TextColor="White"
                    HorizontalOptions="Start"
                    VerticalOptions="StartAndExpand"
                    FontSize="Small"
                    BackgroundColor="DodgerBlue"
                    Margin="0"/>
            <Button Grid.Row="3"
                    x:Name="btnAcessar" 
                    Clicked="btnAcessar_Clicked"
                    HorizontalOptions="Center"
                    VerticalOptions="StartAndExpand"
                    Text="Acessar"
                    TextColor="White"
                    FontSize="Small"
                    BackgroundColor="DodgerBlue"
                    Margin="0"/>
            <Button Grid.Row="3"
                    Text="Sair"
                    Clicked="Sair_Clicked"
                    HorizontalOptions="End"
                    VerticalOptions="StartAndExpand"
                    TextColor="White"
                    FontSize="Small"
                    BackgroundColor="DodgerBlue"
                    Margin="0"/>
        </Grid>

        <!-- Loading -->
        <StackLayout IsVisible="{Binding IsLoading}" 
                     AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                     AbsoluteLayout.LayoutFlags="All"  
                     BackgroundColor="DodgerBlue" 
                     Opacity="0.5">

            <!-- Loading -->
            <ActivityIndicator x:Name="actInd"
                               IsRunning="{Binding IsLoading}"
                               IsVisible="{Binding IsLoading}"
                               Color="DarkBlue"
                               HeightRequest="60"
                               WidthRequest="60"
                               BackgroundColor="Transparent"
                               HorizontalOptions="CenterAndExpand"
                               VerticalOptions="CenterAndExpand">
            </ActivityIndicator>
        </StackLayout>

    </AbsoluteLayout>
</ContentPage>

1 Resposta 1

2

TL;DR;

Você não precisa ter o AbsoluteLayout para obter o resultado que deseja. Só o Grid já é capaz de fornecer o layout.

Basta você incluir o StackLayout que contém o ActivityIndicator no final do grid, ocupando todas as linhas.

Assim:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodSuppy.Login"
             Title="FoodSuppy">
    <Grid>
        <Grid.RowDefinitions>
            <!-- Define as linhas -->
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- BoxViews -->
        ...

        <!-- Entry's -->
        ...

        <!-- Botões -->
        ...     

        <!-- Loading -->
        <StackLayout Grid.Row="0" Grid.RowSpan="5"
                     VerticalOptions="FillAndExpand"
                     HorizontalOptionsOptions="FillAndExpand"
                     IsVisible="{Binding IsLoading}" 
                     BackgroundColor="DodgerBlue" 
                     Opacity="0.5">
            <!-- Loading -->
            <ActivityIndicator x:Name="actInd"
                               IsRunning="{Binding IsLoading}"
                               IsVisible="{Binding IsLoading}"
                               Color="DarkBlue"
                               HeightRequest="60"
                               WidthRequest="60"
                               HorizontalOptions="Center"
                               VerticalOptions="Center">
            </ActivityIndicator>
        </StackLayout>
    </Grid>
</ContentPage>

Sobre o Grid

O segredo aqui está no funcionamento do Grid. Assim como o RelativeLyout e o AbsoluteLayout o Grid suporta a sobreposição de views (que é o efeito que você deseja).

Essa sobreposição é definida pela ordem na qual você declara os elementos no XAML: os elementos mais ao final do Grid, terão uma posição Z mais elevada do que os anteriores, independentepemente de que linha ou coluna eles estão ocupando.

Isso permite que elaboremos layouts com sobreposição à vontade. Veja essa imagem (com uma pseudo perspectiva), por exemplo:

layout de exemplo

Poderíamos usar o Grid para representá-la dessa forma:

<Grid BackgroundColor="Silver"
      ColumnSpacing="10"
      RowSpacing="10"
      Padding="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <BoxView Grid.Column="0" Grid.Row="0"
         Color="OrangeRed"/>

    <BoxView Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
         Color="MediumSlateBlue"
         Margin="5,20"/>

    <BoxView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"
         Color="Green"
         Margin="10,0"/>

    <BoxView Grid.Column="1" Grid.Row="0" Grid.RowSpan="3"
         Color="Gold"
         Margin="0,25"/>    

    <BoxView Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"
         Color="White"
         Margin="-5"/>

    <BoxView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2"
         Color="Black"
         Opacity="0.4"
         Margin="20,30"/>
</Grid>

O resultado disso é:

exemplo do layout implementado

Note que, por ter sido definido por último o box preto está por cima de todos. Exatamente como você precisa com o ActivityIndicator.

Usando o AbsoluteLayout

Caso ainda assim prefira usar o absolute layout, você precisará definir os LayoutBounds e LayoutFlags para todos os elementos que estiverem dentro.

No seu caso, o XAML ficaria assim:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodSuppy.Login"
             Title="FoodSuppy">
    <AbsoluteLayout>
        <Grid AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
              AbsoluteLayout.LayoutFlags="All">
            <Grid.RowDefinitions>
                <!-- Define as linhas -->
                ...
            </Grid.RowDefinitions>

            <!-- BoxViews -->
            ...

            <!-- Entry's -->
            ...

            <!-- Botões -->
            ...

        </Grid>

        <!-- Loading -->
        <StackLayout IsVisible="{Binding IsLoading}" 
                     AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                     AbsoluteLayout.LayoutFlags="All"  
                     BackgroundColor="DodgerBlue" 
                     Opacity="0.5">

            <!-- Loading -->
            ...
        </StackLayout>

    </AbsoluteLayout>
</ContentPage>

A mesma regra de sobreposição se aplica: Os itens mais abaixo no XAML ficam 'sobre' os anteriores

Espero ter ajudado.

1
  • 1
    Simplesmente incrível, funcionou perfeitamente e aprendi mais uma. Commented 30/05/2018 às 14:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .