Come ottenere il progresso di WebView durante il caricamento dei dati, Xamarin.Forms

Question

Sto sviluppando un'applicazione utilizzando Xamarin.Forms per elencare le notizie da fonti diverse. Uso una webView per aprire il collegamento corrispondente alle notizie. Ma voglio mostrare i progressi durante il caricamento della pagina Web nella visualizzazione web, come la barra di avanzamento sull'app Safari. Per questo ho usato l'elemento ProgressBar in questo modo:

<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> 

e nel codice ho usato

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

     } 

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

Ma voglio anche mostrare l'avanzamento del caricamento dei dati, non solo l'indicazione che sta caricando e caricando. Voglio che l'utente sappia che i dati stanno caricando. C'è un modo per raggiungere questo obiettivo.

Answer 1

Le implementazioni devono essere specifiche della piattaforma tramite rendering personalizzati. Fortunatamente questo argomento è già stato discusso per diverse piattaforme qui su SO.

La versione di Android in base a 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); 
      } 
     } 
    } 
} 

Su iOS è un po 'più complicato, ecco un semplice finta che fa lavoro abbastanza bene:

[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: 
      } 
     } 
    } 
} 

Per maggiori dettagli controllare here.

P.S .: Questi esempi di codice sono disponibili su github.