ios - with - uipagecontrol example

Cómo agregar PageControl dentro de UICollectionView Image Scrolling

Question

Hola, tengo los códigos de lista de imágenes horizontales de UICollectionView quiero agregar PageControl cuando se PageControl imágenes de desplazamiento, agregué selector de IBOutlet e IBOutlet pero, ¿cómo puedo integrarlo? entre UICollecitonView . ?

Mis códigos debajo de abajo.

 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

Aquí tiene una clase completa con la paginación de Control de página en una vista de colección horizontal. Esto está funcionando en una de mis aplicaciones, ahora mismo, y está funcionando correctamente. Si no puedes hacerlo funcionar, no dudes en preguntarme y te ayudaré.

Primero, en el Guión Gráfico tienes que configurar tu CollectionView con:

Diseño : Flujo
Dirección de desplazamiento : horizontal
Desplazamiento habilitado
Paginación habilitada

@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

En espera de scrollViewDidEndDecelerating resultados en una actualización lenta a UIPageControl . Si desea una IU más receptiva, sugiero que se implemente scrollViewWillEndDragging(_:withVelocity:targetContentOffset:) .

Ejemplo de Swift 4 donde cada sección de vista de colección es una página:

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

Answer 3

No soy un fan de la respuesta aceptada. De vez en cuando, la willDisplay cell devolverá la página incorrecta para el control de la página según la interacción de los usuarios.

Lo que yo uso:

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

Esto actualizará la página una vez que el usuario haya terminado de desplazarse, lo que currentPage la página currentPage del currentPage de pageControl más precisa.

Answer 4

Para un UIPageControl más sensible, prefiero usar scrollViewDidScroll y calcular el desplazamiento con respecto al centro horizontal del scrollView.

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

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

Answer 5

Swift 4.2 Muy suave trabajando

//MARK:- For Display the page number in page controll of collection view Cell
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let visibleRect = CGRect(origin: self.collectionview.contentOffset, size: self.collectionview.bounds.size)
    let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
    if let visibleIndexPath = self.collectionview.indexPathForItem(at: visiblePoint) {
        self.pageControl.currentPage = visibleIndexPath.row
    }
}

Answer 6

La respuesta de Luke fue un buen comienzo para mí, pero tenía dos problemas: no se actualizaba con frecuencia (ya se señaló en otras respuestas), pero lo más importante es que no mostraba la página correcta para el último elemento en mi vista de colección (orientada horizontalmente) y solo cambiaba de página cuando el elemento estaba casi saliendo de la pantalla.

Para el primer problema, como otros lo notaron, el uso de scrollViewDidScroll proporcionó una mejor experiencia. Me preocupaban los problemas de rendimiento al hacer la llamada con tanta frecuencia, pero no noté ninguno.

En cuanto al segundo problema, para mi caso de uso, encontrar la ruta de índice de la celda que está en el centro de la pantalla proporcionó una mejor solución. Tenga en cuenta que si su caso de uso puede contener más de dos celdas en la pantalla, es posible que deba ajustarlo. Esto se debe a que su última celda nunca alcanzaría la mitad de la pantalla. Sin embargo, argumentaría que, en ese caso, utilizar UIPageControl podría no ser lo ideal.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let visibleRect = CGRect(origin: self.collectionView.contentOffset, size: self.collectionView.bounds.size)
    let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
    if let visibleIndexPath = self.collectionView.indexPathForItem(at: visiblePoint) {
        self.pageControl.currentPage = visibleIndexPath.row
    }
}

Answer 7

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let visibleRect = CGRect(origin: self.cvImageListing.contentOffset, size: self.cvImageListing.bounds.size)
        let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
        if let visibleIndexPath = self.cvImageListing.indexPathForItem(at: visiblePoint) {
            self.pageControl.currentPage = visibleIndexPath.row
        }
    }