ios - 如何向 Web View 应用程序添加上边距？

Question

我有一个 WebView 应用程序，它有一个顶部菜单栏。在 Iphone X 之前一切正常。正如你所看到的，它有一个顶部菜单栏，并且顶部需要一些空间来清除 iphone X 的扬声器。有什么办法可以让网页 View 变小吗？我尝试了一些限制，但无法完全正常工作。

我可以让顶部的 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 的“头”和“脚”就不会被使用。

我将在下面展示这四个约束的 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;