Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Implementing font size with slider in Xamarin Forms webview

$
0
0

Hi everyone, I have implemented the font size with slider functionality in Xamarin Forms webview. Normally, the height of webview doesnt auto-fit content size, so I have used a custom renderer exploiting the OnPageFinished. Additionally, I used Javascript to return document.body.scrollheight and set the heightrequest of webview (since setting webview.ContentHeight was incorrect to fit the webview content).

        [assembly: ExportRenderer(typeof(ExtendedWebView), typeof(ExtendedWebViewRenderer))]
        namespace MyApp.Droid.Renderers
        {
            public class ExtendedWebViewRenderer : WebViewRenderer
            {
                public static int _webViewHeight;
                static ExtendedWebView _xwebView = null;
                WebView _webView;

                public ExtendedWebViewRenderer(Context context) : base(context)
                {
                }

                class ExtendedWebViewClient : WebViewClient
                {
                    WebView _webView;
                    public async override void OnPageFinished(WebView view, string url)
                    {
                        _webView = view;
                        if (_xwebView != null)
                        {
                            if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
                            {
                                view.EvaluateJavascript("(function(){document.getElementsByTagName('body')[0].style.marginBottom = '0';return document.body.scrollHeight;})()", new MyJavaScriptResult());
                            }
                            else
                            {
                                view.LoadUrl("(function(){document.getElementsByTagName('body')[0].style.marginBottom = '0';return document.body.scrollHeight;})()");
                            }
                            int i = 10;

                            view.Settings.JavaScriptEnabled = true;

                            while (view.ContentHeight < 100 && i-- > 0)
                            {
                                await Task.Delay(100);// wait here till content is rendered
                            }
                            //_xwebView.HeightRequest = view.ContentHeight;
                            MessagingCenter.Subscribe<MyJavaScriptResult, int>(this, "SetWebViewHeight", (sender, args) =>
                             {
                    // setting webview heightrequest from javaScriptResult sent using MessagingCenter.Send
                                 _xwebView.HeightRequest = args;
                             });
                        }
                        base.OnPageFinished(view, url);
                    }

                }

                protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
                {
                    base.OnElementChanged(e);
                    _xwebView = e.NewElement as ExtendedWebView;
                    _webView = Control;

                    if (e.OldElement == null)
                    {
                        _webView.SetWebViewClient(new ExtendedWebViewClient());
                    }

                }
            }

            class MyJavaScriptResult : Java.Lang.Object, IValueCallback
            {
                public MyJavaScriptResult()
                {

                }

                public void OnReceiveValue(Java.Lang.Object value)
                {
                    string jsonString = string.Empty;
                    try
                    {
                        jsonString = (string)value;
                        int result = Int32.Parse(jsonString);
                        MessagingCenter.Send(this, "SetWebViewHeight",result);
                    }
                    catch (FormatException)
                    {
                        Console.WriteLine($"Unable to parse '{jsonString}'");
                    }
                }
            }

        }

My problem is after including the font-size change feature, my height is incorrect ie., more such that blank space is seen after webview content when I increase or decrease font. I tried two possible ways I knew - (1) setting font by zooming the Android.Webkit.Webview's view.Settings.TextZoom = args; where args is given in % like zoom 100%, 150% etc.., (2) Modifying the original HtmlWebviewSource by adding style (<style> body { font-size: large/small;} </style>) in head tag dynamically and reloading the webview. Both on increasing/decreasing font leves blank space at bottom - because height is very large in (Javscript document.body.scrollheight) calculation while debugging

What I am missing..? What should I modify. Please assist. Thanks in advance

NOTE: My HTML has images and text, so I can't use HTMLlabel plugin


Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>