データをロード中にWebViewの進捗状況を取得する方法、Xamarin.Forms

Question

私は異なるソースからのニュースを一覧表示するためにXamarin.Formsを使ってアプリケーションを開発しています。私はニュースに対応するリンクを開くためにwebViewを使用します。しかし、Safari Appの進行状況バーのように、WebページをWebビューに読み込んでいる間に進捗状況を表示したい。このために私はこのようなプログレスバーの要素を使用しています

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

とコードで私は

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

     } 

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

を使用していた。しかし、私はまた、データのロードの進行状況だけではなく、表示表示したいですロードしてロードしています。ユーザーにデータがロードされていることを知らせたい。これを達成する方法はありますか？

Answer 1

実装は、カスタムレンダリングによってプラットフォーム固有である必要があります。幸いなことに、このトピックはすでにSO上のさまざまなプラットフォームですでに議論されています。

this threadに基づいてAndroidのバージョン：iOSの上で

[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); 
      } 
     } 
    } 
} 

それは少しトリッキーです、ここでの仕事かなりよくそれをしない非常に単純なモックは次のとおりです。詳細については

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

ください。 hereを確認してください。

P .:このコード例は、githubで利用できます。