如何在Web视图应用程序中添加上边距？

Question

我有一个网页浏览应用程序，它有一个顶级菜单栏。这一切都正常工作，直到Iphone X. 你可以看到它有一个顶部菜单栏，顶部需要一些空间来清除iPhone X的扬声器。有没有办法让网页视图更小？我尝试了约束，但我不能让它工作。

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

这是我的课程定义的开始：

    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和其他东西

Answer 1

您可以为此WebView设置正确的约束以使其更小。 WebView的顶部和底部约束应连接到TopLayoutGuide和BottomLayoutGuide，以便不会使用iPhone X的“head”和“foot”。

我将在下面的四个限制中显示我的故事板截图：

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

// 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;