A new API has been added to UICollectionView in WWDC2020, and I am very grateful that various people have written the outline and detailed functions! However, I don't understand my lack of understanding or how to write it concretely. ・ I don't understand the whole picture of the code ... I had a lot of trouble, so maybe there are other people who have the same difficulty! I thought it was an article.
ViewController.swift
class ViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
enum Section: CaseIterable {
case kanto
case kyusyu
}
let data: [Section: [String]] = [
.kanto: ["Kanto", "Tokyo", "Chiba"],
.kyusyu: ["Kyusyu", "Fukuoka", "Miyazaki"]
]
var collectionViewDataSource: UICollectionViewDiffableDataSource<Section, String>!
override func viewDidLoad() {
super.viewDidLoad()
var layoutConfig = UICollectionLayoutListConfiguration(appearance: .grouped)
layoutConfig.headerMode = UICollectionLayoutListConfiguration.HeaderMode.firstItemInSection
let layout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
collectionView.collectionViewLayout = layout
collectionViewDataSource = createDataSource()
reloadList()
}
func createDataSource() -> UICollectionViewDiffableDataSource<Section, String> {
let normalCell = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, text) in
var content = cell.defaultContentConfiguration()
content.text = text
cell.contentConfiguration = content
}
return UICollectionViewDiffableDataSource<Section, String>(collectionView: collectionView) {
(collectionView, indexPath, text) -> UICollectionViewCell? in
return collectionView.dequeueConfiguredReusableCell(using: normalCell, for: indexPath, item: text)
}
}
func reloadList(){
var snapshot = NSDiffableDataSourceSnapshot<Section, String>()
snapshot.appendSections(Section.allCases)
snapshot.appendItems(data[.kanto]!, toSection: .kanto)
snapshot.appendItems(data[.kyusyu]!, toSection: .kyusyu)
collectionViewDataSource.apply(snapshot)
}
}
enum Section: CaseIterable {
case kanto
case kyusyu
}
let data: [Section: [String]] = [
.kanto: ["Kanto", "Tokyo", "Chiba"],
.kyusyu: ["Kyusyu", "Fukuoka", "Miyazaki"]
]
Here, the data to be displayed is defined.
data
The very first" Kanto "and" Kyusyu "are section titles.
(As you can see in the implementation image, the sections are automatically capitalized.)
var layoutConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
layoutConfig.headerMode = UICollectionLayoutListConfiguration.HeaderMode.firstItemInSection
let layout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
collectionView.collectionViewLayout = layout
Here, the layout of the collectionView is set.
This time I am using the layout that can be used by default, but I plan to change this area when customizing the cell size etc.
HeaderMode.firstItemInSection
← This is the setting that treats the beginning of the data as the section title.
func createDataSource() -> UICollectionViewDiffableDataSource<Section, String> {
let normalCell = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, text) in
var content = cell.defaultContentConfiguration()
content.text = text
cell.contentConfiguration = content
}
return UICollectionViewDiffableDataSource<Section, String>(collectionView: collectionView) {
(collectionView, indexPath, text) -> UICollectionViewCell? in
return collectionView.dequeueConfiguredReusableCell(using: normalCell, for: indexPath, item: text)
}
}
Here, we set how to display the passed data.
Of the traditional ʻUICollectionViewDataSource
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell`
It has the same role as.
normalCell
is a variable for registering cells in collectionView. The outlook is better because you can register and set the cell at the same time.
func reloadList(){
var snapshot = NSDiffableDataSourceSnapshot<Section, String>()
snapshot.appendSections(Section.allCases)
snapshot.appendItems(data[.kanto]!, toSection: .kanto)
snapshot.appendItems(data[.kyusyu]!, toSection: .kyusyu)
collectionViewDataSource.apply(snapshot)
}
The data defined first is displayed on the screen by ʻapply` to the collectionView.
I have a desire to write the section title in a better way, but I was able to write it more clearly than before. This article uses only basic UICollectionView features, so I'll write more advanced articles in other articles.
Please LGTM if you like because it will be encouraging \ (^ o ^) /
Recommended Posts