时间戳

首页 > 解决方案 > 如何为 Web 视图应用程序添加上边距？

ios - 如何为 Web 视图应用程序添加上边距？

问题描述

我有一个带有顶部菜单栏的 Web 视图应用程序。在 Iphone X 之前一切正常。如您所见，它有一个顶部菜单栏，顶部需要一些空间来清除 iphone X 的扬声器。有什么办法可以使网页视图更小？我尝试了约束，但我无法让它正常工作。

我可以在顶部缩小 webview 并添加一些背景颜色/渐变或其他东西吗？正如您在图片中看到的那样，当我向下滚动时，我可以看到扬声器两侧和菜单栏上方的内容（应该在 web 视图的最顶部）

苹果手机示例

这是我的类定义的开始：

    public partial class WebViewController : UIViewController
{

    LoadingOverlay loadPop;
    bool loadPopStatus = false;

    public override bool PrefersStatusBarHidden(){
        return true;
    }

    static bool UserInterfaceIdiomIsPhone
    {
        get { return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone; }
    }

    protected WebViewController(IntPtr handle) : base(handle)
    {
        // Note: this .ctor should not contain any initialization logic.

    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        NSUserDefaults.StandardUserDefaults.Synchronize();
        var username = NSUserDefaults.StandardUserDefaults.StringForKey("username");
        var login_token = NSUserDefaults.StandardUserDefaults.StringForKey("login_token");
        var refresh_token = NSUserDefaults.StandardUserDefaults.StringForKey("refresh_token");
        var company_name = NSUserDefaults.StandardUserDefaults.StringForKey("company");

        // Intercept URL loading to handle native calls from browser
        WebView.ShouldStartLoad += HandleShouldStartLoad;
        //Change status bar background
        //WebView.ScrollView.ContentInset = new UIEdgeInsets(20, 20, 20, 20);
        //WebView.ScrollView.BackgroundColor = UIColor.Clear;
        //WebView.BackgroundColor = UIColor.Clear;

        //WebView.ScrollView.ContentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentBehavior.Never;

您可以在我的 webviewcontroller 定义中看到我的一些失败尝试已被注释掉。我尝试了 insents 和其他东西

标签： iosiphonexamarin

解决方案

您可以为此 WebView 设置正确的约束以使其更小。WebView 的 top 和 bottom 约束应该连接到TopLayoutGuideand BottomLayoutGuide，这样 iPhone X 的“head”和“foot”就不会被使用。

我将在下面显示这四个约束的 Storyboard 屏幕截图：

在此处输入图像描述

但是使用代码创建约束可能更清楚：

// Disable this property to enable autolayout
MyWebView.TranslatesAutoresizingMaskIntoConstraints = false;

var leadConstraint = NSLayoutConstraint.Create(MyWebView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.Leading, 1.0f, 0);
var topConstraint = NSLayoutConstraint.Create(MyWebView, NSLayoutAttribute.Top, NSLayoutRelation.Equal, TopLayoutGuide, NSLayoutAttribute.Bottom, 1.0f, 0);
var trailingConstraint = NSLayoutConstraint.Create(MyWebView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.Trailing, 1.0f, 0);
var bottomConstraint = NSLayoutConstraint.Create(MyWebView, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, BottomLayoutGuide, NSLayoutAttribute.Top, 1.0f, 0);

View.AddConstraints(new NSLayoutConstraint[] { leadConstraint, topConstraint, trailingConstraint, bottomConstraint });

这将在 iPhone X 的顶部和底部留出一个我们不应该使用的空间，我们称之为安全区域。

如果你想让它看起来像 WebView 的一个组件，你可以将View背景颜色设置为与你的 WebView 相同。从您的屏幕截图中看起来是紫红色。也许是这样的：

View.BackgroundColor = UIColor.Purple;

推荐阅读