$30 off During Our Annual Pro Sale. View Details »

Updates to CollectionView in iOS14

Updates to CollectionView in iOS14

Gubba Manoj kumar

July 21, 2020
Tweet

Other Decks in Education

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