[英]Centered paging on vertical UICollectionView with custom cell height
I have seen a lot of posts where this is solved horizontally, however, I am having trouble implementing a solution for a vertical collection view.我看过很多帖子水平解决了这个问题,但是,我在实现垂直集合视图的解决方案时遇到了麻烦。
My collection view's cells fill the entire width but not the entire height of the collection view, so normal paging does not work.我的集合视图的单元格填充了集合视图的整个宽度,但没有填充集合视图的整个高度,因此正常的分页不起作用。 I am trying to snap the cells center to the screens center when scrolling using a custom
UICollectionViewFlowLayout
.我试图在使用自定义
UICollectionViewFlowLayout
滚动时将单元格中心捕捉到屏幕中心。 (Similar to an Instagram feed but no "free" scrolling and the posts get centered vertically) (类似于 Instagram 提要,但没有“免费”滚动,并且帖子垂直居中)
class FeedLayout: UICollectionViewFlowLayout {
private var previousOffset: CGFloat = 0
private var currentPage: Int = 0
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
guard let collectionView = collectionView else {
return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
}
let itemsCount = collectionView.numberOfItems(inSection: 0)
if previousOffset > collectionView.contentOffset.y {
currentPage = max(currentPage - 1, 0)
} else if previousOffset < collectionView.contentOffset.y {
currentPage = min(currentPage + 1, itemsCount - 1)
}
let updatedOffset = ((collectionView.frame.height * 0.75) + minimumLineSpacing) * CGFloat(currentPage)
previousOffset = updatedOffset
return CGPoint(x: proposedContentOffset.x, y: updatedOffset)
}
}
I wrote an open-source extension that does this a few days ago.几天前我写了一个开源扩展。
I would adjust it to center the cell (instead of scroll cell-by-cell with new cells on the top) with this changes:我会通过以下更改将其调整为使单元格居中(而不是逐个滚动单元格并在顶部使用新单元格):
public extension UICollectionViewFlowLayout {
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
// determine total pages
// collectionView adds an extra self.minimumLineSpacing to the total contentSize.height so this must be removed to get an even division of pages
let totalPages = (collectionView.contentSize.height - self.minimumLineSpacing) / pageHeight
// determine current page index
let visibleRect = CGRect(origin: collectionView.contentOffset, size: collectionView.bounds.size)
let visiblePoint = self.itemSize.height * 2 > collectionView.visibleSize.height ? CGPoint(x: visibleRect.midX, y: visibleRect.midY) : CGPoint(x: visibleRect.midX, y: visibleRect.midY - (self.itemSize.height / 3))
let visibleIndexPath = collectionView.indexPathForItem(at: visiblePoint)?.row ?? 0
let currentIndex = CGFloat(visibleIndexPath)
// 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.5
// check how many pages the user flicked, if <= 1 then flickedPages should return 0
let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)
// determine the new vertical offset
// scroll to top of next/previos cell
// let newVerticalOffset = ((currentPage + flickedPages) * pageHeight) - collectionView.contentInset.top
// scroll to center of next/previous cell
let newVerticalOffset = ((currentPage + flickedPages) * pageHeight) + ((collectionView.visibleSize.height - pageHeight) / 2) - collectionView.contentInset.top
// determine up or down swipe
let swipeDirection: CGFloat = flickVelocity > 0 ? 1 : -1
// determine if we are at the end of beginning of list
let beyond = newVerticalOffset + pageHeight >= collectionView.contentSize.height || collectionView.contentOffset.y < 0 ? true : false
// determine if the flick was too small to switch pages
let stay = abs(newVerticalOffset - collectionView.contentOffset.y) < (self.itemSize.height * 0.4) ? true : false
// determine if there are multiple pages available to swipe based on current page
var multipleAvailable = false
if flickVelocity > 0 {
multipleAvailable = currentIndex + swipeDirection < totalPages - 1 ? true : false
} else {
multipleAvailable = currentIndex + swipeDirection > 0 ? true : false
}
// give haptic feedback based on how many cells are scrolled
if beyond == false && stay == false {
if abs(flickedPages) > 1 && multipleAvailable {
TapticGenerator.notification(.success)
} else {
TapticGenerator.impact(.medium)
}
}
return CGPoint(x: proposedContentOffset.x, y: newVerticalOffset - collectionView.safeAreaInsets.top)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.