Question

我试图在我的tabBar上方包含一个容器UIView但是它似乎没有显示在我的视图上，因为我认为是约束问题。我希望我的容器视图在视图中看起来如此。

但是我的容器根本没有显示在视图中。这是我的代码：

self.mapContainer.layer.cornerRadius = 8
    self.mapContainer.backgroundColor = UIColor.cyan
    self.mapContainer.translatesAutoresizingMaskIntoConstraints = false
        self.mapContainer.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.addSubview(self.mapContainer)

    //constraints of the map view
        let heightTabBar = self.tabBarController?.tabBar.frame.size.height
        self.mapContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant : (heightTabBar)! + 220).isActive = true
        self.mapContainer.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        //self.topContainer.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
        self.mapContainer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.3).isActive = true
        //self.mapContainer.widthAnchor.constraint(equalTo: view.widthAnchor).isActive =  true
        self.mapContainer.leadingAnchor.constraint(equalTo: view.trailingAnchor, constant: 20).isActive = true
        self.mapContainer.trailingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40).isActive = true

我在哪里错误地看到我的容器没有显示的地方？

Answer 1

<强>问题：

您可以在视图外部的底部锚点处以正值推送视图。这就是你没有看到它的原因。

<强>解决方案：

您应该在底部隐藏(equalTo: view.bottomAnchor, constant : (heightTabBar)! + 220)，而不是添加self.mapContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant : -(heightTabBar! + 220)).isActive = true。您还应该使容器的主要锚点取决于视图的主要锚点，对于尾随锚点也是如此。此外，您需要将常量的负值设置为尾随锚，以在右侧添加填充。 请记住：如果你想从上到下推，那么添加，如果你想从右下推，那么减去

这应该对你有帮助（提示在代码注释中）：

import UIKit

class ViewController: UIViewController {

  var mapContainer:UIView!

  override func loadView() {
    super.loadView()

    view.backgroundColor = .white

    self.mapContainer = UIView()
    self.mapContainer.layer.cornerRadius = 8
    self.mapContainer.backgroundColor = UIColor.cyan
    self.mapContainer.translatesAutoresizingMaskIntoConstraints = false
    self.mapContainer.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.addSubview(self.mapContainer)


    //constraints of the map view
    let heightTabBar = self.tabBarController?.tabBar.frame.size.height
    // You need to subtract to push from the bottom of the view
    self.mapContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant : -(heightTabBar! + 220)).isActive = true
    self.mapContainer.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    self.mapContainer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.3).isActive = true

    // Your leading anchor of map container should depend on the leading anchor of the view
    self.mapContainer.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
    // Your trailingAnchor anchor of map container should depend on the trailingAnchor anchor of the view
    // Here you need to subtract to push from the right
    self.mapContainer.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
  }
}

结果应与此类似：

iPhone5S模拟器上的结果：

容器视图约束问题以编程方式

1 个答案: