Как добавить верхнее поле в веб-приложение?

Question

У меня есть приложение для просмотра веб-страниц с верхней строкой меню.Все работало должным образом до Iphone X. Как вы можете видеть, у него есть верхняя строка меню, и ему нужно немного места сверху, чтобы очистить динамик iphone X. Есть ли способ уменьшить веб-вид?Я пытался с ограничениями, но я не мог заставить его работать.

Могу ли я уменьшить размер веб-вида сверху и добавить цвет фона / градиент или что-то еще?Как вы можете видеть на картинке, когда я прокручиваю вниз, я вижу контент по сторонам динамика и над строкой меню (которая должна быть в самом верху веб-просмотра)

Это начало моего определения класса:

    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.Я пробовал брекет и прочее

Answer 1

Вы можете установить правильные ограничения для этого WebView, чтобы сделать его меньше.Верхние и нижние ограничения WebView должны подключаться к TopLayoutGuide и BottomLayoutGuide, так что «голова» и «нога» iPhone X не будут использоваться.

Я покажу мой скриншот раскадровки для этихчетыре ограничения ниже:

Но использование кода для создания ограничений может быть более ясным:

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