Как добавить PageControl внутри UICollectionView Прокрутка изображения

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 с:

Layout: Flow
направление прокрутки: Горизонтальный
скроллинг включен
Paging включен

@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) 
} 

Это обновит страницу после того, как пользователь закончит прокруткой, таким образом, делая currentPage из pageControl более точным.

Answer 3

Ожидание scrollViewDidEndDecelerating приводит к медленному обновлению до UIPageControl. Если вам нужен более гибкий пользовательский интерфейс, я предлагаю вместо этого реализовать scrollViewWillEndDragging(_:withVelocity:targetContentOffset:).

Swift 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 
    } 
}