Xamarin.Forms - 我在 iOS 上的响应式 WebView 出现奇怪的高度问题
Xamarin.Forms - Strange height issue with my responsive WebViews on iOS
我有一个 ListView,我想在其中绑定多个高度各不相同的 webview。我想根据它的内容计算每个 webview 的高度并相应地显示它。
适用于 Android - iOS 所有 WebView 都太大了
await System.Threading.Tasks.Task.Delay(100);
var result = (double)webView.ScrollView.ContentSize.Height;
_webView.HeightRequest = result;
奇怪的是:webview 包含的 html 个字符越多,它就越大。所以我可以只添加一个字符,另外 50px 将被添加到高度。
此处 post 的代码很多,但这里是 github 项目的 link:
https://github.com/SlimboTimbo/MultipleWebViews
检查项目后,发现无法在 iOS 设备中工作的原因。
原因是webView.ScrollView.ContentSize
的width
不正确,太小了就是27。所以无法正确显示。
System.Console.WriteLine("----" + resultWidth + "-----"+ resultHeight + "----"+ _webView.Width);
输出 :
2020-06-04 11:19:58.066542+0800 MultipleWebViews.iOS[50674:1690400] ----27-----642----375
解决方案:
你可以用HybridWebView
的宽度来计算height
,然后把计算出来的height
设置为HybridWebView
。
DidFinishNavigation方法代码如下:
public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
try
{
var _webView = webViewRenderer.Element as HybridWebView;
if (_webView != null)
{
await System.Threading.Tasks.Task.Delay(100);
var resultWidth = (double)webView.ScrollView.ContentSize.Width;
var resultHeight = (double)webView.ScrollView.ContentSize.Height;
System.Console.WriteLine("----" + resultWidth + "-----"+ resultHeight + "----"+ _webView.Width);
double result = MeasureTextHeightSize(_webView.messageContent, _webView.Width, UIFont.LabelFontSize, null);
_webView.HeightRequest = result;
MessagingCenter.Send<Object, PassModel>(this, "LoadFinished", new PassModel(_webView.Id, Convert.ToDouble(result)));
}
}
catch (Exception ex)
{
Console.WriteLine("Error at HybridWebViewRenderer LoadingFinished: " + ex.Message);
}
}
MeasureTextHeightSize(计算高度的方法)
private double MeasureTextHeightSize(string text, double width, double fontSize, string fontName = null)
{
var nsText = new NSString(text);
var boundSize = new SizeF((float)width, float.MaxValue);
var options = NSStringDrawingOptions.UsesFontLeading | NSStringDrawingOptions.UsesLineFragmentOrigin;
if (fontName == null)
{
fontName = "HelveticaNeue";
}
var attributes = new UIStringAttributes
{
Font = UIFont.FromName(fontName, (float)fontSize)
};
var sizeF = nsText.GetBoundingRect(boundSize, options, attributes, null).Size;
//return new Xamarin.Forms.Size((double)sizeF.Width, (double)sizeF.Height);
return (double)sizeF.Height;
}
效果:
注意:您可以根据您当前系统的字体大小修改此方法的fontSize
。并且还可以自定义 return 值,例如 return (double)sizeF.Height + 10
以适应屏幕。
我有一个 ListView,我想在其中绑定多个高度各不相同的 webview。我想根据它的内容计算每个 webview 的高度并相应地显示它。
适用于 Android - iOS 所有 WebView 都太大了
await System.Threading.Tasks.Task.Delay(100);
var result = (double)webView.ScrollView.ContentSize.Height;
_webView.HeightRequest = result;
奇怪的是:webview 包含的 html 个字符越多,它就越大。所以我可以只添加一个字符,另外 50px 将被添加到高度。
此处 post 的代码很多,但这里是 github 项目的 link: https://github.com/SlimboTimbo/MultipleWebViews
检查项目后,发现无法在 iOS 设备中工作的原因。
原因是webView.ScrollView.ContentSize
的width
不正确,太小了就是27。所以无法正确显示。
System.Console.WriteLine("----" + resultWidth + "-----"+ resultHeight + "----"+ _webView.Width);
输出 :
2020-06-04 11:19:58.066542+0800 MultipleWebViews.iOS[50674:1690400] ----27-----642----375
解决方案:
你可以用HybridWebView
的宽度来计算height
,然后把计算出来的height
设置为HybridWebView
。
DidFinishNavigation方法代码如下:
public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
try
{
var _webView = webViewRenderer.Element as HybridWebView;
if (_webView != null)
{
await System.Threading.Tasks.Task.Delay(100);
var resultWidth = (double)webView.ScrollView.ContentSize.Width;
var resultHeight = (double)webView.ScrollView.ContentSize.Height;
System.Console.WriteLine("----" + resultWidth + "-----"+ resultHeight + "----"+ _webView.Width);
double result = MeasureTextHeightSize(_webView.messageContent, _webView.Width, UIFont.LabelFontSize, null);
_webView.HeightRequest = result;
MessagingCenter.Send<Object, PassModel>(this, "LoadFinished", new PassModel(_webView.Id, Convert.ToDouble(result)));
}
}
catch (Exception ex)
{
Console.WriteLine("Error at HybridWebViewRenderer LoadingFinished: " + ex.Message);
}
}
MeasureTextHeightSize(计算高度的方法)
private double MeasureTextHeightSize(string text, double width, double fontSize, string fontName = null)
{
var nsText = new NSString(text);
var boundSize = new SizeF((float)width, float.MaxValue);
var options = NSStringDrawingOptions.UsesFontLeading | NSStringDrawingOptions.UsesLineFragmentOrigin;
if (fontName == null)
{
fontName = "HelveticaNeue";
}
var attributes = new UIStringAttributes
{
Font = UIFont.FromName(fontName, (float)fontSize)
};
var sizeF = nsText.GetBoundingRect(boundSize, options, attributes, null).Size;
//return new Xamarin.Forms.Size((double)sizeF.Width, (double)sizeF.Height);
return (double)sizeF.Height;
}
效果:
注意:您可以根据您当前系统的字体大小修改此方法的fontSize
。并且还可以自定义 return 值,例如 return (double)sizeF.Height + 10
以适应屏幕。