Question

我使用以下方法将Xamarin android用于zoomIn文字：

    button4.Click += zoomIn;
    private void zoomIn(object sender, EventArgs e)
    {
        web_view.Settings.TextZoom = (web_view.Settings.TextZoom + 10);
    }

但现在我正在使用xamarin表单，但这种方法对我没有帮助。我怎么能这样做？

Answer 1

如果你想使用原生WebView的方法来安卓，你可以

在便携式lib中创建您自己的WebView以注册此类属性以进行放大/缩小。
为Android操作系统中的WebView创建自定义渲染器。

例如：

创建自己的WebView：

public class MyWebView:WebView
{

        public int ZoomInLevel
    {
        get { return (int)GetValue(ZoomInLevelProperty); }
        set { SetValue(ZoomInLevelProperty, value); }
    }

    public static readonly BindableProperty ZoomInLevelProperty =
        BindableProperty.Create(
            propertyName: "ZoomInLevel",
            returnType: typeof(int),
            declaringType:typeof(MyWebView),
            defaultValue:3,
            propertyChanged: OnZoomInLevelPropertyChanged);

    private static void OnZoomInLevelPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {           
    }

}

使用此控件：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YOUR-PROJECT-NAMESPACE"
             x:Class="FormsIssue.Page1">
    <StackLayout>
        <local:MyWebView x:Name="webView" Source="http://stackoverflow.com/questions/41328371/zoom-text-of-webview-in-xamarin-forms"
                 HeightRequest="600" WidthRequest="400"/>

        <Button Text="Zoom" Clicked="Button_Clicked"/>
    </StackLayout>
</ContentPage>

在你的android项目中自定义你的渲染器：

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
namespace FormsIssue.Droid
{
    public class MyWebViewRenderer:WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null || Element == null)
            {
                return;
            }
            var element = Element as MyWebView;
            Control.Settings.TextZoom = element.ZoomInLevel;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (Control != null)
            {
                Control.Settings.BuiltInZoomControls = true;

                //to show the default zoom controls, if you want to use your own button, set this property to false.
                Control.Settings.DisplayZoomControls = true;
            }

            var element = Element as MyWebView;
            Control.Settings.TextZoom = element.ZoomInLevel;

            base.OnElementPropertyChanged(sender, e);
        }
    }
}

最后，在按钮点击事件中，您可以更改此属性：

private void Button_Clicked(object sender, EventArgs e)
{
    webView.ZoomInLevel = 100;
}

<强>更新

我修改了我的代码，因此每次点击ZoomIn按钮时，WebView都会被放大，所以当点击ZoomOut按钮时：

private void ZoomIn_Clicked(object sender, EventArgs e)
{
    webView.ZoomInLevel += 10;
}

private void ZoomOut_Clicked(object sender, EventArgs e)
{
    webView.ZoomOutLevel -= 10;
}

MyWebView：

public class MyWebView : WebView
{
    public int ZoomInLevel
    {
        get { return (int)GetValue(ZoomInLevelProperty); }
        set { SetValue(ZoomInLevelProperty, value); }
    }

    public static readonly BindableProperty ZoomInLevelProperty =
        BindableProperty.Create(
            propertyName: "ZoomInLevel",
            returnType: typeof(int),
            declaringType: typeof(MyWebView),
            defaultValue: 3,
            propertyChanged: OnZoomLevelPropertyChanged);

    public int ZoomOutLevel
    {
        get { return (int)GetValue(ZoomOutLevelProperty); }
        set { SetValue(ZoomOutLevelProperty, value); }
    }

    public static readonly BindableProperty ZoomOutLevelProperty =
        BindableProperty.Create(
            propertyName: "ZoomOutLevel",
            returnType: typeof(int),
            declaringType: typeof(MyWebView),
            defaultValue: 3,
            propertyChanged: OnZoomLevelPropertyChanged);

    private static void OnZoomLevelPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
    }
}

自定义渲染器：

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
namespace FormsIssue.Droid
{
    public class MyWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null || Element == null)
            {
                return;
            }

            //Initial zoom
            var element = Element as MyWebView;
            element.ZoomInLevel = element.ZoomOutLevel = Control.Settings.TextZoom;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (Control != null)
            {
                Control.Settings.BuiltInZoomControls = true;

                //to show the default zoom controls, if you want to use your own button, set this property to false.
                Control.Settings.DisplayZoomControls = true;
            }

            var element = Element as MyWebView;
            //ZoomIn
            if (e.PropertyName == "ZoomInLevel")
                element.ZoomOutLevel = Control.Settings.TextZoom = element.ZoomInLevel;
            //ZoomOut
            else if (e.PropertyName == "ZoomOutLevel")
                element.ZoomInLevel = Control.Settings.TextZoom = element.ZoomOutLevel;

            base.OnElementPropertyChanged(sender, e);
        }
    }
}

以xamarin形式缩放webview的文本

1 个答案: