如何将 UIPageControl 连接到 UICollectionView (Swift)

Question

我目前正在使用 UICollectionView 来显示 3 个图像（每个图像跨越整个单元格）。 我还有一个 UIPageControl，放在 UICollectionView 之上。 我想要发生的是让 UIPageControl 显示图像的数量（在本例中为 3），以及用户当前正在查看的图像。 我试图 go 的效果是 Instagram 应用程序的效果。

我目前用于实现此效果的方式是将 UIPageControl 的更新放在 UICollectionView 的willDisplay function 中，如下所示：

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    pictureDots.currentPage = indexPath.item
}

这可以正确连接集合视图和页面控件之间的分页效果。 但是，我遇到的问题是 UIPageControl 开始说用户在第三张图像上，即使它正在显示第一张图像。

有谁知道为什么会这样以及如何解决这个问题？

Answer 1

首先添加UIPageControl到你的故事板与UICollectionView ，然后将它们连接为出口到您的视图控制器。

@IBOutlet var pageControl: UIPageControl!
@IBOutlet var collectionView: UICollectionView!

调整UICollectionViewDataSource的numberOfItemsInSection方法，将页面控件的计数设置为始终等于集合视图中的单元格数。

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    let count = ...

    pageControl.numberOfPages = count
    pageControl.isHidden = !(count > 1)

    return count
}

最后，使用UIScrollViewDelegate ，我们可以知道UICollectionView停在哪个单元格上。 如果您没有使用UICollectionViewController ，则可能需要添加委托协议。

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

    pageControl?.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {

    pageControl?.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

这是可能的，因为UICollectionView实际上是引擎盖下的UIScrollView 。

Answer 2

步骤 1为 Collection View 和 Page Control 创建变量

@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet var pageControl:UIPageControl!     

Step 2设置Page Control的页数

override func viewDidLoad() {
    super.viewDidLoad()         
    self.pageControl.numberOfPages = procedures.count
    //Set the delegate
    self.collectionView.delegate = self
}

*步骤3在scrollViewDidScroll 函数中计算当前页面的集合单元格的宽度和索引。

    extension YourCollectionVC: UICollectionViewDataSource, UICollectionViewDelegate {
            override func scrollViewDidScroll(_ scrollView: UIScrollView) {
                let witdh = scrollView.frame.width - (scrollView.contentInset.left*2)
                let index = scrollView.contentOffset.x / witdh
                let roundedIndex = round(index)
                self.pageControl?.currentPage = Int(roundedIndex)
            }
}

注意：这是水平显示的集合视图，垂直方向改变方法。

在swift 4中测试。

Answer 3

使用它可以顺利运行。

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let witdh = scrollView.frame.width - (scrollView.contentInset.left*2)
    let index = scrollView.contentOffset.x / witdh
    let roundedIndex = round(index)
    self.pageControl.currentPage = Int(roundedIndex)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

    pageControl.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {

    pageControl.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

Answer 4

在Combine帮助下，我们可以轻松地将UIPageControl与任何ScrollView连接UIPageControl 。

var collectionView: UICollectionView
var bin: Set<AnyCancellable> = []
var pageControl: UIPageControl

// setup observer
collectionView
    .publisher(for: \.contentOffset)
    .map { [unowned self] offset in
        Int(round(offset.x / max(1, self.collectionView.bounds.width)))
    }
    .removeDuplicates()
    .assign(to: \.currentPage, on: pageControl) // may cause memory leak use sink
    .store(in: &bin)

Answer 5

//For every iPhone screen, it is working(Swift 5)...

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
    let offSet = scrollView.contentOffset.x
    let width = scrollView.frame.width
    let horizontalCenter = width / 2

    _pageControl.currentPage = Int(offSet + horizontalCenter) / Int(width)        
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    pageControl.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}