Updates to CollectionView in iOS14

Transcript

1. Updates to CollectionView Gubba Manoj Kumar Recap of WWDC20
2. About Me • Gubba Manoj Kumar • Github: @manoj036 • Software Engineer at Mercari JP • Team: Personalization • Joined: October, 2018
3. CollectionView APIs UICollectionViewDataSource UICollectionViewLayout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation
4. CollectionView APIs UICollectionViewDataSource UICollectionViewLayout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation
5. CollectionView APIs UICollectionViewDataSource UICollectionViewLayout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation
6. CollectionView APIs UICollectionViewDataSource UICollectionViewLayout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation
7. CollectionView APIs After iOS 13 Diffable Data Source Compositional Layout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation
8. CollectionView APIs iOS 14 Diffable Data Source Compositional Layout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation Section Snapshots List Configuration List Cell View Configuration
9. CollectionView APIs iOS 14 Diffable Data Source Compositional Layout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation Section Snapshots List Configuration List Cell View Configuration
10. Section Snapshots • Single Sections Data • Composable • Hierarchical data Beta Version ScreenShot
11. Section Snapshots struct NSDiffableDataSourceSectionSnapshot<Item: Hashable> { 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 }
12. Section Snapshots struct NSDiffableDataSourceSectionSnapshot<Item: Hashable> { 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 }
13. Section Snapshots Beta Version ScreenShot
14. Section Snapshots struct NSDiffableDataSourceSectionSnapshot<Item: Hashable> { 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 }
15. Reordering Support extension UICollectionViewDiffableDataSource { public struct ReorderingHandlers { public var canReorderItem: ((Item) -> Bool)? public var willReorder: ((NSDiffableDataSourceTransaction<Section, Item>) -> Void)? public var didReorder: ((NSDiffableDataSourceTransaction<Section, Item>) -> Void)? } public var reorderingHandlers: ReorderingHandlers }
16. CollectionView APIs iOS 14 Diffable Data Source Compositional Layout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation Section Snapshots List Configuration List Cell View Configuration
17. 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) }
18. List Styles Plain Sidebar Plain Sidebar Grouped Inset Grouped Beta Version ScreenShots
19. CollectionView APIs iOS 14 Diffable Data Source Compositional Layout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation Section Snapshots List Configuration List Cell View Configuration
20. List Cell • Separators • Indentation • Swipe Actions • Accessories Beta Version ScreenShot
21. Seperators List Cell • To set the padding on separator, • For UITableViewCell, • Separator Inset • For ListCell, • Separator Layout Guide Beta Version ScreenShot
22. Swipe Actions • Configured like Cell Content
23. Accessories List Cell Beta Version ScreenShot
24. CollectionView APIs iOS 14 Diffable Data Source Compositional Layout UICollectionViewCell/ UICollectionViewReusableView Data Layout Presentation Section Snapshots List Configuration List Cell View Configuration
25. Cell Registration • Before: collectionView.register(UICollectionViewCell.self, forCellReuseIdentifier: "CollectionViewCell") let cell = collectionViewCell.dequeueReusableCell(withIdentifier: "CollectionViewCell", for: indexPath) as? UICollectionViewCell • After: let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, title) in . . . } let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: “Hello")
26. 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
27. View Configuration
28. Thank You