การเพจ UICollection ดูตามเซลล์ไม่ใช่หน้าจอ


113

ฉันUICollectionViewใช้การเลื่อนในแนวนอนและมี 2 เซลล์เคียงข้างกันเสมอต่อทั้งหน้าจอ ฉันต้องการการเลื่อนเพื่อหยุดที่จุดเริ่มต้นของเซลล์ เมื่อเปิดใช้งานเพจมุมมองคอลเลคชันจะเลื่อนทั้งเพจซึ่งเป็น 2 เซลล์พร้อมกันจากนั้นจะหยุด

ฉันต้องการเปิดใช้งานการเลื่อนตามเซลล์เดียวหรือเลื่อนตามเซลล์หลายเซลล์โดยหยุดที่ขอบของเซลล์

ฉันพยายามคลาสย่อยUICollectionViewFlowLayoutและใช้วิธีการtargetContentOffsetForProposedContentOffsetนี้ แต่จนถึงตอนนี้ฉันทำได้เพียงทำลายมุมมองคอลเลคชันของฉันและมันก็หยุดเลื่อน มีวิธีที่ง่ายกว่าในการบรรลุสิ่งนี้หรือไม่อย่างไรหรือฉันจำเป็นต้องใช้วิธีการทั้งหมดของUICollectionViewFlowLayoutคลาสย่อยจริงๆ ขอบคุณ.


1
ความกว้าง collectionviewcell ของคุณต้องเท่ากับความกว้าง screnn และเปิดใช้งาน collectionView Paging
Erhan

แต่ฉันต้องแสดง 2 เซลล์พร้อมกัน ฉันใช้ iPad เซลล์ 2 เซลล์จึงแบ่งครึ่งหน้าจอคนละครึ่ง
Martin Koles

2
ใช้targetContentOffsetForProposedContentOffset:withScrollingVelocity:และปิดเพจ
Wain

นี่คือสิ่งที่ฉันพยายาม ตัวอย่างที่ไหนสักแห่ง?
Martin Koles

เกี่ยวข้องกัน? stackoverflow.com/questions/20496850/…
Fattie

คำตอบ:


47

ตกลงดังนั้นฉันจึงพบวิธีแก้ปัญหาที่นี่: targetContentOffsetForProposedContentOffset: withScrollingVelocity โดยไม่ต้องใช้คลาสย่อย UICollectionViewFlowLayout

ฉันควรจะค้นหาtargetContentOffsetForProposedContentOffsetตั้งแต่เริ่มต้น


1
สำหรับใครก็ตามที่ถามเกี่ยวกับสิ่งนี้ใน swift 5: collectionView.isPagingEnabled = true ทำสิ่งนี้!
Mohammad Bashir Sidani

23

เพียงแค่แทนที่วิธีการ:

- (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];
}

1
รหัสชิ้นนั้นช่วยฉันได้มากฉันต้องเพิ่มการตรวจสอบทิศทางการเลื่อนปัจจุบันและปรับค่า +/- 0.5 ให้เหมาะสม
helkarli

1
คุณสามารถตั้งค่า collectionView.pagingEnabled = true
evya

@evya ว้าวคุณพูดถูก isPagingEnabled ใช้ได้สำหรับฉัน
BigSauce

@evya ของดี !!
Anish Kumar

pagingEnabled ทำงานอย่างไรสำหรับพวกคุณ? ของฉันมีความผิดพลาดอย่างมากก่อนที่จะจบลงด้วยการชดเชยการเพจเดิม
Ethan Zhao

17

การเพจแนวนอนพร้อมความกว้างของหน้าแบบกำหนดเอง (Swift 4 & 5)

วิธีแก้ปัญหามากมายที่นำเสนอในที่นี้ส่งผลให้เกิดพฤติกรรมแปลก ๆ บางอย่างที่ไม่รู้สึกว่ามีการนำเพจไปใช้อย่างถูกต้อง


อย่างไรก็ตามวิธีแก้ปัญหาที่นำเสนอในบทช่วยสอนนี้ดูเหมือนจะไม่มีปัญหาใด ๆ รู้สึกเหมือนเป็นอัลกอริธึมการเพจที่ทำงานได้อย่างสมบูรณ์แบบ คุณสามารถใช้งานได้ใน 5 ขั้นตอนง่ายๆ:

  1. เพิ่มคุณสมบัติต่อไปนี้ในประเภทของคุณ: private var indexOfCellBeforeDragging = 0
  2. ตั้งค่าcollectionView delegateดังนี้:collectionView.delegate = self
  3. เพิ่มความสอดคล้องUICollectionViewDelegateผ่านส่วนขยาย:extension YourType: UICollectionViewDelegate { }
  4. เพิ่มวิธีการต่อไปนี้ในส่วนขยายที่ใช้ UICollectionViewDelegateสอดคล้องและตั้งค่าสำหรับ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. เพิ่มวิธีการต่อไปนี้ในส่วนขยายที่ใช้ความUICollectionViewDelegateสอดคล้องตั้งค่าเดียวกันสำหรับpageWidth(คุณอาจเก็บค่านี้ไว้ที่ศูนย์กลาง) และตั้งค่าสำหรับ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)
        }
    }

สำหรับใครที่ใช้นี้คุณจำเป็นต้องเปลี่ยนส่วนหนึ่งจะเป็น:Pop back (against velocity) collectionViewLayout.collectionView!.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)หมายเหตุ.centeredHorizontally
matthew.kempson

@ matthew.kempson ขึ้นอยู่กับว่าคุณต้องการให้เค้าโครงทำงานอย่างไร สำหรับเลย์เอาต์ที่ฉันใช้กับ.leftมันก็ดี
fredpi

ฉันพบว่า.leftมันไม่ได้ผลตามที่คาดไว้ มันดูเหมือนจะผลักดันเซลล์มากเกินไปที่จะกลับ @fredpi
matthew.kempson

13

คำตอบของ Evya เวอร์ชัน Swift 3:

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)


}

เมื่อคุณคลิกที่ด้านข้างของเซลล์จะมีการชดเชยแปลก ๆ
Maor

เฮ้ @Maor ฉันไม่รู้ว่าคุณยังต้องการหรือไม่ แต่ในกรณีของฉันที่ได้รับการแก้ไขการปิดการใช้งานเพจในมุมมองคอลเลกชัน
Fernando Mata

2
ฉันชอบสิ่งนี้ แต่รู้สึกเฉื่อยชาเล็กน้อยด้วยการกวาดนิ้วเล็ก ๆ อย่างรวดเร็วดังนั้นฉันจึงเพิ่มบางสิ่งเพื่อคำนึงถึงความเร็วและทำให้มันราบรื่นขึ้นมาก if(velocity.x > 1) { mod = 0.5; } else if(velocity.x < -1) { mod = -0.5; }จากนั้นเพิ่ม+ modหลังจาก+ Double(0.5)
Captnwalker1

12

นี่เป็นวิธีที่ง่ายที่สุดที่ฉันพบในSwift 4.2สำหรับhorinzontalเลื่อนแบบ :

ฉันกำลังใช้เซลล์แรกvisibleCellsและเลื่อนไปที่ถ้าเซลล์แรกที่มองเห็นได้แสดงน้อยกว่าครึ่งหนึ่งของความกว้างฉันกำลังเลื่อนไปที่เซลล์ถัดไป

หากคอลเลกชันของคุณเลื่อนแนวตั้งเพียงแค่เปลี่ยนxจากyและwidthโดยheight

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    targetContentOffset.pointee = scrollView.contentOffset
    var indexes = self.collectionView.indexPathsForVisibleItems
    indexes.sort()
    var index = indexes.first!
    let cell = self.collectionView.cellForItem(at: index)!
    let position = self.collectionView.contentOffset.x - cell.frame.origin.x
    if position > cell.frame.size.width/2{
       index.row = index.row+1
    }
    self.collectionView.scrollToItem(at: index, at: .left, animated: true )
}

คุณช่วยเพิ่มลิงค์ไปยังบทความต้นทางได้ไหม คำตอบที่ดี BTW
Md. Ibrahim Hassan

@ Md.IbrahimHassan ไม่มีบทความฉันคือแหล่งที่มา Thx
Romulo BM

มันใช้งานได้ แต่น่าเสียดายที่ประสบการณ์ไม่ราบรื่น
Alaa Eddine Cherbib

ไม่เนียนหมายความว่ายังไง? สำหรับฉันแล้วผลลัพธ์คือภาพเคลื่อนไหวที่ราบรื่นมาก .. ดูผลลัพธ์ของฉันที่นี่
Romulo BM

1
วิธีนี้ใช้ได้ดี
Anuj Kumar Rai

11

นี่คือการใช้งานของฉันในSwift 5สำหรับการเพจตามเซลล์แนวตั้ง :

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

    guard let collectionView = self.collectionView else {
        let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        return latestOffset
    }

    // Page height used for estimating and calculating paging.
    let pageHeight = self.itemSize.height + self.minimumLineSpacing

    // Make an estimation of the current page position.
    let approximatePage = collectionView.contentOffset.y/pageHeight

    // Determine the current page based on velocity.
    let currentPage = velocity.y == 0 ? round(approximatePage) : (velocity.y < 0.0 ? floor(approximatePage) : ceil(approximatePage))

    // Create custom flickVelocity.
    let flickVelocity = velocity.y * 0.3

    // Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
    let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)

    let newVerticalOffset = ((currentPage + flickedPages) * pageHeight) - collectionView.contentInset.top

    return CGPoint(x: proposedContentOffset.x, y: newVerticalOffset)
}

หมายเหตุบางประการ:

  • ไม่ผิดพลาด
  • ตั้งค่าเพจให้เป็นเท็จ ! (มิฉะนั้นจะใช้ไม่ได้)
  • ช่วยให้คุณตั้งค่าการสะบัดของคุณเองได้อย่างง่ายดาย
  • หากบางอย่างยังใช้งานไม่ได้หลังจากลองทำสิ่งนี้ให้ตรวจสอบว่าของคุณitemSizeตรงกับขนาดของรายการจริงหรือไม่ซึ่งมักจะเป็นปัญหาโดยเฉพาะเมื่อใช้collectionView(_:layout:sizeForItemAt:)ให้ใช้ตัวแปรที่กำหนดเองกับ itemSize แทน
  • self.collectionView.decelerationRate = UIScrollView.DecelerationRate.fastนี้ทำงานได้ดีที่สุดเมื่อคุณตั้งค่า

นี่คือเวอร์ชันแนวนอน (ยังไม่ได้ทดสอบอย่างละเอียดดังนั้นโปรดยกโทษให้กับความผิดพลาด):

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

    guard let collectionView = self.collectionView else {
        let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        return latestOffset
    }

    // Page width used for estimating and calculating paging.
    let pageWidth = self.itemSize.width + self.minimumInteritemSpacing

    // Make an estimation of the current page position.
    let approximatePage = collectionView.contentOffset.x/pageWidth

    // Determine the current page based on velocity.
    let currentPage = velocity.x == 0 ? round(approximatePage) : (velocity.x < 0.0 ? floor(approximatePage) : ceil(approximatePage))

    // Create custom flickVelocity.
    let flickVelocity = velocity.x * 0.3

    // Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
    let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)

    // Calculate newHorizontalOffset.
    let newHorizontalOffset = ((currentPage + flickedPages) * pageWidth) - collectionView.contentInset.left

    return CGPoint(x: newHorizontalOffset, y: proposedContentOffset.y)
}

รหัสนี้อ้างอิงจากรหัสที่ฉันใช้ในโครงการส่วนตัวของฉันคุณสามารถตรวจสอบได้ที่นี่โดยดาวน์โหลดและเรียกใช้เป้าหมายตัวอย่าง


1
สำหรับ Swift 5: ใช้.fastแทนUIScollViewDecelerationRateFast
José

ขอบคุณที่ชี้ให้ดู! ลืมอัปเดตคำตอบนี้และเพิ่งทำ!
JoniVR

สวัสดี @JoniVR ตัวอย่างคำอธิบายที่ดีมากเพื่อแสดงให้เห็นว่าการปัดจะทำงานในแนวตั้งอย่างไร คุณจะใจดีมากที่จะแนะนำว่าการเปลี่ยนแปลงโค้ดโดยรวมที่จำเป็นสำหรับการทำให้งานนี้ไม่มีที่ติในแนวนอน นอกเหนือจากโค้ดด้านบนที่คุณแนะนำสำหรับการปัดแนวนอนในฟังก์ชันออฟเซ็ตเนื้อหาเป้าหมาย ฉันคิดว่ามีการเปลี่ยนแปลงมากมายที่ต้องทำเพื่อจำลองสถานการณ์ที่แน่นอนในแนวนอน แก้ไขฉันถ้าฉันผิด
Shiv Prakash

9

ส่วนหนึ่งมาจากคำตอบของ StevenOjo ฉันได้ทดสอบสิ่งนี้โดยใช้การเลื่อนแนวนอนและไม่มี Bounce UICollectionView cellSize คือขนาด CollectionViewCell คุณสามารถปรับแต่งแฟกเตอร์เพื่อปรับเปลี่ยนความไวในการเลื่อน

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

7

แนวทางที่ 1: มุมมองคอลเลคชัน

flowLayoutเป็น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)
    }
}

แนวทางที่ 2: ตัวควบคุมมุมมองหน้า

คุณสามารถใช้ได้UIPageViewControllerหากตรงตามความต้องการของคุณแต่ละเพจจะมีตัวควบคุมมุมมองแยกต่างหาก


สำหรับสิ่งนี้ฉันต้องปิดการใช้งานเพจและเปิดใช้งานการเลื่อนเฉพาะใน collectionview?
nr5

สิ่งนี้ใช้ไม่ได้กับ swift4 / Xcode9.3 ล่าสุด, targetContentOffset ไม่มีฟิลด์หน่วยความจำ ฉันใช้การเลื่อน แต่ไม่ได้ปรับตำแหน่งเซลล์เมื่อคุณ "ตวัด"
Steven B.

ทำงานกับเซลล์สองสามเซลล์ แต่เมื่อฉันไปถึงเซลล์ 13 มันเริ่มกระโดดกลับไปที่เซลล์ก่อนหน้าและคุณไม่สามารถดำเนินการต่อได้
Christopher Smit

4

นี่เป็นวิธีที่ตรงในการทำเช่นนี้

กรณีนี้ง่าย แต่ในที่สุดก็พบได้บ่อย (ตัวเลื่อนภาพขนาดย่อทั่วไปที่มีขนาดเซลล์คงที่และช่องว่างระหว่างเซลล์คงที่)

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
}

โปรดทราบว่าไม่มีเหตุผลที่จะเรียก scrollToOffset หรือดำดิ่งลงในเค้าโครง พฤติกรรมการเลื่อนแบบเนทีฟทำทุกอย่างอยู่แล้ว

ไชโยทั้งหมด :)


2
คุณสามารถเลือกที่collectionView.decelerationRate = .fastจะตั้งค่าเป็นเพจจิ้งเริ่มต้นที่เลียนแบบใกล้ชิด
elfanek

1
นี่เป็นสิ่งที่ดีจริงๆ @elfanek ฉันพบว่าการตั้งค่าที่ใช้งานได้ดีเว้นแต่คุณจะปัดเบา ๆ และเบา ๆ ดูเหมือนว่าจะกะพริบอย่างรวดเร็ว
mylogon

3

คล้ายกับคำตอบของ evya แต่นุ่มนวลกว่าเล็กน้อยเพราะไม่ได้กำหนด targetContentOffset เป็นศูนย์

- (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);
        }
    }
}

3

แก้ไขคำตอบ Romulo BM สำหรับการฟังความเร็ว

func scrollViewWillEndDragging(
    _ scrollView: UIScrollView,
    withVelocity velocity: CGPoint,
    targetContentOffset: UnsafeMutablePointer<CGPoint>
) {
    targetContentOffset.pointee = scrollView.contentOffset
    var indexes = collection.indexPathsForVisibleItems
    indexes.sort()
    var index = indexes.first!
    if velocity.x > 0 {
       index.row += 1
    } else if velocity.x == 0 {
        let cell = self.collection.cellForItem(at: index)!
        let position = self.collection.contentOffset.x - cell.frame.origin.x
        if position > cell.frame.size.width / 2 {
           index.row += 1
        }
    }

    self.collection.scrollToItem(at: index, at: .centeredHorizontally, animated: true )
}

2

สวิฟต์ 5

ฉันพบวิธีที่ทำได้โดยไม่ต้องใช้ UICollectionView ย่อยเพียงแค่คำนวณ contentOffset ในแนวนอน เห็นได้ชัดว่าไม่มีการตั้งค่า isPagingEnabled เป็นจริง นี่คือรหัส:

var offsetScroll1 : CGFloat = 0
var offsetScroll2 : CGFloat = 0
let flowLayout = UICollectionViewFlowLayout()
let screenSize : CGSize = UIScreen.main.bounds.size
var items = ["1", "2", "3", "4", "5"]

override func viewDidLoad() {
    super.viewDidLoad()
    flowLayout.scrollDirection = .horizontal
    flowLayout.minimumLineSpacing = 7
    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 590, width: screenSize.width, height: 200), collectionViewLayout: flowLayout)
    collectionView.register(collectionViewCell1.self, forCellWithReuseIdentifier: cellReuseIdentifier)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.backgroundColor = UIColor.clear
    collectionView.showsHorizontalScrollIndicator = false
    self.view.addSubview(collectionView)
}

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    offsetScroll1 = offsetScroll2
}

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    offsetScroll1 = offsetScroll2
}

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>){
    let indexOfMajorCell = self.desiredIndex()
    let indexPath = IndexPath(row: indexOfMajorCell, section: 0)
    flowLayout.collectionView!.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
    targetContentOffset.pointee = scrollView.contentOffset
}

private func desiredIndex() -> Int {
    var integerIndex = 0
    print(flowLayout.collectionView!.contentOffset.x)
    offsetScroll2 = flowLayout.collectionView!.contentOffset.x
    if offsetScroll2 > offsetScroll1 {
        integerIndex += 1
        let offset = flowLayout.collectionView!.contentOffset.x / screenSize.width
        integerIndex = Int(round(offset))
        if integerIndex < (items.count - 1) {
            integerIndex += 1
        }
    }
    if offsetScroll2 < offsetScroll1 {
        let offset = flowLayout.collectionView!.contentOffset.x / screenSize.width
        integerIndex = Int(offset.rounded(.towardZero))
    }
    let targetIndex = integerIndex
    return targetIndex
}

1

นี่คือเวอร์ชันของฉันใน Swift 3 คำนวณค่าชดเชยหลังจากสิ้นสุดการเลื่อนและปรับค่าชดเชยด้วยภาพเคลื่อนไหว

collectionLayout คือ 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)
}

1

นอกจากนี้คุณสามารถสร้างมุมมองการเลื่อนปลอมเพื่อจัดการการเลื่อนได้

แนวนอนหรือแนวตั้ง

// === 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)
}

0

ตกลงคำตอบที่เสนอไม่ได้ผลสำหรับฉันเพราะฉันต้องการเลื่อนตามส่วนต่างๆแทนดังนั้นจึงมีขนาดหน้าความกว้างที่หลากหลาย

ฉันทำสิ่งนี้ (แนวตั้งเท่านั้น):

   var pagesSizes = [CGSize]()
   func scrollViewDidScroll(_ scrollView: UIScrollView) {
        defer {
            lastOffsetY = scrollView.contentOffset.y
        }
        if collectionView.isDecelerating {
            var currentPage = 0
            var currentPageBottom = CGFloat(0)
            for pagesSize in pagesSizes {
                currentPageBottom += pagesSize.height
                if currentPageBottom > collectionView!.contentOffset.y {
                    break
                }
                currentPage += 1
            }
            if collectionView.contentOffset.y > currentPageBottom - pagesSizes[currentPage].height, collectionView.contentOffset.y + collectionView.frame.height < currentPageBottom {
                return // 100% of view within bounds
            }
            if lastOffsetY < collectionView.contentOffset.y {
                if currentPage + 1 != pagesSizes.count {
                    collectionView.setContentOffset(CGPoint(x: 0, y: currentPageBottom), animated: true)
                }
            } else {
                collectionView.setContentOffset(CGPoint(x: 0, y: currentPageBottom - pagesSizes[currentPage].height), animated: true)
            }
        }
    }

ในกรณีนี้ฉันคำนวณแต่ละขนาดหน้าไว้ล่วงหน้าโดยใช้ส่วนสูง + ส่วนหัว + ส่วนท้ายและเก็บไว้ในอาร์เรย์ นั่นคือpagesSizesสมาชิก


0

นี่คือวิธีแก้ปัญหาของฉันใน Swift 4.2 ฉันหวังว่ามันจะช่วยคุณได้

class SomeViewController: UIViewController {

  private lazy var flowLayout: UICollectionViewFlowLayout = {
    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: /* width */, height: /* height */)
    layout.minimumLineSpacing = // margin
    layout.minimumInteritemSpacing = 0.0
    layout.sectionInset = UIEdgeInsets(top: 0.0, left: /* margin */, bottom: 0.0, right: /* margin */)
    layout.scrollDirection = .horizontal
    return layout
  }()

  private lazy var collectionView: UICollectionView = {
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
    collectionView.showsHorizontalScrollIndicator = false
    collectionView.dataSource = self
    collectionView.delegate = self
    // collectionView.register(SomeCell.self)
    return collectionView
  }()

  private var currentIndex: Int = 0
}

// MARK: - UIScrollViewDelegate

extension SomeViewController {
  func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    guard scrollView == collectionView else { return }

    let pageWidth = flowLayout.itemSize.width + flowLayout.minimumLineSpacing
    currentIndex = Int(scrollView.contentOffset.x / pageWidth)
  }

  func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard scrollView == collectionView else { return }

    let pageWidth = flowLayout.itemSize.width + flowLayout.minimumLineSpacing
    var targetIndex = Int(roundf(Float(targetContentOffset.pointee.x / pageWidth)))
    if targetIndex > currentIndex {
      targetIndex = currentIndex + 1
    } else if targetIndex < currentIndex {
      targetIndex = currentIndex - 1
    }
    let count = collectionView.numberOfItems(inSection: 0)
    targetIndex = max(min(targetIndex, count - 1), 0)
    print("targetIndex: \(targetIndex)")

    targetContentOffset.pointee = scrollView.contentOffset
    var offsetX: CGFloat = 0.0
    if targetIndex < count - 1 {
      offsetX = pageWidth * CGFloat(targetIndex)
    } else {
      offsetX = scrollView.contentSize.width - scrollView.width
    }
    collectionView.setContentOffset(CGPoint(x: offsetX, y: 0.0), animated: true)
  }
}

0
final class PagingFlowLayout: UICollectionViewFlowLayout {
    private var currentIndex = 0

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        let count = collectionView!.numberOfItems(inSection: 0)
        let currentAttribute = layoutAttributesForItem(
            at: IndexPath(item: currentIndex, section: 0)
            ) ?? UICollectionViewLayoutAttributes()

        let direction = proposedContentOffset.x > currentAttribute.frame.minX
        if collectionView!.contentOffset.x + collectionView!.bounds.width < collectionView!.contentSize.width || currentIndex < count - 1 {
            currentIndex += direction ? 1 : -1
            currentIndex = max(min(currentIndex, count - 1), 0)
        }

        let indexPath = IndexPath(item: currentIndex, section: 0)
        let closestAttribute = layoutAttributesForItem(at: indexPath) ?? UICollectionViewLayoutAttributes()

        let centerOffset = collectionView!.bounds.size.width / 2
        return CGPoint(x: closestAttribute.center.x - centerOffset, y: 0)
    }
}

คุณไม่ควรคัดลอก / วางคำตอบ ทำเครื่องหมายว่าซ้ำกันตามความเหมาะสม
DonMag

0

คำตอบเดิมของОленьБезрогийมีปัญหาดังนั้นในมุมมองคอลเลกชันเซลล์สุดท้ายจึงเลื่อนไปที่จุดเริ่มต้น

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    targetContentOffset.pointee = scrollView.contentOffset
    var indexes = yourCollectionView.indexPathsForVisibleItems
    indexes.sort()
    var index = indexes.first!
    // if velocity.x > 0 && (Get the number of items from your data) > index.row + 1 {
    if velocity.x > 0 && yourCollectionView.numberOfItems(inSection: 0) > index.row + 1 {
       index.row += 1
    } else if velocity.x == 0 {
        let cell = yourCollectionView.cellForItem(at: index)!
        let position = yourCollectionView.contentOffset.x - cell.frame.origin.x
        if position > cell.frame.size.width / 2 {
           index.row += 1
        }
    }
    
    yourCollectionView.scrollToItem(at: index, at: .centeredHorizontally, animated: true )
}

-1

นี่คือวิธีของฉันที่จะทำได้โดยใช้ a UICollectionViewFlowLayoutเพื่อแทนที่targetContentOffset:

(แม้ว่าท้ายที่สุดแล้วฉันก็ไม่ได้ใช้สิ่งนี้และใช้ UIPageViewController แทน)

/**
 A UICollectionViewFlowLayout with...
 - paged horizontal scrolling
 - itemSize is the same as the collectionView bounds.size
 */
class PagedFlowLayout: UICollectionViewFlowLayout {

  override init() {
    super.init()
    self.scrollDirection = .horizontal
    self.minimumLineSpacing = 8 // line spacing is the horizontal spacing in horizontal scrollDirection
    self.minimumInteritemSpacing = 0
    if #available(iOS 11.0, *) {
      self.sectionInsetReference = .fromSafeArea // for iPhone X
    }
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("not implemented")
  }

  // Note: Setting `minimumInteritemSpacing` here will be too late. Don't do it here.
  override func prepare() {
    super.prepare()
    guard let collectionView = collectionView else { return }
    collectionView.decelerationRate = UIScrollViewDecelerationRateFast // mostly you want it fast!

    let insetedBounds = UIEdgeInsetsInsetRect(collectionView.bounds, self.sectionInset)
    self.itemSize = insetedBounds.size
  }

  // Table: Possible cases of targetContentOffset calculation
  // -------------------------
  // start |          |
  // near  | velocity | end
  // page  |          | page
  // -------------------------
  //   0   | forward  |  1
  //   0   | still    |  0
  //   0   | backward |  0
  //   1   | forward  |  1
  //   1   | still    |  1
  //   1   | backward |  0
  // -------------------------
  override func targetContentOffset( //swiftlint:disable:this cyclomatic_complexity
    forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

    guard let collectionView = collectionView else { return proposedContentOffset }

    let pageWidth = itemSize.width + minimumLineSpacing
    let currentPage: CGFloat = collectionView.contentOffset.x / pageWidth
    let nearestPage: CGFloat = round(currentPage)
    let isNearPreviousPage = nearestPage < currentPage

    var pageDiff: CGFloat = 0
    let velocityThreshold: CGFloat = 0.5 // can customize this threshold
    if isNearPreviousPage {
      if velocity.x > velocityThreshold {
        pageDiff = 1
      }
    } else {
      if velocity.x < -velocityThreshold {
        pageDiff = -1
      }
    }

    let x = (nearestPage + pageDiff) * pageWidth
    let cappedX = max(0, x) // cap to avoid targeting beyond content
    //print("x:", x, "velocity:", velocity)
    return CGPoint(x: cappedX, y: proposedContentOffset.y)
  }

}


-1

ฉันสร้างเค้าโครงมุมมองคอลเลกชันแบบกำหนดเองที่นี่ซึ่งรองรับ:

  • การเพจทีละเซลล์
  • การเพจครั้งละ 2+ เซลล์ขึ้นอยู่กับความเร็วในการปัด
  • แนวนอนหรือแนวตั้ง

มันง่ายเหมือน:

let layout = PagingCollectionViewLayout()

layout.itemSize = 
layout.minimumLineSpacing = 
layout.scrollDirection = 

คุณสามารถเพิ่มPagingCollectionViewLayout.swiftลงในโปรเจ็กต์ของคุณได้

หรือ

เพิ่มลงpod 'PagingCollectionViewLayout'ใน podfile ของคุณ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.