Jak uzyskać postęp WebView podczas ładowania danych, Xamarin.Forms

Question

Zajmuję się tworzeniem aplikacji używającej Xamarin.Forms do wyświetlania informacji z różnych źródeł. Używam webView, aby otworzyć link odpowiadający wiadomościom. Ale chcę pokazać postępy podczas ładowania strony do widoku internetowego, np. Pasek postępu w aplikacji Safari. Do tego użyłem elementu ProgressBar tak:

<StackLayout> 
      <!-- WebView needs to be given height and width request within layouts to render. --> 

      <ProgressBar Progress ="" HorizontalOptions="FillAndExpand" x:Name="progress"/> 
      <WebView x:Name="webView" 
        HeightRequest="1000" 
        WidthRequest="1000" 
        VerticalOptions= "FillAndExpand" 
        Navigating="webOnNavigating" 
        Navigated="webOnEndNavigating"/> 
     </StackLayout> 

iw kodzie użyłem

void webOnNavigating (object sender, WebNavigatingEventArgs e) 
     { 
      progress.IsVisible = true; 

     } 

     void webOnEndNavigating (object sender, WebNavigatedEventArgs e) 
     { 
      progress.IsVisible = false; 
     } 

Ale chcę pokazać również postęp ładowania danych, a nie tylko wskazanie, że ładuje się i ładuje. Chcę, aby użytkownik wiedział, że dane są ładowane. Czy istnieje sposób, aby to osiągnąć.

Answer 1

Implementacje powinny być specyficzne dla platformy za pomocą niestandardowych renderowań. Na szczęście tematy te zostały już omówione na różnych platformach w SO.

Android w wersji na podstawie this thread:

[assembly: ExportRenderer(typeof(WebView), typeof(GenericWebViewRenderer))] 
namespace WebViewWithProgressBar.Droid 
{ 
    public class GenericWebViewRenderer : WebViewRenderer 
    { 
     Context ctx; 

     public GenericWebViewRenderer(Context context) : base(context) 
     { 
      ctx = context; 
     } 

     protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e) 
     { 
      base.OnElementChanged(e); 

      if (Control == null) 
       return; 

      var progressBar = new Android.Widget.ProgressBar(ctx, null, Android.Resource.Attribute.ProgressBarStyleHorizontal); 
      Control.SetWebChromeClient(new MyWebChromeClient(progressBar)); 

      Control.AddView(progressBar); 
     } 

     class MyWebChromeClient : Android.Webkit.WebChromeClient 
     { 
      Android.Widget.ProgressBar progressBar; 

      public MyWebChromeClient(Android.Widget.ProgressBar progressBar) 
      { 
       this.progressBar = progressBar; 
      } 

      public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress) 
      { 
       progressBar.SetProgress(newProgress, true); 
      } 
     } 
    } 
} 

iOS jest to nieco trudniejsze, tutaj jest bardzo prosty makiety, że robi to zadanie dość dobrze:

[assembly: ExportRenderer(typeof(WebView), typeof(GenericWebViewRenderer))] 
namespace WebViewWithProgressBar.iOS 
{ 
    public class GenericWebViewRenderer : ViewRenderer<WebView, UIWebView> 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<WebView> e) 
     { 
      base.OnElementChanged(e); 

      if (Control == null) 
      { 
       var progressBar = new UIProgressView(UIProgressViewStyle.Bar); 
       progressBar.TintColor = UIColor.Green; 
       progressBar.TrackTintColor = UIColor.Black; 
       progressBar.ProgressTintColor = UIColor.Red; 

       var webView = new UIWebView(Frame); 

       webView.AddSubview(progressBar); 

       SetNativeControl(webView); 

       Control.Delegate = new MyUIWebViewDelegate(progressBar); 

       webView.LoadRequest(new NSUrlRequest(new NSUrl("https://google.com"))); 
      } 
     } 

     class MyUIWebViewDelegate : UIWebViewDelegate 
     { 
      UIProgressView progressBar { get; } 

      public MyUIWebViewDelegate(UIProgressView progressBar) 
      { 
       this.progressBar = progressBar; 
      } 

      public override void LoadStarted(UIWebView webView) 
      { 
       progressBar.SetProgress(0.1f, false); 
      } 

      public override void LoadingFinished(UIWebView webView) 
      { 
       progressBar.SetProgress(1.0f, true); 
      } 

      public override void LoadFailed(UIWebView webView, NSError error) 
      { 
       // TODO: 
      } 
     } 
    } 
} 

Więcej szczegółów sprawdź here.

P.S .: Ten przykład kodu jest dostępny pod numerem github.