ios - Paginación UICollectionView por celdas, no por pantalla

uicollectionview layout

Question

Tengo UICollectionView con desplazamiento horizontal y siempre hay 2 celdas una al lado de la otra por toda la pantalla. Necesito que el desplazamiento se detenga al comienzo de una celda. Con la paginación habilitada, la vista de colección desplaza toda la página, que es de 2 celdas a la vez, y luego se detiene.

Necesito habilitar el desplazamiento por una sola celda, o desplazarme por varias celdas deteniéndome en el borde de la celda.

Traté de subclase UICollectionViewFlowLayout y para implementar el método targetContentOffsetForProposedContentOffset , pero hasta ahora solo he podido romper mi vista de colección y dejó de desplazarse. ¿Hay alguna manera más fácil de lograr esto y cómo, o realmente necesito implementar todos los métodos de la subclase UICollectionViewFlowLayout ? Gracias.

Answer 1

Enfoque 1: Vista de la colección

flowLayout es la propiedad UICollectionViewFlowLayout

override func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    if let collectionView = collectionView {

        targetContentOffset.memory = scrollView.contentOffset
        let pageWidth = CGRectGetWidth(scrollView.frame) + flowLayout.minimumInteritemSpacing

        var assistanceOffset : CGFloat = pageWidth / 3.0

        if velocity.x < 0 {
            assistanceOffset = -assistanceOffset
        }

        let assistedScrollPosition = (scrollView.contentOffset.x + assistanceOffset) / pageWidth

        var targetIndex = Int(round(assistedScrollPosition))


        if targetIndex < 0 {
            targetIndex = 0
        }
        else if targetIndex >= collectionView.numberOfItemsInSection(0) {
            targetIndex = collectionView.numberOfItemsInSection(0) - 1
        }

        print("targetIndex = /(targetIndex)")

        let indexPath = NSIndexPath(forItem: targetIndex, inSection: 0)

        collectionView.scrollToItemAtIndexPath(indexPath, atScrollPosition: .Left, animated: true)
    }
}

Enfoque 2: Controlador de vista de página

Podría usar UIPageViewController si cumple con sus requisitos, cada página tendría un controlador de vista por separado.

Answer 2

Paginación horizontal con ancho de página personalizado (Swift 4)

Muchas de las soluciones que se presentan aquí dan como resultado un comportamiento extraño que no parece una paginación implementada correctamente.

La solución presentada en este tutorial , sin embargo, no parece tener ningún problema. Simplemente se siente como un algoritmo de paginación que funciona perfectamente. Puedes implementarlo en 5 sencillos pasos:

1. Agregue la siguiente propiedad a su tipo: private var indexOfCellBeforeDragging = 0
2. Establezca el delegate collectionView siguiente manera: collectionView.delegate = self
3. Agregue conformidad con UICollectionViewDelegate través de una extensión: extension YourType: UICollectionViewDelegate { }

4. Agregue el siguiente método a la extensión que implementa la conformidad UICollectionViewDelegate y establezca un valor para pageWidth :

   func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
       let pageWidth = // The width your page should have (plus a possible margin)
       let proportionalOffset = collectionView.contentOffset.x / pageWidth
       indexOfCellBeforeDragging = Int(round(proportionalOffset))
   }

5. Agregue el siguiente método a la extensión que implementa la conformidad UICollectionViewDelegate , establezca el mismo valor para pageWidth (también puede almacenar este valor en un lugar central) y establezca un valor para collectionViewItemCount :

   func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
       // Stop scrolling
       targetContentOffset.pointee = scrollView.contentOffset
   
       // Calculate conditions
       let pageWidth = // The width your page should have (plus a possible margin)
       let collectionViewItemCount = // The number of items in this section
       let proportionalOffset = collectionView.contentOffset.x / pageWidth
       let indexOfMajorCell = Int(round(proportionalOffset))
       let swipeVelocityThreshold: CGFloat = 0.5
       let hasEnoughVelocityToSlideToTheNextCell = indexOfCellBeforeDragging + 1 < collectionViewItemCount && velocity.x > swipeVelocityThreshold
       let hasEnoughVelocityToSlideToThePreviousCell = indexOfCellBeforeDragging - 1 >= 0 && velocity.x < -swipeVelocityThreshold
       let majorCellIsTheCellBeforeDragging = indexOfMajorCell == indexOfCellBeforeDragging
       let didUseSwipeToSkipCell = majorCellIsTheCellBeforeDragging && (hasEnoughVelocityToSlideToTheNextCell || hasEnoughVelocityToSlideToThePreviousCell)
   
       if didUseSwipeToSkipCell {
           // Animate so that swipe is just continued
           let snapToIndex = indexOfCellBeforeDragging + (hasEnoughVelocityToSlideToTheNextCell ? 1 : -1)
           let toValue = pageWidth * CGFloat(snapToIndex)
           UIView.animate(
               withDuration: 0.3,
               delay: 0,
               usingSpringWithDamping: 1,
               initialSpringVelocity: velocity.x,
               options: .allowUserInteraction,
               animations: {
               scrollView.contentOffset = CGPoint(x: toValue, y: 0)
               scrollView.layoutIfNeeded()
           }, completion: nil)
       } else {
           // Pop back (against velocity)
           let indexPath = IndexPath(row: indexOfMajorCell, section: 0)
           collectionView.scrollToItem(at: indexPath, at: .left, animated: true)
       }
   }

Answer 3

Algo así como la respuesta de evya, pero un poco más suave porque no establece targetContentOffset en cero.

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    if ([scrollView isKindOfClass:[UICollectionView class]]) {
        UICollectionView* collectionView = (UICollectionView*)scrollView;
        if ([collectionView.collectionViewLayout isKindOfClass:[UICollectionViewFlowLayout class]]) {
            UICollectionViewFlowLayout* layout = (UICollectionViewFlowLayout*)collectionView.collectionViewLayout;

            CGFloat pageWidth = layout.itemSize.width + layout.minimumInteritemSpacing;
            CGFloat usualSideOverhang = (scrollView.bounds.size.width - pageWidth)/2.0;
            // k*pageWidth - usualSideOverhang = contentOffset for page at index k if k >= 1, 0 if k = 0
            // -> (contentOffset + usualSideOverhang)/pageWidth = k at page stops

            NSInteger targetPage = 0;
            CGFloat currentOffsetInPages = (scrollView.contentOffset.x + usualSideOverhang)/pageWidth;
            targetPage = velocity.x < 0 ? floor(currentOffsetInPages) : ceil(currentOffsetInPages);
            targetPage = MAX(0,MIN(self.projects.count - 1,targetPage));

            *targetContentOffset = CGPointMake(MAX(targetPage*pageWidth - usualSideOverhang,0), 0);
        }
    }
}

Answer 4

Aquí está mi versión de Swift 3. Calcule el desplazamiento después de que el desplazamiento finalizó y ajuste el desplazamiento con la animación.

collectionLayout es un UICollectionViewFlowLayout()

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let index = scrollView.contentOffset.x / collectionLayout.itemSize.width
    let fracPart = index.truncatingRemainder(dividingBy: 1)
    let item= Int(fracPart >= 0.5 ? ceil(index) : floor(index))

    let indexPath = IndexPath(item: item, section: 0)
    collectionView.scrollToItem(at: indexPath, at: .left, animated: true)
}

Answer 5

En parte basado en la respuesta de StevenOjo. He probado esto usando un desplazamiento horizontal y sin Bounce UICollectionView. cellSize es el tamaño de CollectionViewCell. Puede modificar el factor para modificar la sensibilidad de desplazamiento.

override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    targetContentOffset.pointee = scrollView.contentOffset
    var factor: CGFloat = 0.5
    if velocity.x < 0 {
        factor = -factor
    }
    let indexPath = IndexPath(row: (scrollView.contentOffset.x/cellSize.width + factor).int, section: 0)
    collectionView?.scrollToItem(at: indexPath, at: .left, animated: true)
}

Answer 6

Esta es una forma directa de hacer esto.

El caso es simple, pero finalmente bastante común (desplazador de miniaturas típico con tamaño de celda fijo y espacio fijo entre las células)

var itemCellSize: CGSize = <your cell size>
var itemCellsGap: CGFloat = <gap in between>

override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let pageWidth = (itemCellSize.width + itemCellsGap)
    let itemIndex = (targetContentOffset.pointee.x) / pageWidth
    targetContentOffset.pointee.x = round(itemIndex) * pageWidth - (itemCellsGap / 2)
}

// CollectionViewFlowLayoutDelegate

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

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return itemCellsGap
}

Tenga en cuenta que no hay ninguna razón para llamar a scrollToOffset o sumergirse en diseños. El comportamiento de desplazamiento nativo ya lo hace todo.

Saludos a todos :)

Answer 7

OK, entonces encontré la solución aquí: targetContentOffsetForProposedContentOffset: withScrollingVelocity sin subclasificar UICollectionViewFlowLayout

Debería haber buscado targetContentOffsetForProposedContentOffset en el comienzo.

Answer 8

Para las personas que buscan una búsqueda basada en celdas verticales (ya que eso era lo que estaba buscando inicialmente) He aquí una parte del código de una library que estoy creando que hace esto (debe poner esto dentro de una subclase de UICollectionViewFlowLayout ).

Probablemente también pueda cambiarlo para que funcione horizontalmente.

código:

/** This property enables paging per card. The default value is true. */
public var isPagingEnabled: Bool = true

// MARK: cell paging
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

    // MARK: If the property `isPagingEnabled` is set to false, we don''t enable paging and thus return the current contentoffset
    guard isPagingEnabled else {
        let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        return latestOffset
    }

    var offsetAdjustment = CGFloat.greatestFiniteMagnitude
    let verticalOffset = proposedContentOffset.y
    let contentInset = collectionView!.contentInset.top

    let targetRect = CGRect(origin: CGPoint(x: 0, y: verticalOffset), size: self.collectionView!.bounds.size)

    for layoutAttributes in super.layoutAttributesForElements(in: targetRect)! {
        // MARK: we adjust for the contentInset
        let itemOffset = layoutAttributes.frame.origin.y - contentInset
        if (abs(itemOffset - verticalOffset) < abs(offsetAdjustment)) {
            offsetAdjustment = itemOffset - verticalOffset
        }
    }
    return CGPoint(x: proposedContentOffset.x, y: verticalOffset + offsetAdjustment)
}

Answer 9

Swift 3 versión de la respuesta de Evya:

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
  targetContentOffset.pointee = scrollView.contentOffset
    let pageWidth:Float = Float(self.view.bounds.width)
    let minSpace:Float = 10.0
    var cellToSwipe:Double = Double(Float((scrollView.contentOffset.x))/Float((pageWidth+minSpace))) + Double(0.5)
    if cellToSwipe < 0 {
        cellToSwipe = 0
    } else if cellToSwipe >= Double(self.articles.count) {
        cellToSwipe = Double(self.articles.count) - Double(1)
    }
    let indexPath:IndexPath = IndexPath(row: Int(cellToSwipe), section:0)
    self.collectionView.scrollToItem(at:indexPath, at: UICollectionViewScrollPosition.left, animated: true)


}

Answer 10

También puede crear vistas de desplazamiento falsas para manejar el desplazamiento.

Horizontal o Vertical

// === Defaults ===
let bannerSize = CGSize(width: 280, height: 170)
let pageWidth: CGFloat = 290 // ^ + paging
let insetLeft: CGFloat = 20
let insetRight: CGFloat = 20
// ================

var pageScrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Create fake scrollview to properly handle paging
    pageScrollView = UIScrollView(frame: CGRect(origin: .zero, size: CGSize(width: pageWidth, height: 100)))
    pageScrollView.isPagingEnabled = true
    pageScrollView.alwaysBounceHorizontal = true
    pageScrollView.showsVerticalScrollIndicator = false
    pageScrollView.showsHorizontalScrollIndicator = false
    pageScrollView.delegate = self
    pageScrollView.isHidden = true
    view.insertSubview(pageScrollView, belowSubview: collectionView)

    // Set desired gesture recognizers to the collection view
    for gr in pageScrollView.gestureRecognizers! {
        collectionView.addGestureRecognizer(gr)
    }
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == pageScrollView {
        // Return scrolling back to the collection view
        collectionView.contentOffset.x = pageScrollView.contentOffset.x
    }
}

func refreshData() {
    ...

    refreshScroll()
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    refreshScroll()
}

/// Refresh fake scrolling view content size if content changes
func refreshScroll() {
    let w = collectionView.width - bannerSize.width - insetLeft - insetRight
    pageScrollView.contentSize = CGSize(width: pageWidth * CGFloat(banners.count) - w, height: 100)
}

Answer 11

simplemente anule el método:

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    *targetContentOffset = scrollView.contentOffset; // set acceleration to 0.0
    float pageWidth = (float)self.articlesCollectionView.bounds.size.width;
    int minSpace = 10;

    int cellToSwipe = (scrollView.contentOffset.x)/(pageWidth + minSpace) + 0.5; // cell width + min spacing for lines
    if (cellToSwipe < 0) {
        cellToSwipe = 0;
    } else if (cellToSwipe >= self.articles.count) {
        cellToSwipe = self.articles.count - 1;
    }
    [self.articlesCollectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:cellToSwipe inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}