我遇到了一个奇怪的问题,我似乎无法弄清楚或在网上找到任何有关的信息。
因此,我尝试使用 UICollectionView
和自定义 UICollectionViewFlowlayout
复制 Shazam 发现 UI。
到目前为止,一切都运行得很好,但是当添加“卡片堆叠”效果时,我(或者更确切地说是实现它的人)注意到似乎存在一个奇怪的问题,在某些情况下(或者更确切地说,当特定索引可见时,在示例中为第 5 行、第 9 行),将有 4 个可见单元格,而不是 3 个。 我的猜测是,这与单元格重用有关,但我不确定为什么它正在做这个。我研究了各个单元的尺寸,它们似乎都是相同的,所以这并不是单元的大小不同。
有人知道为什么会发生这种情况吗?非常感谢任何帮助或建议。
我将在下面添加自定义流程布局和屏幕截图的代码片段。 您可以download the full project here ,或者查看 the PR on Github .
这是一个视觉比较:
自定义flowlayout的源代码:
import UIKit
/// Custom `UICollectionViewFlowLayout` that provides the flowlayout information like paging and `CardCell` movements.
internal class VerticalCardSwiperFlowLayout: UICollectionViewFlowLayout {
/// This property sets the amount of scaling for the first item.
internal var firstItemTransform: CGFloat?
/// This property enables paging per card. The default value is true.
internal var isPagingEnabled: Bool = true
/// Stores the height of a CardCell.
internal var cellHeight: CGFloat!
internal override func prepare() {
super.prepare()
assert(collectionView!.numberOfSections == 1, "Number of sections should always be 1.")
assert(collectionView!.isPagingEnabled == false, "Paging on the collectionview itself should never be enabled. To enable cell paging, use the isPagingEnabled property of the VerticalCardSwiperFlowLayout instead.")
}
internal override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let items = NSMutableArray (array: super.layoutAttributesForElements(in: rect)!, copyItems: true)
items.enumerateObjects(using: { (object, index, stop) -> Void in
let attributes = object as! UICollectionViewLayoutAttributes
self.updateCellAttributes(attributes)
})
return items as? [UICollectionViewLayoutAttributes]
}
// We invalidate the layout when a "bounds change" happens, for example when we scale the top cell. This forces a layout update on the flowlayout.
internal override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
// Cell paging
internal override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
// 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
}
// Page height used for estimating and calculating paging.
let pageHeight = cellHeight + self.minimumLineSpacing
// Make an estimation of the current page position.
let approximatePage = self.collectionView!.contentOffset.y/pageHeight
// Determine the current page based on velocity.
let currentPage = (velocity.y < 0.0) ? floor(approximatePage) : ceil(approximatePage)
// Create custom flickVelocity.
let flickVelocity = velocity.y * 0.4
// Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)
// Calculate newVerticalOffset.
let newVerticalOffset = ((currentPage + flickedPages) * pageHeight) - self.collectionView!.contentInset.top
return CGPoint(x: proposedContentOffset.x, y: newVerticalOffset)
}
internal override func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// make sure the zIndex of the next card is higher than the one we're swiping away.
let nextIndexPath = IndexPath(row: itemIndexPath.row + 1, section: itemIndexPath.section)
let nextAttr = self.layoutAttributesForItem(at: nextIndexPath)
nextAttr?.zIndex = nextIndexPath.row
// attributes for swiping card away
let attr = self.layoutAttributesForItem(at: itemIndexPath)
return attr
}
/**
Updates the attributes.
Here manipulate the zIndex of the cards here, calculate the positions and do the animations.
- parameter attributes: The attributes we're updating.
*/
fileprivate func updateCellAttributes(_ attributes: UICollectionViewLayoutAttributes) {
let minY = collectionView!.bounds.minY + collectionView!.contentInset.top
let maxY = attributes.frame.origin.y
let finalY = max(minY, maxY)
var origin = attributes.frame.origin
let deltaY = (finalY - origin.y) / attributes.frame.height
let translationScale = CGFloat((attributes.zIndex + 1) * 10)
// create stacked effect (cards visible at bottom
if let itemTransform = firstItemTransform {
let scale = 1 - deltaY * itemTransform
var t = CGAffineTransform.identity
t = t.scaledBy(x: scale, y: 1)
t = t.translatedBy(x: 0, y: (translationScale + deltaY * translationScale))
attributes.transform = t
}
origin.x = (self.collectionView?.frame.width)! / 2 - attributes.frame.width / 2 - (self.collectionView?.contentInset.left)!
origin.y = finalY
attributes.frame = CGRect(origin: origin, size: attributes.frame.size)
attributes.zIndex = attributes.indexPath.row
}
}
编辑 1:作为额外说明,最终结果应如下所示:
编辑2: 根据我的测试,似乎每滚动 4-5 张卡片就会发生一次。
最佳答案
您有一个继承自流布局的布局。您覆盖了 layoutAttributesForElements(in rect:)
,您从 super.layoutAttributesForElements
获取所有元素,然后为每个元素修改方法 updateCellAttributes
中的属性>.
这通常是创建流布局子类的好方法。 UICollectionViewFlowLayout
正在做大部分艰苦的工作 - 弄清楚每个元素应该在哪里,哪些元素在矩形中,它们的基本属性是什么,它们应该如何填充等等,你可以在“艰苦”的工作完成后修改一些属性。当您添加旋转或不透明度或其他不会更改项目位置的功能时,此功能效果很好。
当您使用 updateCellAttributes
更改项目框架时,您会遇到麻烦。然后,您可能会遇到这样的情况:您的单元格在常规流程布局中根本不会出现在框架中,但现在由于您的修改而应该出现。因此 super.layoutAttributesForElements(in rect: CGRect) 根本不会返回该属性,因此它们根本不会显示。您还可能遇到相反的问题,即根本不应该出现在框架中的单元格出现在 View 中,但以用户看不到的方式进行了转换。
您还没有充分解释您想要实现的效果以及为什么您认为从 UIFlowLayout 继承是正确的,我无法专门帮助您。但我希望我已经给您提供了足够的信息,以便您能够自己找到问题。
关于ios - UICollectionview自定义布局: some indexes have more visible cells than others?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52739405/