Loading while searching JSON

Question

Loading while searching JSON

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I need to create a "Loading" when I click a JSON information fetch button on a website. Loading needs to be in the middle of the screen.

Code:

<?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.Tela.PesquisaCidade">

    <AbsoluteLayout>
        <StackLayout BackgroundColor="Bisque">

            <StackLayout HorizontalOptions="CenterAndExpand" 
                         BackgroundColor="HotPink">
            <!-- Pesquisa -->
                <SearchBar x:Name="MainSearchBar"
                       SearchButtonPressed="MainSearchBar_OnSearchButtonPressed"
                       Placeholder="Digite o nome da cidade..." 
                       TextColor="Black"/>
            </StackLayout>

            <StackLayout BackgroundColor="Aqua">
                <ListView x:Name="lstCidade" 
                          HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                    <Label Text="{Binding IBGE}" 
                                       TextColor="Blue" 
                                       FontSize="0" 
                                       HorizontalOptions="Start"/>
                                    <Label Text="{Binding CIDADE}" 
                                       TextColor="Blue" 
                                       FontSize="Large" 
                                       HorizontalOptions="End"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>

            <!-- Loading -->
            <StackLayout x:Name="LoadingStack"  
                            AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                            AbsoluteLayout.LayoutFlags="All" 
                            Opacity="0.5"
                            HeightRequest="500">

                <!-- Loading -->
                <ActivityIndicator x:Name="actInd"
                                    Color="Blue"
                                    HeightRequest="20"
                                    WidthRequest="20"
                                    BackgroundColor="Transparent"
                                    HorizontalOptions="CenterAndExpand"
                                    VerticalOptions="CenterAndExpand">
                </ActivityIndicator>

            </StackLayout>
        </StackLayout>
    </AbsoluteLayout>
</ContentPage>

xamarin xamarin-forms

asked by anonymous 18.04.2018 / 19:35

2 answers

1

Using AbsoluteLayout , the property LayoutBounds gets the arguments in that order :

Horizontal positioning
Vertical positioning
Width
Height

These values can either be relative (to the parent element) or absolute. This is determined by the LayoutFlags property.

In your case, specifying "0,0,1,1" and All , you are saying that the last StackLayout has all relative values (position and size), is positioned at the beginning of the parent element and will occupy its entire size .

Relative values range from 0 (representing the position / size of the beginning of the axis) to 1 (representing the position / size of the end of the axis). To illustrate, in your configuration the ActivityIndicator would be in the A point and you want it in the B point, imagining that this is the AbsoluteLayout where it is:

  0 ______0.5_______1 ← X
   |A              |
   |               |
   |               |
   |               |
   |               |
   |               |
0.5|       B       | 
   |               |
   |               |
   |               |
   |               |
   |               |
  1¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
  ↑
  Y

To position it correctly, replace your last StackLayout with this code *:

<ActivityIndicator x:Name="actInd"
                   Color="Blue"
                   AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
                   AbsoluteLayout.LayoutFlags="All" 
                   Opacity="0.5"
                   HeightRequest="20"
                   WidthRequest="20"
                   BackgroundColor="Transparent"
                   HorizontalOptions="CenterAndExpand"
                   VerticalOptions="CenterAndExpand">
</ActivityIndicator>

* It's interesting to avoid using StackLayout when it has only one child element. It can almost always be replaced by the element itself. Check out some tips to explore the best of performance with Xamarin.Forms in this article

21.04.2018 / 18:42

php display text according to time What are the differences between ASP.Net MVC and ASP.Net Razor Pages?

score 1 · Accepted Answer

One of my friends sent me a code solving the problem, I'll post it in case anyone needs it:

<AbsoluteLayout>
    <StackLayout BackgroundColor="Green"  HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     AbsoluteLayout.LayoutBounds="1, 1, 1, 1"
                     AbsoluteLayout.LayoutFlags="All">

        <StackLayout HorizontalOptions="CenterAndExpand" 
                     BackgroundColor="Red">
            <!-- Pesquisa -->
            <Label Text="Parte 1" />
            <SearchBar x:Name="MainSearchBar"
                       HeightRequest="30" HorizontalOptions="FillAndExpand"
                   SearchButtonPressed="MainSearchBar_OnSearchButtonPressed"
                   Placeholder="Digite o nome da cidade..." 
                   TextColor="Black"
                       Text="XW" />
        </StackLayout>

        <StackLayout BackgroundColor="Yellow">
            <Label Text="Parte 1" />
            <ListView x:Name="lstCidade" 
                      HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Label Text="{Binding IBGE}" 
                                   TextColor="Blue" 
                                   FontSize="0" 
                                   HorizontalOptions="Start"/>
                                <Label Text="{Binding CIDADE}" 
                                   TextColor="Blue" 
                                   FontSize="Large" 
                                   HorizontalOptions="End"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </StackLayout>

    <!-- Loading -->
    <StackLayout x:Name="LoadingStack" IsVisible="{Binding Loading}"
                        AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                        AbsoluteLayout.LayoutFlags="SizeProportional" 
                        BackgroundColor="White"
                        Opacity="0.5">

        <!-- Loading -->
        <ActivityIndicator x:Name="actInd"
                           IsVisible="True"
                           IsRunning="True"
                                Color="Blue"
                                HeightRequest="20"
                                WidthRequest="20"
                                BackgroundColor="Transparent"
                                HorizontalOptions="CenterAndExpand"
                                VerticalOptions="CenterAndExpand">
        </ActivityIndicator>

    </StackLayout>
</AbsoluteLayout>