swift 4 : How to set top constraint when you have a navigation controller?

Question

screenshot我创建了一个 View ，其中放置了一个 ImageView 和一个 View 。我以编程方式为我的两个 View 添加了约束，以便它们在我选择的每个屏幕中完美居中，但是当我在 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)
    }

用这段代码替换你的函数，它看起来像这样，我希望你的问题能得到解决。