Я пытаюсь использовать последнюю версию UICollectionViewCompositionalLayout для отображения разбитых на страницы данных с использованием UICollectionViewDiffableDataSource. Я хотел показать липкий заголовок над разделом, который всегда оставался бы сверху, даже при загрузке данных следующей страницы из сети. Я заметил, что липкий заголовок работает не так, как ожидалось, и вместо этого чувствует себя рывком при загрузке данных в фоновом режиме. и применение нового снимка .. Мне удалось воспроизвести эту проблему с помощью примера приложения, предоставленного Apple здесь
Вот код для воспроизведения проблемы:
func layout() -> UICollectionViewLayout {
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
heightDimension: .absolute(44))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.interGroupSpacing = 5
section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)
let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
heightDimension: .estimated(44)),
elementKind: sectionHeaderElementKind,
alignment: .top)
sectionHeader.pinToVisibleBounds = true
sectionHeader.zIndex = 2
section.boundarySupplementaryItems = [sectionHeader]
let layout = UICollectionViewCompositionalLayout(section: section)
return layout
}
Приведенный выше фрагмент предоставляет UICollectionViewCompositionalLayout заголовок раздела, прикрепленный к видимым границам вверху.
func setUpCollectionView() {
let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout())
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
collectionView.backgroundColor = .systemBackground
collectionView.register(ListCell.self, forCellWithReuseIdentifier: ListCell.reuseIdentifier)
collectionView.register(TitleSupplementaryView.self,
forSupplementaryViewOfKind: sectionHeaderElementKind,
withReuseIdentifier: TitleSupplementaryView.reuseIdentifier)
self.view.addSubview(collectionView)
collectionView.refreshControl = refreshControl
self.collectionView = collectionView
}
В приведенном выше коде я добавляю представление коллекции для представления контроллеров.
func configureDataSource() {
guard let collectionView = self.collectionView else {
return
}
dataSource = UICollectionViewDiffableDataSource<String, Int>(collectionView: collectionView) {
(collectionView: UICollectionView, indexPath: IndexPath, identifier: Int) -> UICollectionViewCell? in
// Get a cell of the desired kind.
guard let cell = collectionView.dequeueReusableCell(
withReuseIdentifier: ListCell.reuseIdentifier,
for: indexPath) as? ListCell else { fatalError("Cannot create new cell") }
// Populate the cell with our item description.
cell.label.text = "\(indexPath.section),\(indexPath.item)"
if self.canLoadNextPage(indexpath: indexPath) {
self.getNextPage()
}
// Return the cell.
return cell
}
dataSource?.supplementaryViewProvider = {
(collectionView: UICollectionView, kind: String, indexPath: IndexPath) -> UICollectionReusableView? in
// Get a supplementary view of the desired kind.
guard let headerFooter = collectionView.dequeueReusableSupplementaryView(
ofKind: kind,
withReuseIdentifier: TitleSupplementaryView.reuseIdentifier,
for: indexPath) as? TitleSupplementaryView else { fatalError("Cannot create new header") }
headerFooter.label.text = sectionHeader
headerFooter.backgroundColor = .lightGray
headerFooter.layer.borderColor = UIColor.black.cgColor
headerFooter.layer.borderWidth = 1.0
// Return the view.
return headerFooter
}
var snapshot = NSDiffableDataSourceSnapshot<String, Int>()
snapshot.appendSections([section])
items = Array(currentOffset..<currentOffset + 2*itemsPerPage)
currentOffset += 2*itemsPerPage
snapshot.appendItems(items)
serialQueue.async { [weak self] in
self?.dataSource?.apply(snapshot, animatingDifferences: true)
}
}
В приведенном выше коде я создаю расширяемый источник данных, который создает ячейки и представление заголовка. Он также инициализирует представление сбора со снимком исходных данных. Снимки всегда применяются в фоновая последовательная очередь.
Когда смещение содержимого ближе к концу, я получаю следующую страницу данных и применяю новый снимок, как вы можете видеть здесь ..
func canLoadNextPage(indexpath: IndexPath) -> Bool {
guard (indexpath.item + 5) > currentOffset else {
return false
}
return true
}
func getNextPage() {
fetchQueue.asyncAfter(deadline: .now() + 0.5) {
var snapshot = NSDiffableDataSourceSnapshot<String, Int>()
snapshot.appendSections([section])
self.items.append(contentsOf: Array(self.currentOffset..<self.currentOffset + itemsPerPage))
snapshot.appendItems(self.items)
self.currentOffset += itemsPerPage
self.serialQueue.async { [weak self] in
self?.dataSource?.apply(snapshot, animatingDifferences: true)
}
}
}
Аналогичное поведение наблюдается и в Pull To Refre sh действий ..
Еще одна вещь, которую я заметил, это не происходит, когда вы немедленно добавляйте данные без задержки и переключайтесь между потоками.
Цените любую помощь ..