Updates to CollectionView in iOS14

Updates to CollectionView in iOS14

981993425604cfde7590e4fdb3ce80e9?s=128

Gubba Manoj kumar

July 21, 2020
Tweet

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