Slide 1
Slide 1 text
Updates to CollectionView
Gubba Manoj Kumar
Recap of WWDC20
Slide 2
Slide 2 text
About Me
• Gubba Manoj Kumar
• Github: @manoj036
• Software Engineer at Mercari JP
• Team: Personalization
• Joined: October, 2018
Slide 3
Slide 3 text
CollectionView APIs
UICollectionViewDataSource UICollectionViewLayout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Slide 4
Slide 4 text
CollectionView APIs
UICollectionViewDataSource UICollectionViewLayout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Slide 5
Slide 5 text
CollectionView APIs
UICollectionViewDataSource UICollectionViewLayout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Slide 6
Slide 6 text
CollectionView APIs
UICollectionViewDataSource UICollectionViewLayout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Slide 7
Slide 7 text
CollectionView APIs
After iOS 13
Diffable Data Source Compositional Layout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Slide 8
Slide 8 text
CollectionView APIs
iOS 14
Diffable Data Source Compositional Layout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Section Snapshots List Configuration List Cell View Configuration
Slide 9
Slide 9 text
CollectionView APIs
iOS 14
Diffable Data Source Compositional Layout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Section Snapshots List Configuration List Cell View Configuration
Slide 10
Slide 10 text
Section Snapshots
• Single Sections Data
• Composable
• Hierarchical data
Beta Version ScreenShot
Slide 11
Slide 11 text
Section Snapshots
struct NSDiffableDataSourceSectionSnapshot {
func append(_ items: [ItemIdentifierType], to parent: ItemIdentifierType? = nil)
func insert(_ items: [ItemIdentifierType], before item: ItemIdentifierType)
func insert(_ items: [ItemIdentifierType], after item: ItemIdentifierType)
func delete(_ items: [ItemIdentifierType])
func expand(_ items: [ItemIdentifierType])
func collapse(_ items: [ItemIdentifierType])
var items: [ItemIdentifierType] { get }
var rootItems: [ItemIdentifierType] { get }
func level(of item: ItemIdentifierType) -> Int
}
Slide 12
Slide 12 text
Section Snapshots
struct NSDiffableDataSourceSectionSnapshot {
func append(_ items: [ItemIdentifierType], to parent: ItemIdentifierType? = nil)
func insert(_ items: [ItemIdentifierType], before item: ItemIdentifierType)
func insert(_ items: [ItemIdentifierType], after item: ItemIdentifierType)
func delete(_ items: [ItemIdentifierType])
func expand(_ items: [ItemIdentifierType])
func collapse(_ items: [ItemIdentifierType])
var items: [ItemIdentifierType] { get }
var rootItems: [ItemIdentifierType] { get }
func level(of item: ItemIdentifierType) -> Int
}
Slide 13
Slide 13 text
Section Snapshots
Beta Version ScreenShot
Slide 14
Slide 14 text
Section Snapshots
struct NSDiffableDataSourceSectionSnapshot {
func append(_ items: [ItemIdentifierType], to parent: ItemIdentifierType? = nil)
func insert(_ items: [ItemIdentifierType], before item: ItemIdentifierType)
func insert(_ items: [ItemIdentifierType], after item: ItemIdentifierType)
func delete(_ items: [ItemIdentifierType])
func expand(_ items: [ItemIdentifierType])
func collapse(_ items: [ItemIdentifierType])
var items: [ItemIdentifierType] { get }
var rootItems: [ItemIdentifierType] { get }
func level(of item: ItemIdentifierType) -> Int
}
Slide 15
Slide 15 text
Reordering Support
extension UICollectionViewDiffableDataSource {
public struct ReorderingHandlers {
public var canReorderItem: ((Item) -> Bool)?
public var willReorder: ((NSDiffableDataSourceTransaction) -> Void)?
public var didReorder: ((NSDiffableDataSourceTransaction) -> Void)?
}
public var reorderingHandlers: ReorderingHandlers
}
Slide 16
Slide 16 text
CollectionView APIs
iOS 14
Diffable Data Source Compositional Layout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Section Snapshots List Configuration List Cell View Configuration
Slide 17
Slide 17 text
List Configuration
• List Layout
let configuration = UICollectionLayoutListConfiguration(appearance: .plain)
layout = UICollectionViewCompositionalLayout.list(using: configuration)
• List Section
Layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) in
. . .
let configuration = UICollectionLayoutListConfiguration(appearance: .plain)
return NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: layoutEnvironment)
}
Slide 18
Slide 18 text
List Styles
Plain Sidebar Plain Sidebar Grouped Inset Grouped
Beta Version ScreenShots
Slide 19
Slide 19 text
CollectionView APIs
iOS 14
Diffable Data Source Compositional Layout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Section Snapshots List Configuration List Cell View Configuration
Slide 20
Slide 20 text
List Cell
• Separators
• Indentation
• Swipe Actions
• Accessories
Beta Version ScreenShot
Slide 21
Slide 21 text
Seperators
List Cell
• To set the padding on separator,
• For UITableViewCell,
• Separator Inset
• For ListCell,
• Separator Layout Guide
Beta Version ScreenShot
Slide 22
Slide 22 text
Swipe Actions
• Configured like Cell Content
Slide 23
Slide 23 text
Accessories
List Cell
Beta Version ScreenShot
Slide 24
Slide 24 text
CollectionView APIs
iOS 14
Diffable Data Source Compositional Layout
UICollectionViewCell/
UICollectionViewReusableView
Data Layout Presentation
Section Snapshots List Configuration List Cell View Configuration
Slide 25
Slide 25 text
Cell Registration
• Before:
collectionView.register(UICollectionViewCell.self, forCellReuseIdentifier:
"CollectionViewCell")
let cell = collectionViewCell.dequeueReusableCell(withIdentifier: "CollectionViewCell", for:
indexPath) as? UICollectionViewCell
• After:
let cellRegistration = UICollectionView.CellRegistration {
(cell, indexPath, title) in
. . .
}
let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for:
indexPath, item: “Hello")
Slide 26
Slide 26 text
View configuration
• Before,
cell.textLabel?.text = "Title"
cell.textLabel?.alignment = .center
• After,
var content = UIListContentConfiguration.cell()
content.text = "Title"
content.textProperties.alignment = .center
cell.contentConfiguration = content
Slide 27
Slide 27 text
View Configuration
Slide 28
Slide 28 text
Thank You