Erstellen Sie Overlay Loader auf einer mobilen App mit Xamarin Formen

Question

Ich benutze Xamarin Formen und versuche, einen Overlay-Loader für meine Bildschirme zu erstellen. Aus meinen Ergebnissen muss ich ein absolutes Layout verwenden, das ich gemacht habe. Ich habe erreicht, dass der Loader auf einigen Bildschirmen funktioniert, aber wenn der Bildschirm ein wenig komplexer ist (mit verschachtelten Scrollviews, Rastern usw.), scheint es nicht zu funktionieren. Unten ist ein Beispiel des Codes, dass funktionierts:

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
    <StackLayout Padding="10" Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"> 
     <StackLayout Padding="0,85,0,0"> 
     <Image Source="myimage.png" HorizontalOptions="Center" VerticalOptions="Start" /> 
     </StackLayout> 

     <StackLayout Orientation="Vertical" Padding="10, 5, 10, 5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
     <Label Text="This works perfect"></Label> 
     </StackLayout> 
    </StackLayout> 

    <!-- Loader --> 
    <ContentView BackgroundColor="#222222" 
       Opacity="0.3" 
       AbsoluteLayout.LayoutFlags="All" 
       AbsoluteLayout.LayoutBounds="0,0,1,1" 
       IsVisible="{Binding IsIndicatorActive}"> 
     <ActivityIndicator AbsoluteLayout.LayoutFlags="All" 
         AbsoluteLayout.LayoutBounds="0,0,1,1" 
         VerticalOptions="{StaticResource LoaderPosition}" 
         HorizontalOptions="{StaticResource LoaderPosition}" 
         IsEnabled="{Binding IsIndicatorActive}" 
         IsRunning="{Binding IsIndicatorActive}" 
         IsVisible="{Binding IsIndicatorActive}" /> 
    </ContentView> 
    </AbsoluteLayout> 

Der folgende Code ist, was DOES NOT Arbeit:

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
    <StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"> 
     <ScrollView> 
     <StackLayout Padding="0,85,0,0"> 
      <Image Source="myimage.png" HorizontalOptions="Center" VerticalOptions="Start" /> 
     </StackLayout> 

     <StackLayout Orientation="Vertical" Padding="10, 5, 10, 5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
      <Label Text="This doesn't work"></Label> 
     </StackLayout> 
     </ScrollView> 

     <Grid HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" ColumnSpacing="0" RowSpacing="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="2*" /> 
      <ColumnDefinition Width="2*" /> 
     </Grid.ColumnDefinitions> 

     <Button Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" Text="Button1" Command="{Binding Button2Command}" /> 
     <Button Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Text="Button2" Command="{Binding Button2Command}" /> 
     </Grid> 
    </StackLayout> 

    <!-- Loader --> 
    <ContentView BackgroundColor="#222222" 
       Opacity="0.3" 
       AbsoluteLayout.LayoutFlags="All" 
       AbsoluteLayout.LayoutBounds="0,0,1,1" 
       IsVisible="{Binding IsIndicatorActive}"> 
     <ActivityIndicator AbsoluteLayout.LayoutFlags="All" 
         AbsoluteLayout.LayoutBounds="0,0,1,1" 
         VerticalOptions="{StaticResource LoaderPosition}" 
         HorizontalOptions="{StaticResource LoaderPosition}" 
         IsEnabled="{Binding IsIndicatorActive}" 
         IsRunning="{Binding IsIndicatorActive}" 
         IsVisible="{Binding IsIndicatorActive}" /> 
    </ContentView> 
    </AbsoluteLayout> 

Von meinem Verständnis hat es etwas mit der Tatsache zu tun Diese scrollviews und gridviews sind Verwaltete Layouts und absolute Layouts sind Unmanaged Layouts so dachte ich, wenn ich ein Stacklayout besetze das volle absolute Layout und danach die sc Rollview und Gridview zeigen das Stacklayout relativ zu seinem Parent an (so wie html das behandelt). Natürlich wird das nicht so gehandhabt (stattdessen bekomme ich nur einen leeren Bildschirm), was mich ratlos darüber macht, wie ich dieses Problem angehen würde.

Irgendwelche Ideen, wie ich dieses Problem umgehen und meine Loader-Anzeige haben kann, ohne meine Bildschirmanzeige zu beeinflussen? Vielen Dank!

Answer 1

Vielleicht wird dies einfacher sein:

https://components.xamarin.com/view/andhud

https://components.xamarin.com/view/btprogresshud

diejenigen implementieren Sie nur den Abhängigkeitsdienst verwenden müssen:

iOS Umsetzung:

http://pastie.org/10821570

Android Umsetzung:

http://pastie.org/10821571

Interface-Implementierung:

using System; 
namespace YourNameSpace 
{ 
    public interface IHudService 
    { 
     void ShowHud(string ProgressText = "Loading..."); 
     void HideHud(); 
     void SetText(string Text); 
     void SetProgress(double Progress, string ProgressText = ""); 
    } 
} 

Und, es zu benutzen einfach verwenden:

DependencyService.Get<IHudService>().ShowHud(); 
//Your Task... 
DependencyService.Get<IHudService>().HideHud();