How to add top margin to web view application? - ios

Question

I have a web view application which has a top menu bar. It all was working properly until Iphone X.
As you can see it has a top menu bar, and it needs some space on top to clear the speaker of the iphone X. Is there any way to make the web view smaller? I tried with constraints but I couldnt quite get it working.
Can I make the webview smaller at the top and add some background color/gradient or something? As you can see in the picture when I scroll down I can see content by the sides of the speaker and above the menu bar (which should be at the very top of the webview)
This is the start of my class definition:
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;
You can see some of my failed attempts commented out in my webviewcontroller definition. I tried insents and other stuff

Answer 1

You can set the correct constraints to this WebView to make it smaller. The top and bottom constraints of the WebView should connect to the TopLayoutGuide and BottomLayoutGuide, so that iPhone X's "head" and "foot" will not be used.
I will show my Storyboard screenshot for these four constraints below:
But use code to create the constraints may be more clearly:
// 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 });
This will make a space at the top and bottom of the iPhone X which we should not use and we just call it safe area.
If you want to make it look like a component of the WebView, you can set the View's Background color the same as your WebView's. It seems purple red from your screenshot. Maybe like this:
View.BackgroundColor = UIColor.Purple;