UICollectionView 未显示以查看

Posted

技术标签:

【中文标题】UICollectionView 未显示以查看【英文标题】:UICollectionView not displayed to view 【发布时间】:2018-11-23 21:28:50 【问题描述】:

我已经被这个问题困扰了将近一个星期。我什至还原了我的代码并编写了与某些教程相同的代码,但我似乎无法让我的UICollectionView 终生显示在视图中。我的视图控制器中还有很多其他代码,所以我将显示与UICollectionView 相关的代码。这是我到目前为止所拥有的:

视图控制器:

class UARTModuleViewController: UIViewController, CBPeripheralManagerDelegate, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 
    override func viewDidLoad() 
        super.viewDidLoad()
        setupMenuBar()
    

    let menuBar: MenuBar = 
        let mb = MenuBar()
        return mb
    ()

    private func setupMenuBar() 
        view.addSubview(menuBar)
        let horizontalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":menuBar])
        let verticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0(100)]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":menuBar])
        view.addConstraints(horizontalConstraint)
        view.addConstraints(verticalConstraint)
    

MenuBar.swift:

class MenuBar : UIView, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 

    lazy var collectionView : UICollectionView = 
        let layout = UICollectionViewFlowLayout()
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = UIColor.red
        cv.dataSource = self
        cv.delegate = self
        return cv
    ()

    override init(frame: CGRect) 
        super.init(frame: frame)

        self.addSubview(collectionView)
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "MenuCell")

        //took out constraints here just to make the warning mentioned below easier to follow.
    

我确实实现了我的协议,但我添加它们并不是为了节省我发布的代码量。在UARTModuleViewController 加载后我确实收到了这个警告:

[LayoutConstraints] 无法同时满足约束。

我已经尝试过推理,但似乎无法找到解决方案。我也有一个单元类,但我认为没有必要包含,因为我无法显示 UICollectionView。我可以添加的唯一另一件事是,我在故事板中添加的视图中间有一个UIImageView,并像这样设置约束:

是否有人对我可能做错了什么有任何建议?提前感谢您提供的任何帮助或建议。

【问题讨论】:

菜单栏应该如何显示? @RicoCrescenzio 现在我只是想让它显示。最终它将位于屏幕底部的UIImageView 下方。它将占据屏幕的宽度,然后高度将几乎到UIImageView 的底部。 您希望集合视图与父视图具有相同的大小? @RicoCrescenzio 只有宽度与父视图的宽度相同。高度会更小。我还没有设置值,因为我只是想显示它。我猜它可能是父视图高度的 1/5。 我的意思是,collection view 会覆盖整个 MenuBar? 【参考方案1】:

根据cmets:

首先,每次在代码中使用约束时,必须将translatesAutoresizingMaskIntoConstraints = false设置为要添加约束的视图。 您没有告诉集合视图填充整个 MenuBar 空间。 在setupMenuBar 中应用于MenuBar 的约束不足以确定视图的大小和位置。

您应该应用这些更改来告诉MenuBar 填充宽度、高度为 60 pt 并位于屏幕底部:

private func setupMenuBar() 
    view.addSubview(menuBar)
    menuBar.translatesAutoresizingMaskIntoConstraints = false // this will make your constraint working
    menuBar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true // every constraint must be enabled.
    menuBar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
    menuBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    menuBar.heightAnchor.constraint(equalToConstant: 60).isActive = true

要告诉集合视图填充整个 MenuBar 视图,请在 MenuBar init(frame:) 方法中执行此操作:

override init(frame: CGRect) 
    super.init(frame: frame)

    self.addSubview(collectionView)
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "MenuCell")

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

    //took out constraints here just to make the warning mentioned below easier to follow.

正如您在我的代码中看到的,我通常使用“锚”方法来应用约束,因为它比视觉格式更容易。

【讨论】:

哇,非常感谢!早些时候我设置了translatesAutoresizingMaskIntoConstraints = false,但我没有意识到约束不足以确定视图的大小/位置。这非常有效。也感谢您的解释!

以上是关于UICollectionView 未显示以查看的主要内容,如果未能解决你的问题,请参考以下文章

属性导航器中的 UICollectionView 项目未显示

UICollectionView 正在显示,但单元格未快速显示

UICollectionView 单元内部已加载,但 UICollectionView 未显示

UICollectionView 显示两行,但我只想要一行

UICollectionView 标头未显示

UICollectionView 未显示 & 未调用委托/数据源方法