Фон
Итак, я работаю над пользовательским фреймворком и реализовал пользовательский UICollectionViewFlowLayout для моего UICollectionView.Реализация позволяет вам прокручивать стопку карточек, а также перелистывать карточки (ячейки) влево / вправо (комбинация Tinder + Shazam Discover).
Я изменяю UICollectionViewLayoutAttributes, чтобы создать стопку прокручиваемых карточек.эффект.
Проблема
В конце стека, когда я убираю карту (ячейку), новые карты появляются не из-за стека, а сверхувместо этого. Это происходит только в конце стека, и я понятия не имею, почему.
Что я думаю - что я пробовал
Я думаю, что мне нужноизменил некоторые вещи в initialLayoutAttributesForAppearingItem, и я попробовал это, но, похоже, ничего не происходит.
В настоящее время я вызываю функцию updateCellAttributes внутри него, чтобы обновить атрибуты, ноЯ также попытался вручную изменить атрибуты внутри него.Я действительно не вижу здесь проблемы, если только нет другого способа изменить расположение карты для этого случая.
Может быть, это потому, что ячейки технически еще не находятся в "прямоугольнике" (см. layoutAttributesForElements(in rect: CGRect)), они не обновляются?
Чего-то мне не хватает?Кто-нибудь более знаком с тем, как я могу изменить схему потока, чтобы добиться желаемого поведения?
Примеры и код
Вот гиф этого в действии:
Вот гиф ошибки, которую я пытаюсь решить:
Как видно, при смахивании последней карты новая карта появляется сверху, а вместо нее должна появляться сзади предыдущей карты.
Ниже вы можете найти пользовательский код UICollectionViewFlowLayout .Наиболее важной функцией является updateCellAttributes, которая хорошо документирована с помощью встроенных комментариев (см. Код ниже).Эта функция вызывается из:
initialLayoutAttributesForAppearingItem
finalLayoutAttributesForDisappearingItem
layoutAttributesForItem
layoutAttributesForElements
Для изменения информации макета и создания эффекта стека.
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. Default is true.
internal var isPagingEnabled: Bool = true
/// Stores the height of a CardCell.
internal var cellHeight: CGFloat!
/// Allows you to make the previous card visible or not visible (stack effect). Default is `true`.
internal var isPreviousCardVisible: Bool = true
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 = NSArray(array: super.layoutAttributesForElements(in: rect)!, copyItems: true)
for object in items {
if let attributes = object as? UICollectionViewLayoutAttributes {
self.updateCellAttributes(attributes)
}
}
return items as? [UICollectionViewLayoutAttributes]
}
internal override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
if self.collectionView?.numberOfItems(inSection: 0) == 0 { return nil }
if let attr = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes {
self.updateCellAttributes(attr)
return attr
}
return nil
}
internal override func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// attributes for swiping card away
return self.layoutAttributesForItem(at: itemIndexPath)
}
internal override func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// attributes for adding card
return self.layoutAttributesForItem(at: itemIndexPath)
}
// 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 let collectionView = self.collectionView, 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 = 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) - collectionView.contentInset.top
return CGPoint(x: proposedContentOffset.x, y: newVerticalOffset)
}
/**
Updates the attributes.
Here manipulate the zIndex of the cells here, calculate the positions and do the animations.
Below we'll briefly explain how the effect of scrolling a card to the background instead of the top is achieved.
Keep in mind that (x,y) coords in views start from the top left (x: 0,y: 0) and increase as you go down/to the right,
so as you go down, the y-value increases, and as you go right, the x value increases.
The two most important variables we use to achieve this effect are cvMinY and cardMinY.
* cvMinY (A): The top position of the collectionView + inset. On the drawings below it's marked as "A".
This position never changes (the value of the variable does, but the position is always at the top where "A" is marked).
* cardMinY (B): The top position of each card. On the drawings below it's marked as "B". As the user scrolls a card,
this position changes with the card position (as it's the top of the card).
When the card is moving down, this will go up, when the card is moving up, this will go down.
We then take the max(cvMinY, cardMinY) to get the highest value of those two and set that as the origin.y of the card.
By doing this, we ensure that the origin.y of a card never goes below cvMinY, thus preventing cards from scrolling upwards.
+---------+ +---------+
| | | |
| +-A=B-+ | | +-A-+ | ---> The top line here is the previous card
| | | | | +--B--+ | that's visible when the user starts scrolling.
| | | | | | | |
| | | | | | | | | As the card moves down,
| | | | | | | | v cardMinY ("B") goes up.
| +-----+ | | | | |
| | | +-----+ |
| +--B--+ | | +--B--+ |
| | | | | | | |
+-+-----+-+ +-+-----+-+
- parameter attributes: The attributes we're updating.
*/
private func updateCellAttributes(_ attributes: UICollectionViewLayoutAttributes) {
guard let collectionView = collectionView else { return }
var cvMinY = collectionView.bounds.minY + collectionView.contentInset.top
let cardMinY = attributes.frame.minY
var origin = attributes.frame.origin
let cardHeight = attributes.frame.height
if cvMinY > cardMinY + cardHeight + minimumLineSpacing + collectionView.contentInset.top {
cvMinY = 0
}
let finalY = max(cvMinY, cardMinY)
let deltaY = (finalY - cardMinY) / cardHeight
transformAttributes(attributes: attributes, deltaY: deltaY)
// Set the attributes frame position to the values we calculated
origin.x = collectionView.frame.width/2 - attributes.frame.width/2 - collectionView.contentInset.left
origin.y = finalY
attributes.frame = CGRect(origin: origin, size: attributes.frame.size)
attributes.zIndex = attributes.indexPath.row
}
// Creates and applies a CGAffineTransform to the attributes to recreate the effect of the card going to the background.
private func transformAttributes(attributes: UICollectionViewLayoutAttributes, deltaY: CGFloat) {
if let itemTransform = firstItemTransform {
let scale = 1 - deltaY * itemTransform
let translationScale = CGFloat((attributes.zIndex + 1) * 10)
var t = CGAffineTransform.identity
t = t.scaledBy(x: scale, y: 1)
if isPreviousCardVisible {
t = t.translatedBy(x: 0, y: (deltaY * translationScale))
}
attributes.transform = t
}
}
}
Полный проект zip (мгновенная загрузка)
Github-репо
Выпуск Github
Если у вас есть еще вопросы, я с удовольствием на них отвечу.Спасибо за ваше время и усилия, ваша помощь будет высоко оценена!