UICollectionView CocoaHeads Moscow 30 января

1. UICollectionView
Зимин Александр
iOS разработчик
UX дизайнер

2. Что будет сегодня
2

3. Что будет сегодня
2
• Что такое collection view

4. Что будет сегодня
2
• Что такое collection view
• Базовое устройство

5. Что будет сегодня
2
• Что такое collection view
• Базовое устройство
• Ячейки

6. Что будет сегодня
2
• Что такое collection view
• Базовое устройство
• Ячейки
• Протоколы collection view

7. Что будет сегодня
2
• Что такое collection view
• Базовое устройство
• Ячейки
• Протоколы collection view
• Layout у collection view

8. Чего не будет
3

9. Чего не будет
3
• Редактирование контента

10. Чего не будет
3
• Редактирование контента
• Смена layout у collection view

11. Чего не будет
3
• Редактирование контента
• Смена layout у collection view
• Custom layout attributes

12. Чего не будет
3
• Редактирование контента
• Смена layout у collection view
• Custom layout attributes
• UIDynamics

13. UICollectionView
4
4

14. 5
5
UICollectionView

15. Основные понятия
6

16. Основные понятия
6
• UICollectionView

17. Основные понятия
6
• UICollectionView
• UICollectionReusableView

18. Основные понятия
6
• UICollectionView
• UICollectionReusableView
• UICollectionViewCell

19. Основные понятия
6
• UICollectionView
• UICollectionReusableView
• UICollectionViewCell
• Supplementary Views

20. Основные понятия
6
• UICollectionView
• UICollectionReusableView
• UICollectionViewCell
• Supplementary Views
• Decoration View

21. Основные понятия
6
• UICollectionView
• UICollectionReusableView
• UICollectionViewCell
• Supplementary Views
• Decoration View
• UICollectionViewLayout

22. Основные понятия
6
• UICollectionView
• UICollectionReusableView
• UICollectionViewCell
• Supplementary Views
• Decoration View
• UICollectionViewLayout
• UICollectionViewLayoutAttributes

23. Основные понятия
6
• UICollectionView
• UICollectionReusableView
• UICollectionViewCell
• Supplementary Views
• Decoration View
• UICollectionViewLayout
• UICollectionViewLayoutAttributes
• UICollectionViewFlowLayout

24. Supplementary и Decoration view
7

25. Supplementary и Decoration view
7
• Supplementary Views:

26. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации

27. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view

28. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view
• Имеют тип:

29. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view
• Имеют тип:
• UICollectionElementKindSectionHeader

30. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view
• Имеют тип:
• UICollectionElementKindSectionHeader
• UICollectionElementKindSectionFooter

31. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view
• Имеют тип:
• UICollectionElementKindSectionHeader
• UICollectionElementKindSectionFooter
• Decoration View:

32. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view
• Имеют тип:
• UICollectionElementKindSectionHeader
• UICollectionElementKindSectionFooter
• Decoration View:
• Используется для декораций

33. Supplementary и Decoration view
7
• Supplementary Views:
• Для презентации дополнительной информации
• Некая аналогия header/footed view на table view
• Имеют тип:
• UICollectionElementKindSectionHeader
• UICollectionElementKindSectionFooter
• Decoration View:
• Используется для декораций
• Задается внутри layout у collection view

34. Источник данных
UICollectionViewDataSource
8

35. Источник данных
UICollectionViewDataSource
8
• Количество секций (О)

36. Источник данных
UICollectionViewDataSource
8
• Количество секций (О)
• Количество элементов в секции

37. Источник данных
UICollectionViewDataSource
8
• Количество секций (О)
• Количество элементов в секции
• Ячейка для текущего элемента

38. Источник данных
UICollectionViewDataSource
8
• Количество секций (О)
• Количество элементов в секции
• Ячейка для текущего элемента
• Дополнительный (supplementary) вид для
текущего элемента (О)

39. UICollectionReusableView
9

40. UICollectionReusableView
9
• Метод переиспользования

41. UICollectionReusableView
9
• Метод переиспользования
• Идентификатор переиспользования

42. UICollectionReusableView
9
• Метод переиспользования
• Идентификатор переиспользования
• Методы для layout

43. UICollectionViewCell
10
Nil
Nil

44. UICollectionViewCell
11

45. UICollectionViewCell
11
• var selected: Bool

46. UICollectionViewCell
11
• var selected: Bool
• var highlighted: Bool

47. UICollectionViewDelegate
12

48. UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки

49. UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки
• Методы отображения ячеек и дополнительных
видов

50. UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки
• Методы отображения ячеек и дополнительных
видов
• Методы вспомогательного меню

51. UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки
• Методы отображения ячеек и дополнительных
видов
• Методы вспомогательного меню
• Метод для смены layout у коллекции

52. Layout
13

53. Layout
13
• UICollectionViewDelegateFlowLayout

54. Layout
13
• UICollectionViewDelegateFlowLayout
• UICollectionViewLayout

55. Layout
13
• UICollectionViewDelegateFlowLayout
• UICollectionViewLayout
• UICollectionViewFlowLayout

56. Layout
14

57. UICollectionViewDelegateFlowLayout
15

58. UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания

59. UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания
• Размер ячейки

60. UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания
• Размер ячейки
• Отступы для секции

61. UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания
• Размер ячейки
• Отступы для секции
• Минимальные отступы между ячейками

62. UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания
• Размер ячейки
• Отступы для секции
• Минимальные отступы между ячейками
• Размер дополнительного вида

63. Размер ячейки
16

64. Отступы для секции
17

65. Минимальные отступы между ячейками
18

66. Custom layouts
19

67. Custom layouts
19
• Процесс создания полностью своей логики
расположения элементов

68. Custom layouts
19
• Процесс создания полностью своей логики
расположения элементов
• Свой размер collection view

69. Custom layouts
19
• Процесс создания полностью своей логики
расположения элементов
• Свой размер collection view
• Может быть прокрутка в оба направления

70. Custom layouts
19
• Процесс создания полностью своей логики
расположения элементов
• Свой размер collection view
• Может быть прокрутка в оба направления
• Внешнее представление каждого элемента
задается через UICollectionViewLayoutAttributes

71. Как это работает?
20

72. Как это работает?
20
• Вызывается invalidateLayout()

73. Как это работает?
20
• Вызывается invalidateLayout()
• Срабатывает когда вы вызываете его руками или
это делает collection view

74. Как это работает?
20
• Вызывается invalidateLayout()
• Срабатывает когда вы вызываете его руками или
это делает collection view
• При срабатывании
shouldInvalidateLayoutForBoundsChange()

75. Как это работает?
20
• Вызывается invalidateLayout()
• Срабатывает когда вы вызываете его руками или
это делает collection view
• При срабатывании
shouldInvalidateLayoutForBoundsChange()
• Вызывается prepareLayout()

76. Как это работает?
20
• Вызывается invalidateLayout()
• Срабатывает когда вы вызываете его руками или
это делает collection view
• При срабатывании
shouldInvalidateLayoutForBoundsChange()
• Вызывается prepareLayout()
• Запрашивается размер поля
collectionViewContentSize

77. Как это работает?
20
• Вызывается invalidateLayout()
• Срабатывает когда вы вызываете его руками или
это делает collection view
• При срабатывании
shouldInvalidateLayoutForBoundsChange()
• Вызывается prepareLayout()
• Запрашивается размер поля
collectionViewContentSize
• Вызывается layoutAttributesForElementsInRect()

78. Схема
21

79. layoutAttributesForElementsInRect()
22

80. layoutAttributesForElementsInRect()
22
• layoutAttributesForCellWithIndexPath:

81. layoutAttributesForElementsInRect()
22
• layoutAttributesForCellWithIndexPath:
• layoutAttributesForSupplementaryViewOfKind:withI
ndexPath:

82. layoutAttributesForElementsInRect()
22
• layoutAttributesForCellWithIndexPath:
• layoutAttributesForSupplementaryViewOfKind:withI
ndexPath:
• layoutAttributesForDecorationViewOfKind:withInde
xPath:

83. UICollectionViewLayoutAttributes
23

84. UICollectionViewLayoutAttributes
23
• frame

85. UICollectionViewLayoutAttributes
23
• frame
• bounds

86. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center

87. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center
• size

88. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center
• size
• transform3D

89. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center
• size
• transform3D
• transform

90. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center
• size
• transform3D
• transform
• alpha

91. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center
• size
• transform3D
• transform
• alpha
• zIndex

92. UICollectionViewLayoutAttributes
23
• frame
• bounds
• center
• size
• transform3D
• transform
• alpha
• zIndex
• hidden

93. Пару слов о редактировании
24

94. Пару слов о редактировании
24
• initialLayoutAttributesForAppearingItemAtIndexPath

95. Пару слов о редактировании
24
• initialLayoutAttributesForAppearingItemAtIndexPath
• finalLayoutAttributesForDisappearingItemAtIndexPath

96. Пару слов о редактировании
24
• initialLayoutAttributesForAppearingItemAtIndexPath
• finalLayoutAttributesForDisappearingItemAtIndexPath
• Такие же методы для Supplementary и Decoration
view

98. Спасибо за внимание
Зимин Александр
azimin@me.com
@ziminalex