Swift4：当你有导航控制器时如何设置顶部约束？

Question

screenshot我创建了一个视图，我在其中放置了一个图像视图和一个视图。我以编程方式为我的两个视图添加了约束，以便它们在我选择的每个屏幕中完美居中，但是当我在iPhone XSMax上启动应用程序时，底部会出现一个白色条。所以我想我的顶级约束是错误的，当我有导航栏时如何处理顶部约束？

 func imageAndColorView() {

    view.addSubview(imageView)
    view.addSubview(colorView)
    imageView.translatesAutoresizingMaskIntoConstraints = false

    imageView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

    colorView.translatesAutoresizingMaskIntoConstraints = false
    colorView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    colorView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    colorView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    colorView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

    imageView.image = UIImage(named: BackgroundImageKey)
    view.sendSubviewToBack(imageView)
    view.insertSubview(colorView, aboveSubview: imageView)
}

是的，我在viewDidLoad中调用了它。

Answer 1

对于上面的iphoneX，你应该在topAnchor和bottomAnchor中使用safeAreaLayoutGuide。

func imageAndColorView() {

        view.addSubview(imageView)
        view.addSubview(colorView)
        imageView.translatesAutoresizingMaskIntoConstraints = false

        imageView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

        colorView.translatesAutoresizingMaskIntoConstraints = false
        colorView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        colorView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
        colorView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        colorView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

        imageView.image = UIImage(named: BackgroundImageKey)
        view.sendSubviewToBack(imageView)
        view.insertSubview(colorView, aboveSubview: imageView)
    }

只需用这段代码替换你的功能，它就会像这样，我希望你的问题能够得到解决。