如何使用 CustomWebViewRenderer 使 WKWebView 的高度适合其在 Xamarin 中的内容? [英] How do I make WKWebView's height fit its contents in Xamarin with a CustomWebViewRenderer?

问题描述

我为 iOS 制作了一个自定义 webview 渲染器，我手动用 WKWebView 替换了自定义 WebView.但是，我的主要目的是让 WKWebView 根据其内容调整其高度.它的内容由带有正文的预定义 HTML 字符串组成.

I've made a Custom webview renderer for iOS where I manually replace a custom WebView with a WKWebView. However, my main purpose is to make the WKWebView adjust it's height according to it's contents. It's contents consist of predefined HTML string with body.

现在它切断了 Webview，其余的内容都塞在了滚动视图中.我放在 webview 之前的图像和文本也保持固定不变，同时我也希望它们向下滚动.我不想要 webview 的滚动条，我只希望 webview 的大小与其内容相符，以便用户可以向上滑动以查看整个文本.

Right now it cuts the Webview off and the rest of the content is crammed up in a scrollview. The images and text that I put before the webview also stay fixed in place, while I want them to scroll down too. I do not want a scrollbar for the webview, I just want the webview to be true size to it's contents so that the user can swipe up to look at the entire text.

CustomWebViewRenderer.cs

[assembly: ExportRenderer(typeof(PostWebView), typeof(Yoors.iOS.CustomWebViewRenderer))]
namespace Yoors.iOS
{
    public class CustomWebViewRenderer : ViewRenderer<PostWebView, WKWebView>
    {
        WKWebView _wkWebView;
        protected override void OnElementChanged(ElementChangedEventArgs<PostWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                WKWebViewConfiguration config = new WKWebViewConfiguration();

                _wkWebView = new WKWebView(Frame, config);


                SetNativeControl(_wkWebView);
            }
            if (e.NewElement != null)
            {

                HtmlWebViewSource source = (Xamarin.Forms.HtmlWebViewSource)Element.Source;
                string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>";
                string html= headerString + source.Html;
                Console.WriteLine("Height" + Element);
                _wkWebView.LoadHtmlString(html, baseUrl: null);
                _wkWebView.ScrollView.ScrollEnabled = false;
                _wkWebView.SizeToFit();
            }




        }
    }

PostWebView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<WebView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Yoors.Views.Templates.PostWebView" x:Name="WebViewer" BackgroundColor="White" Margin="0, 10, 0, 0" VerticalOptions="FillAndExpand" HeightRequest="1000">
    <WebView.Source>
        <HtmlWebViewSource Html="{Binding Data.Content}" />
    </WebView.Source>
</WebView>

PostView.xaml

 <ContentPage.Content>
        <ScrollView>
            <StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <!-- Header of the post-->
                <Image HeightRequest="125" Aspect="AspectFill" Source="{Binding Post.ImageUrl}" />
                <StackLayout BackgroundColor="White" Padding="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="10, 0,10, 0">
                    <Label Text="{Binding Post.Title}" FontFamily="{StaticResource BoldFont}" FontSize="20" />
                    <Label Text="{Binding Post.CreatedOn.DisplayText}" FontSize="12" />
                    <!-- Content of the post in a HTML view-->
                </StackLayout>
                <templates:PostWebView VerticalOptions="FillAndExpand" BindingContext="{Binding Post}">
                </templates:PostWebView>
                <templates:CommentView BindingContext="{Binding CommentsViewModel}">
                    <x:Arguments>
                        <ListViewCachingStrategy>RecycleElement</ListViewCachingStrategy>
                    </x:Arguments>
                </templates:CommentView>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>

我认为为 PostWebView 放置 VerticalOptions="FillAndExpand" 会使其适合其内容的大小，而不会创建 scollbar，因此不会将其他内容固定到位，但它只是这样做: 有谁知道如何帮忙吗?

I thought placing VerticalOptions= "FillAndExpand" for the PostWebView, would make it fit the size of it's contents, without creating a scollbar and therefore not fixing the other contents in place, but it just does this: Does anyone know how to help?

推荐答案

我回答了我自己的问题，通过创建一个 CustomNavigationDelegate 在 Webview 完成加载时进行注册.

I answered my own question, by making a CustomNavigationDelegate that registers when the Webview has finished loading.

CustomNavigationDelegate.cs

public class CustomWKNavigationDelegate : WKNavigationDelegate
    {

        CustomWebViewRenderer _webViewRenderer;

        public CustomWKNavigationDelegate(CustomWebViewRenderer webViewRenderer)
        {
            _webViewRenderer = webViewRenderer;
        }

        public  override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
       {
            var wv = _webViewRenderer.Element as PostWebView;
            if (wv != null)
            {
                await System.Threading.Tasks.Task.Delay(100); // wait here till content is rendered
                wv.HeightRequest = (double)webView.ScrollView.ContentSize.Height;
            }
        }
    }

然后在我上面展示的 CustomWebViewRenderer 的 OnElementChanged 中，我将导航委托分配给 WKWebView.

Then in the OnElementChanged of the CustomWebViewRenderer i showed above I assign the Navigation Delegate to the WKWebView.

CustomWebViewRenderer.cs

...
 protected override void OnElementChanged(ElementChangedEventArgs<PostWebView> e)
        {
            base.OnElementChanged(e);


            if (Control == null)
            {
                WKWebViewConfiguration config = new WKWebViewConfiguration();

                _wkWebView = new WKWebView(Frame, config);
                _wkWebView.NavigationDelegate = new CustomNavigationDelegate(this);
...

这将使 WKWebView 具有其内容的大小！！

This will make the WKWebView have the size of it's contents !!

这篇关于如何使用 CustomWebViewRenderer 使 WKWebView 的高度适合其在 Xamarin 中的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！