xamarin - 如何在 Android 的 xamarin 表单中从 customwebview 渲染器更新进度条？

Question

我目前正在 Xamarin Forms 中开发一个具有 Android 背景的应用程序，因此我想先创建一个 Android 应用程序，然后再创建一个 iOS 应用程序。

我是 Xamarin Forms 新手，正在努力了解如何使用 WebView 的自定义渲染器从 WebView 更新 ProgressBar。

在 Android 中，您可以使用 main_layout.xml 中的 ProgressBar 和 WebView 执行类似的操作

public class MainActivity extends Activity {

    private ProgressBar progressBar;
    private WebView webView;    

    @Override
    protected void onCreate(Bundle savedInstanceState) {     
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        progressBar = (ProgressBar) findViewById(R.id.progress);
        webView = (AdvancedWebView) findViewById(R.id.webView);
        // webview initialisation
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                // update progressbar progress
                progressBar.setProgress(newProgress);
           }
       });
        webView.setWebViewClient(new WebViewClient(this) {
            @Override
            public void onPageFinished(WebView view, String url) {
                // hide progressbar when it's done
                progressBar.setVisibility(View.GONE);
            }
        });
    }
}

在 Xamarin Forms 中，我在共享项目的 MainPage.xaml 中有此布局

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <ProgressBar
        x:Name="progress"
        Grid.Row="3"
        HorizontalOptions="FillAndExpand"
        Progress="0"
        VerticalOptions="Center" />

    <WebView
        x:Name="webview"
        Grid.Row="0"
        Grid.RowSpan="4"
        Grid.Column="0"
        HorizontalOptions="FillAndExpand"
        IsVisible="False"
        Source="https://google.com"
        VerticalOptions="FillAndExpand" />

</Grid>

public partial class App : Application
{
    public App ()
    {
        InitializeComponent();

        MainPage = new MainPage(); 
    }
}

这个自定义 WebView 在 android 项目中为 android 渲染

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebviewRenderer))]
namespace MyApp.Droid
{
    public class CustomWebviewRenderer: WebViewRenderer
    {
        private readonly Context context;

        public CustomWebviewRenderer(Context context) : base(context)
        {
            this.context = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            var formsWebView = e.NewElement as Xamarin.Forms.WebView;

            if (formsWebView != null)
            {
                var webView = Control as Android.Webkit.WebView;
                webView.SetWebViewClient(new CustomWebViewClient()); 
                webView.SetWebChromeClient(new CustomWebChromeClient());     
                webView.Settings.LoadWithOverviewMode = true;
                webView.Settings.UseWideViewPort = true;
                SetNativeControl(webView);
            }
        }

        private class ScoritoWebChromeClient : WebChromeClient
        {
            public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
            {
                // how to update progressbar progress?
                base.OnProgressChanged(view, newProgress);               
            }
        }

        private class CustomWebViewClient : WebViewClient
        {
            public override void OnPageFinished(Android.Webkit.WebView view, string url)
            {
                // how to hide progressbar?
                base.OnPageFinished(view, url);
            }

            public override void OnPageStarted(Android.Webkit.WebView view, string url, Bitmap favicon)
            {
                base.OnPageStarted(view, url, favicon);
            }

            public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, IWebResourceRequest request)
            {
                return base.ShouldOverrideUrlLoading(view, request);
            }
        }
    }
}

如何从 CustomWebviewRenderer 类中的 OnPageFinished 更新 MainPage.xaml 中的 ProgressBar 以显示网页已完成加载？我应该在 Android 项目中使用 MainActivity.cs 吗？

有人能指出我如何解决这个问题的正确方向吗？

Answer 1

更新:

在 PCL 中创建自定义 WebView 类:

 public class CustomWebView: WebView
 {   
    public static readonly BindableProperty ActionProperty = BindableProperty.Create(propertyName: nameof(Action), returnType: typeof(Action),
        declaringType: typeof(CustomWebView),
        defaultValue: null,
        defaultBindingMode: BindingMode.OneWay);

    public void InvokeAction()
    {
        if (Action == null || data == null)
        {
            return;
        }
        Action.Invoke();
    }

    public Action Action
    {
        get { return (Action)GetValue(ActionProperty); }
        set { SetValue(ActionProperty, value); }
    }

 }

使用此 CustomWebView 及其命名空间，如下所示:

<namespace:CustomWebView  x:Name="webview"
    Grid.Row="0"
    Grid.RowSpan="4"
    Grid.Column="0"
    HorizontalOptions="FillAndExpand"
    IsVisible="False"
    Source="https://google.com"
    VerticalOptions="FillAndExpand"/>  

但是，如果您仍然坚持使用渲染器，您可以做的是使用元素属性更新进度条并获取回调或更改属性，如下所示:

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebviewRenderer))]
 namespace MyApp.Droid
{
public class CustomWebviewRenderer: WebViewRenderer
{
    private readonly Context context;  

    public CustomWebviewRenderer(Context context) : base(context)
    {
        this.context = context;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);
        var formsWebView = e.NewElement as Xamarin.Forms.WebView;

        if (formsWebView != null)
        {
            var webView = Control as Android.Webkit.WebView;
            webView.SetWebViewClient(new CustomWebViewClient()); 
            webView.SetWebChromeClient(new CustomWebChromeClient());     
            webView.Settings.LoadWithOverviewMode = true;
            webView.Settings.UseWideViewPort = true;
            SetNativeControl(webView);
        }
    }

    private class ScoritoWebChromeClient : WebChromeClient
    {
        public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
        {
            // how to update progressbar progress?
            base.OnProgressChanged(view, newProgress);               
        }
    }

    private class CustomWebViewClient : WebViewClient
    {
        private _webView;
        public CustomWebViewClient (Xamarin.Forms.WebView webView) 
        {
          _webView=webView;
        }
        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            // how to hide progressbar?
            _webView.InvokeAction();
            base.OnPageFinished(view, url);
        }

        public override void OnPageStarted(Android.Webkit.WebView view, string url, Bitmap favicon)
        {
            base.OnPageStarted(view, url, favicon);
        }

        public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, IWebResourceRequest request)
        {
            return base.ShouldOverrideUrlLoading(view, request);
        }
    }
  }
}   

请注意，这只是一个示例，可以根据您的要求进行更改。

如果它不起作用或者您有查询恢复!