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

问题描述:

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

I already have a UIViewController made programmatically, and would like at the bottom to have a collection view with 4 cells, but I want to be able to swipe through different pages of the collection view to see different cells. I'm not sure where to begin with this wether to enable paging on the collection view and how that would work with setting up the cells, or to create a page controller and adding the collection view to that? There are a couple of ways that I have seen online already, but that don't really fit my needs.

我想要这样的东西:

如果我能为您提供更多信息,请告诉我.我刚刚创建了一个基本的页面控制器,但不确定如何实现我正在寻找的.

Let me know if I can provide you with more information. I just created a basic page controller but am not sure how to achieve what I'm looking for.

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

I created a collection view and added the constraints to get the layout I want; however I'm not sure how to make it swipe like a page.

这是集合视图的代码:

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
}

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

All you need would be a UICollectionViewController or as I am assuming you have, a UIViewController that conforms to the collectionView protocols. Your UIViewController with one UICollectionView is a good starting point. However the cell you insert needs to be different. First of all, the collectionView within the ViewController needs to have collectionView?.isPagingEnabled = true and its layouts scrollDirection set to .horizontal. Having done that you need to create your cells.

您实现的单元格应该是 UICollectionViewControllerUICollectionViewDelegateFlowLayout 的子类.此 collectionView 的布局需要将 scrollDirection 设置为 .vertical,尽管我相信您无论如何都不会在此视图中滚动.此 collectionView 中的单元格数量将为 4.然后您出列您想要拥有 4 个单元格(头部为蓝底白字的单元格).

The cells you implement should be a subclass of UICollectionViewController and UICollectionViewDelegateFlowLayout. This collectionView's layout needs to have scrollDirection set to .vertical although I believe you are not scrolling in this view anyways. The number of cells in this collectionView will be 4. You then dequeue your cell of which you want to have 4 (the one with the head in white on blue).

UICollectionViewController 然后需要出队作为您的第一个 collectionView 的单元格.基本上:

The UICollectionViewController needs to then be dequeued as the cell for your first collectionView. Basically:

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

Your main ViewController has a collectionView that scrolls horizontally. This collectionView has a UICollectionViewController as cells and scrolls vertically.

这听起来可能很复杂,但我已经做到了,而且工作顺利.如果您有任何问题,请告诉我.

It may sound very complicated but I have done it and it works smoothly. Let me know if you have any questions.