如何在UICollectionView中添加PageControl圖片滾動

Question

你好我有UICollectionView水平圖片列表代碼我想添加PageControl當滾動圖片將顯示，我添加了pagecontrol選擇器和IBOutlet，但是，我怎麼能整合它？在UICollecitonView之間。 ？

我的代碼如下。

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { 


    @IBOutlet weak var View : DesignableView! 


    @IBOutlet var collectionView: UICollectionView! 
    @IBOutlet var collectionViewLayout: UICollectionViewFlowLayout! 

    @IBOutlet open weak var pageControl: UIPageControl? { 
     didSet { 
      pageControl?.addTarget(self, action: #selector(ViewController.pageChanged(_:)), for: .valueChanged) 
     } 
    } 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     pageControl?.numberOfPages = 11 


    } 


    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     return 11; 
    } 




    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
     let cell: ImageCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell 
     cell.label.text = "Cell \(indexPath.row)" 
     cell.backgroundImageView.image = UIImage(named: "Parallax \(indexPath.row + 1)") 

     // Parallax cell setup 
     cell.parallaxTheImageViewScrollOffset(self.collectionView.contentOffset, scrollDirection: self.collectionViewLayout.scrollDirection) 
     return cell 
    } 



    @IBAction open func pageChanged(_ sender: UIPageControl) { 

     print(sender.currentPage) 


    } 




    // MARK: Delegate 

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
     return collectionView.bounds.size; 
    } 

    // MARK: Scrolling 

    func scrollViewDidScroll(_ scrollView: UIScrollView) { 
     // Parallax visible cells 
     for cell: ImageCollectionViewCell in collectionView.visibleCells as! [ImageCollectionViewCell] { 
      cell.parallaxTheImageViewScrollOffset(self.collectionView.contentOffset, scrollDirection: self.collectionViewLayout.scrollDirection) 
     } 
    } 


    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 



} 

Answer 1

在這裏你有一個完整的類，在頁面控制分頁水平集合視圖。 這是我的一個應用程序，現在工作，並正常工作。如果你不能工作，請隨時問我，我會幫你。

首先，在故事板，你必須設置你的CollectionView有：

佈局：流量
滾動方向：水平
滾動啓用
尋呼啓用

@IBOutlet weak var collectionView: UICollectionView! //img: 77 

@IBOutlet weak var pageControl: UIPageControl! 

var thisWidth:CGFloat = 0 

override func awakeFromNib() { 
    super.awakeFromNib() 

    thisWidth = CGFloat(self.frame.width) 
    collectionView.delegate = self 
    collectionView.dataSource = self 

    pageControl.hidesForSinglePage = true 

} 

func numberOfSections(in collectionView: UICollectionView) -> Int { 
    return 10 
} 

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCell", for: indexPath) 

    return cell 
} 

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) { 
    self.pageControl.currentPage = indexPath.section 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
    thisWidth = CGFloat(self.frame.width) 
    return CGSize(width: thisWidth, height: self.frame.height) 
} 

Answer 2

我不是被接受的答案的粉絲。有時，willDisplay cell將根據用戶交互返回頁面控制的錯誤頁面。

我用什麼：

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

用戶已完成滾動從而使pageControl的currentPage更準確後，這將更新頁面。

Answer 3

等待scrollViewDidEndDecelerating，採用較慢的更新到UIPageControl。如果你想要一個更響應的用戶界面，我建議改爲執行scrollViewWillEndDragging(_:withVelocity:targetContentOffset:)。

夫特4示例，其中每個集合視圖部分是一個頁面：

override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) { 
    if let collectionView = scrollView as? ScoreCollectionView, 
     let section = collectionView.indexPathForItem(at: targetContentOffset.pointee)?.section { 
     self.pageControl.currentPage = section 
    } 
}