Make Center-Zelle im Paging-Modus

Question

Ich erstellte UICollectionView mit horizontal und aktiviert auch paging Modus. jetzt möchte ich jede dieser Zellen auf dem Bildschirm mit der Fähigkeit versehen, eine Kante der nächsten/vorherigen Dias zu sehen.

Hier ist meine UICollectionView:

let collectionViewCardsSlider: UICollectionView = { 

     let collectionMargin = CGFloat(16) 
     let itemSpacing = CGFloat(10) 
     let itemHeight = CGFloat(168) 
     var itemWidth = UIScreen.main.bounds.width - collectionMargin * 2.0 

     let layout = UICollectionViewFlowLayout() 
     layout.scrollDirection = .horizontal 
     layout.minimumLineSpacing = itemSpacing 
     layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) 
     layout.itemSize = CGSize(width: itemWidth, height: itemHeight) 
     layout.headerReferenceSize = CGSize(width: collectionMargin, height: 0) 
     layout.footerReferenceSize = CGSize(width: collectionMargin, height: 0) 

     let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout) 
     collectionView.isPagingEnabled = true 
     collectionView.showsHorizontalScrollIndicator = false 
     collectionView.decelerationRate = UIScrollViewDecelerationRateFast 
     collectionView.backgroundColor = .clear 
     return collectionView 
    }() 

Hier Vorschau:

Wie Sie zuerst sehen und das letzte Element in der Mitte. aber das, was ich will, ist so etwas wie diese:

Wie kann ich das erreichen und auch das, was ist falsch in meinem Code?

Vielen Dank.

Answer 1

Versuchen Sie, die Klasse des Flowlayouts und deaktivieren Paging-Wechsel:

let collectionViewCardsSlider: UICollectionView = { 

    let collectionMargin = CGFloat(16) 
    let itemSpacing = CGFloat(10) 
    let itemHeight = CGFloat(168) 
    var itemWidth = UIScreen.main.bounds.width - collectionMargin * 2.0 

    let layout = CenterCellCollectionViewFlowLayout() 
    layout.scrollDirection = .horizontal 
    layout.minimumLineSpacing = itemSpacing 
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) 
    layout.itemSize = CGSize(width: itemWidth, height: itemHeight) 
    layout.headerReferenceSize = CGSize(width: collectionMargin, height: 0) 
    layout.footerReferenceSize = CGSize(width: collectionMargin, height: 0) 

    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout) 
    collectionView.isPagingEnabled = false 
    collectionView.showsHorizontalScrollIndicator = false 
    collectionView.decelerationRate = UIScrollViewDecelerationRateFast 
    collectionView.backgroundColor = .clear 
    return collectionView 
}() 

Und:

class CenterCellCollectionViewFlowLayout: UICollectionViewFlowLayout { 

    var mostRecentOffset : CGPoint = CGPoint() 

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { 

     if velocity.x == 0 { 
      return mostRecentOffset 
     } 

     if let cv = self.collectionView { 

      let cvBounds = cv.bounds 
      let halfWidth = cvBounds.size.width * 0.5; 


      if let attributesForVisibleCells = self.layoutAttributesForElements(in: cvBounds) { 

       var candidateAttributes : UICollectionViewLayoutAttributes? 
       for attributes in attributesForVisibleCells { 

        // == Skip comparison with non-cell items (headers and footers) == // 
        if attributes.representedElementCategory != UICollectionElementCategory.cell { 
         continue 
        } 

        if (attributes.center.x == 0) || (attributes.center.x > (cv.contentOffset.x + halfWidth) && velocity.x < 0) { 
         continue 
        } 
        candidateAttributes = attributes 
       } 

       // Beautification step , I don't know why it works! 
       if(proposedContentOffset.x == -(cv.contentInset.left)) { 
        return proposedContentOffset 
       } 

       guard let _ = candidateAttributes else { 
        return mostRecentOffset 
       } 
       mostRecentOffset = CGPoint(x: floor(candidateAttributes!.center.x - halfWidth), y: proposedContentOffset.y) 
       return mostRecentOffset 

      } 
     } 

     // fallback 
     mostRecentOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset) 
     return mostRecentOffset 
    } 


}