我用UICollectionView
创建了horizontal
并启用了paging
模式。现在我想让屏幕上的每个单元格都能看到下一张/上一张幻灯片的边缘。
这是我的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
}()
以下是预览:
因为你只能看到第一个和最后一个项目在中心。但我想要的是这样的东西:
我怎样才能做到这一点,还有我的代码有什么问题?
谢谢。
最佳答案
尝试更改FlowLayout的类并禁用分页:
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
}()
以及:
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
}
}
关于ios - 使中心单元格处于分页模式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42667100/