Ios 当以编程方式创建UIViewController时，UIView的位置不明确

我的

UIViewController

有一个黑屏。我从调试器中了解到的原因是

UIView

在

UIViewController

中的位置不明确

我以编程方式创建了一个标记列表，场景如下：

我有一个

视图

。在

stackView

中，我添加了排列的子视图，它是

UIImage

和

UIViewController

。在

UIViewController

内部有一个

UICollectionView

。

UIViewController

必须具有固定大小。我给出了所有需要的约束条件：

初始化

标记列表

lazy var tagBarView: TopBarViewController = {
    let view = TopBarViewController(nibName: nil, bundle: nil)
    view.view.translatesAutoresizingMaskIntoConstraints = false
    view.view.backgroundColor = .blue
    view.view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 48)
    view.view.clipsToBounds = true
    return view
}()

self.stackView.insertSubview(self.tagBarView.view, at: 1)

stackView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    
    
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .fill
stackView.spacing = 0
stackView.clipsToBounds = false

func setupConstraints() {

    self.view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(topBarCollectionView)

  
    self.view.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: topBarCollectionView.trailingAnchor, constant: 8).isActive = true

    self.view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: topBarCollectionView.bottomAnchor, constant: 8).isActive = true
    
    self.view.safeAreaLayoutGuide.leadingAnchor.constraint(equalTo: topBarCollectionView.leadingAnchor, constant: -8).isActive = true
    self.view.safeAreaLayoutGuide.topAnchor.constraint(equalTo: topBarCollectionView.topAnchor, constant: -8).isActive = true

    topBarCollectionView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    topBarCollectionView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width - 16).isActive = true

    
    topBarCollectionView.reloadData()
}

调用

标记列表

lazy var tagBarView: TopBarViewController = {
    let view = TopBarViewController(nibName: nil, bundle: nil)
    view.view.translatesAutoresizingMaskIntoConstraints = false
    view.view.backgroundColor = .blue
    view.view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 48)
    view.view.clipsToBounds = true
    return view
}()

self.stackView.insertSubview(self.tagBarView.view, at: 1)

stackView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    
    
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .fill
stackView.spacing = 0
stackView.clipsToBounds = false

func setupConstraints() {

    self.view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(topBarCollectionView)

  
    self.view.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: topBarCollectionView.trailingAnchor, constant: 8).isActive = true

    self.view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: topBarCollectionView.bottomAnchor, constant: 8).isActive = true
    
    self.view.safeAreaLayoutGuide.leadingAnchor.constraint(equalTo: topBarCollectionView.leadingAnchor, constant: -8).isActive = true
    self.view.safeAreaLayoutGuide.topAnchor.constraint(equalTo: topBarCollectionView.topAnchor, constant: -8).isActive = true

    topBarCollectionView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    topBarCollectionView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width - 16).isActive = true

    
    topBarCollectionView.reloadData()
}

UIStackView的约束

lazy var tagBarView: TopBarViewController = {
    let view = TopBarViewController(nibName: nil, bundle: nil)
    view.view.translatesAutoresizingMaskIntoConstraints = false
    view.view.backgroundColor = .blue
    view.view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 48)
    view.view.clipsToBounds = true
    return view
}()

self.stackView.insertSubview(self.tagBarView.view, at: 1)

stackView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    
    
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .fill
stackView.spacing = 0
stackView.clipsToBounds = false

func setupConstraints() {

    self.view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(topBarCollectionView)

  
    self.view.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: topBarCollectionView.trailingAnchor, constant: 8).isActive = true

    self.view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: topBarCollectionView.bottomAnchor, constant: 8).isActive = true
    
    self.view.safeAreaLayoutGuide.leadingAnchor.constraint(equalTo: topBarCollectionView.leadingAnchor, constant: -8).isActive = true
    self.view.safeAreaLayoutGuide.topAnchor.constraint(equalTo: topBarCollectionView.topAnchor, constant: -8).isActive = true

    topBarCollectionView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    topBarCollectionView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width - 16).isActive = true

    
    topBarCollectionView.reloadData()
}

然后，我再次以编程方式在viewController中创建了collectionView这是collectionView和FlowLayout的设置

集合视图和流程布局的设置

func setupUI() {
    let collectionViewFlowLayout = UICollectionViewFlowLayout()
    collectionViewFlowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    collectionViewFlowLayout.scrollDirection = .horizontal
    topBarCollectionView = UICollectionView(frame: CGRect(x: 8, y: 8, width: 604, height: 32), collectionViewLayout: collectionViewFlowLayout)
    topBarCollectionView.clipsToBounds = true
    topBarCollectionView.contentMode = .scaleToFill
    topBarCollectionView.showsVerticalScrollIndicator = false
    topBarCollectionView.showsHorizontalScrollIndicator = false
    
    topBarCollectionView.clearsContextBeforeDrawing = false
    topBarCollectionView.register(TagCollectionViewCell.self, forCellWithReuseIdentifier: "TagCell")
    topBarCollectionView.collectionViewLayout = collectionViewFlowLayout
    topBarCollectionView.contentInsetAdjustmentBehavior = .always
    topBarCollectionView.collectionViewLayout.invalidateLayout()
    self.topBarCollectionView.delegate = self
    self.topBarCollectionView.dataSource = self
    topBarCollectionView.translatesAutoresizingMaskIntoConstraints = false
    
}

UICollectioView的约束

lazy var tagBarView: TopBarViewController = {
    let view = TopBarViewController(nibName: nil, bundle: nil)
    view.view.translatesAutoresizingMaskIntoConstraints = false
    view.view.backgroundColor = .blue
    view.view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 48)
    view.view.clipsToBounds = true
    return view
}()

self.stackView.insertSubview(self.tagBarView.view, at: 1)

stackView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    
    
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .fill
stackView.spacing = 0
stackView.clipsToBounds = false

func setupConstraints() {

    self.view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(topBarCollectionView)

  
    self.view.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: topBarCollectionView.trailingAnchor, constant: 8).isActive = true

    self.view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: topBarCollectionView.bottomAnchor, constant: 8).isActive = true
    
    self.view.safeAreaLayoutGuide.leadingAnchor.constraint(equalTo: topBarCollectionView.leadingAnchor, constant: -8).isActive = true
    self.view.safeAreaLayoutGuide.topAnchor.constraint(equalTo: topBarCollectionView.topAnchor, constant: -8).isActive = true

    topBarCollectionView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    topBarCollectionView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width - 16).isActive = true

    
    topBarCollectionView.reloadData()
}

结果是在我的层次结构中，

UIViewController

的

UIView

没有正确定位，因此我得到了一个黑屏

查看层次结构

最终结果视图是顶部的黑色视图（应为白色）

---

我终于找到了答案，如果你先给自己的观点一个框架也没关系。要使它们显示出来，您必须始终对屏幕中的所有视图设置高度限制。

尽量简化操作。。。您的层次结构显示了带有图像视图和TopBarViewController的垂直堆栈视图，但您的屏幕截图以相反顺序显示它们（图像位于顶栏下方）？开始制作

TopBarViewController

带有单个标签的普通视图控制器。。。你有白色背景吗？作为旁注<代码>视图。视图使阅读变得非常困难。。。调用视图控制器

tagBarView

也会让人困惑。。。它是一个

ui视图

？它是一个

UIViewController

？