如何以编程方式将 UIPageController 和 UICollectionViewController 添加到 UIViewController

Posted 2023-03-13

【中文标题】如何以编程方式将 UIPageController 和 UICollectionViewController 添加到 UIViewController

【英文标题】：How to add a UIPageController and UICollectionViewController to a UIViewController programmatically

【发布时间】：2019-09-26 23:24:01

【问题描述】：

我已经有一个以编程方式制作的 UIViewController，并希望在底部有一个包含 4 个单元格的集合视图，但我希望能够在集合视图的不同页面中滑动以查看不同的单元格。我不确定从哪里开始在集合视图上启用分页以及如何设置单元格，或者创建页面控制器并将集合视图添加到其中？我已经在网上看到了几种方法，但这并不真正符合我的需求。

我想要这样的东西：

如果我可以为您提供更多信息，请告诉我。我刚刚创建了一个基本的页面控制器，但不确定如何实现我想要的。

编辑：我创建了一个集合视图并添加了约束以获得我想要的布局；但是我不确定如何让它像页面一样滑动。

这是集合视图的代码：

let friendsCollectionView: UICollectionView = 
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.translatesAutoresizingMaskIntoConstraints = false
    cv.register(FriendsCell.self, forCellWithReuseIdentifier: "cell")
    cv.backgroundColor = UIColor.blue
    cv.layer.cornerRadius = 10
    return cv
()

view.addSubview(friendsCollectionView)
friendsCollectionView.anchor(top: separatorView.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 50, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 250, height: 250)
 friendsCollectionView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    return CGSize(width: 75, height: 75)


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets 
    if section == 0 
        return UIEdgeInsets(top: 85, left: 10, bottom: 0, right: 0)
    
    if section == 1 
        return UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0)
    
    if section == 2 
        return UIEdgeInsets(top: 85, left: 5, bottom: 0, right: 0)
    


    return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        if section == 0  return 1 
        if section == 1  return 2 
        if section == 2  return 1 


    return 0

func numberOfSections(in collectionView: UICollectionView) -> Int 
    return 3

【问题讨论】：

“但我希望能够在集合视图的不同页面中滑动以查看不同的单元格”不清楚是什么意思。你的意思是每个页面都是四个不同单元格的集合吗？

没错。

好的，那么这与集合视图有什么关系？您的页面视图控制器页面是单独的视图控制器！它们不是单个视图（例如集合视图）的一部分。您只需要一个包含四个菱形图像的视图控制器来充当您的页面。

我对您遇到的问题感到困惑？您是否尝试过这样做？您自己尝试过任何代码吗？对我来说，实现您需要的东西似乎相当简单，但是很难为您提供准确的答案，因为您似乎没有尝试自己实现任何这些......一个简单的谷歌搜索......如何添加 uicollection以编程方式查看...会产生答案

是的，我试过了，但没有任何结果。我试图做一个集合视图的原因是因为我还想实现一个圆形动画，这样四个单元格将以圆周运动旋转，然后反弹回来，除非这可以通过普通视图控制器轻松实现。我还想有一个集合视图，因为这样会更容易从数据库中提取值，这样我就可以最小化我的数据库存储。

【参考方案1】：

您所需要的只是一个 UICollectionViewController 或者我假设您有一个符合 collectionView 协议的 UIViewController。带有一个 UICollectionView 的 UIViewController 是一个很好的起点。但是，您插入的单元格需要不同。首先，ViewController 中的 collectionView 需要有 collectionView?.isPagingEnabled = true 并且它的布局 scrollDirection 设置为 .horizo​​ntal。完成后，您需要创建单元格。

您实现的单元格应该是 UICollectionViewController 和 UICollectionViewDelegateFlowLayout 的子类。此 collectionView 的布局需要将 scrollDirection 设置为 .vertical 尽管我相信您无论如何都不会在此视图中滚动。此 collectionView 中的单元格数将为 4。然后，您出列您希望拥有 4 个单元格的单元格（头部为蓝底白字的那个）。

UICollectionViewController 需要出列作为您的第一个 collectionView 的单元格。基本上：

您的主 ViewController 有一个水平滚动的 collectionView。这个 collectionView 有一个 UICollectionViewController 作为单元格并垂直滚动。

这听起来可能很复杂，但我已经做到了，而且运行顺利。如果您有任何问题，请告诉我。

【讨论】：

对不起，我对 CollectionViews 很陌生。第一个集合视图的单元格是什么意思？我是否有多个为此或如何与具有我正在寻找的布局的单元格一起使用？我不知道如何使每个单元格具有不同的位置。我只构建了一个集合视图，其中所有内容的布局都像 TableView 一样。非常感谢您的帮助，谢谢！

您可以使用部分和项目（它们就像行和列）。因此，例如对于第一行，您将只有 1 列和一个单元格。然后对于第二行，您将有两列和两个单元格，并排。对于最后一行，您再次只有一列和一个单元格。

我将尝试解释我所说的“第一个 collectionView 的单元格”是什么意思。每个 collectionView 都需要由它注册和出列的单元格。您有一个包含 3 个项目的 collectionView 可以水平滚动。向这个水平 collectionView 注册一个单元格。此单元格是一个 collectionViewController，您可以在其中注册“带有蓝色背景单元格的白脸”。在您的情况下，创建自定义布局可能是有益的，您可以在此处阅读更多信息：***.com/questions/43186246/…

感谢您的帮助。我能够制作收藏视图；但是我不确定如何使它水平滚动并以类似页面的方式滚动，以便在您滑动时捕捉。另外，除了您看到的 4 个单元格之外，我如何添加其他单元格，以便在滑动时看起来像在模型中一样。