![](/img/trans.png)
[英]Pan Gesture in UICollectionViewCell AND UICollectionView
[英]UICollectionView with custom flow layout - cells glitching when scrolling while having an active pan gesture
所以我要建立自己的拖放系統。 為此,我需要一種方法在用戶將鼠標懸停在其中的collectionViews
單元格之間創建“間隙”。
我現在正在嘗試一些東西,並使用可移動單元格的自定義流程布局進行了基本演示。
我所做的演示包括一個簡單的collectionView
(使用IGListKit
但這對這個問題無關緊要,我很確定)和一個UIPanGestureRecognizer
,它允許您在collectionView上平移以在手指下創建一個間隙。
我通過在每次pan gesture reconizer
更改時使布局無效來實現此目的。 它以這種方式工作,但是當我在平移collectionView
同時滾動時,單元格似乎會出現一點故障。 看起來像這樣(看起來單元格的渲染跟不上):
我很確定問題出在包含此調用的makeAGap
函數內:
collectionView?.performBatchUpdates({
self.invalidateLayout()
self.collectionView?.layoutIfNeeded()
}, completion: nil)
如果我不為無效設置動畫,像這樣
self.invalidateLayout()
self.collectionView?.layoutIfNeeded()
根本不會出現故障。 它與動畫有關。 你有什么想法?
謝謝
PS:這是代碼(還有更多IGListKit
東西,但這並不重要):
class MyCustomLayout: UICollectionViewFlowLayout {
fileprivate var cellPadding: CGFloat = 6
fileprivate var cache = [UICollectionViewLayoutAttributes]()
fileprivate var contentHeight: CGFloat = 300
fileprivate var contentWidth: CGFloat = 0
var gap: IndexPath? = nil
var gapPosition: CGPoint? = nil
override var collectionViewContentSize: CGSize {
return CGSize(width: contentWidth, height: contentHeight)
}
override func prepare() {
// cache contains the cached layout attributes
guard cache.isEmpty, let collectionView = collectionView else {
return
}
// I'm using IGListKit, so every cell is in its own section in my case
for section in 0..<collectionView.numberOfSections {
let indexPath = IndexPath(item: 0, section: section)
// If a gap has been set, just make the current offset (contentWidth) bigger to
// simulate a "missing" item, which creates a gap
if let gapPosition = self.gapPosition {
if gapPosition.x >= (contentWidth - 100) && gapPosition.x < (contentWidth + 100) {
contentWidth += 100
}
}
// contentWidth is used as x origin
let frame = CGRect(x: contentWidth, y: 10, width: 100, height: contentHeight)
contentWidth += frame.width + cellPadding
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
attributes.frame = frame
cache.append(attributes)
}
}
public func makeAGap(at indexPath: IndexPath, position: CGPoint) {
gap = indexPath
self.cache = []
self.contentWidth = 0
self.gapPosition = position
collectionView?.performBatchUpdates({
self.invalidateLayout()
self.collectionView?.layoutIfNeeded()
}, completion: nil)
//invalidateLayout() // Using this, the glitch does NOT appear
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
// Loop through the cache and look for items in the rect
for attributes in cache {
if attributes.frame.intersects(rect) {
visibleLayoutAttributes.append(attributes)
}
}
return visibleLayoutAttributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return cache[indexPath.item]
}
}
class ViewController: UIViewController {
/// IGListKit stuff: Data for self.collectionView ("its cells", which represent the rows)
public var data: [String] {
return (0...100).compactMap { "\($0)" }
}
/// This collectionView will consist of cells, that each have their own collectionView.
private lazy var collectionView: UICollectionView = {
let layout = MyCustomLayout()
layout.scrollDirection = .horizontal
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.backgroundColor = UIColor(hex: 0xeeeeee)
adapter.collectionView = collectionView
adapter.dataSource = self
view.addSubview(collectionView)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.frame = CGRect(x: 0, y: 50, width: 1000, height: 300)
return collectionView
}()
/// IGListKit stuff. Data manager for the collectionView
private lazy var adapter: ListAdapter = {
let adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self, workingRangeSize: 0)
return adapter
}()
override func viewDidLoad() {
super.viewDidLoad()
_ = collectionView
let pan = UIPanGestureRecognizer(target: self, action: #selector(handlePan(pan:)))
pan.maximumNumberOfTouches = 1
pan.delegate = self
view.addGestureRecognizer(pan)
}
@objc private func handlePan(pan: UIPanGestureRecognizer) {
guard let indexPath = collectionView.indexPathForItem(at: pan.location(in: collectionView)) else {
return
}
(collectionView.collectionViewLayout as? MyCustomLayout)?.makeAGap(at: indexPath, position: pan.location(in: collectionView))
}
}
extension ViewController: ListAdapterDataSource, UIGestureRecognizerDelegate {
func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
return data as [ListDiffable]
}
func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
return RowListSection()
}
func emptyView(for listAdapter: ListAdapter) -> UIView? {
return nil
}
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
}
好的,這一直在發生。 我花了幾個小時試圖解決問題,放棄了在這里問一個問題,幾分鍾后,我找到了一個解決方案。
因此,我無法完全解釋為什么會發生這種故障,但似乎與屏幕繪制有關。 我添加了一個CADisplayLink
來使布局無效與屏幕的刷新率同步,現在故障已消失(下面的代碼段供感興趣的用戶使用)。
但是,我很想知道那里到底發生了什么,以及為什么同步失效可以解決圖形故障。 我也會去研究它,但是我沒有那么豐富的經驗,所以如果有人知道這樣的事情, 我將非常感謝對此問題提出一個新的(更詳細的)答案:)
override func viewDidLoad() {
super.viewDidLoad()
_ = collectionView
let pan = UIPanGestureRecognizer(target: self, action: #selector(handlePan(pan:)))
pan.maximumNumberOfTouches = 1
pan.delegate = self
view.addGestureRecognizer(pan)
let displayLink = CADisplayLink(target: self, selector: #selector(update))
displayLink.add(to: .current, forMode: .common)
}
var indexPath: IndexPath? = nil
var position: CGPoint? = nil
@objc private func update() {
if let indexPath = self.indexPath, let position = self.position {
(collectionView.collectionViewLayout as? MyCustomLayout)?.makeAGap(at: indexPath, position: position)
}
}
@objc private func handlePan(pan: UIPanGestureRecognizer) {
guard let indexPath = collectionView.indexPathForItem(at: pan.location(in: collectionView)) else {
return
}
// buffer the values
self.indexPath = indexPath
position = pan.location(in: collectionView)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.