Post on 18-Jul-2015
UICollectionView
Зимин Александр iOS разработчик
UX дизайнер
Что будет сегодня
2
Что будет сегодня
2
• Что такое collection view
Что будет сегодня
2
• Что такое collection view• Базовое устройство
Что будет сегодня
2
• Что такое collection view• Базовое устройство• Ячейки
Что будет сегодня
2
• Что такое collection view• Базовое устройство• Ячейки• Протоколы collection view
Что будет сегодня
2
• Что такое collection view• Базовое устройство• Ячейки• Протоколы collection view• Layout у collection view
Чего не будет
3
Чего не будет
3
• Редактирование контента
Чего не будет
3
• Редактирование контента• Смена layout у collection view
Чего не будет
3
• Редактирование контента• Смена layout у collection view• Custom layout attributes
Чего не будет
3
• Редактирование контента• Смена layout у collection view• Custom layout attributes• UIDynamics
UICollectionView
44
55
UICollectionView
Основные понятия
6
Основные понятия
6
• UICollectionView
Основные понятия
6
• UICollectionView• UICollectionReusableView
Основные понятия
6
• UICollectionView• UICollectionReusableView • UICollectionViewCell
Основные понятия
6
• UICollectionView• UICollectionReusableView • UICollectionViewCell• Supplementary Views
Основные понятия
6
• UICollectionView• UICollectionReusableView • UICollectionViewCell• Supplementary Views• Decoration View
Основные понятия
6
• UICollectionView• UICollectionReusableView • UICollectionViewCell• Supplementary Views• Decoration View • UICollectionViewLayout
Основные понятия
6
• UICollectionView• UICollectionReusableView • UICollectionViewCell• Supplementary Views• Decoration View • UICollectionViewLayout• UICollectionViewLayoutAttributes
Основные понятия
6
• UICollectionView• UICollectionReusableView • UICollectionViewCell• Supplementary Views• Decoration View • UICollectionViewLayout• UICollectionViewLayoutAttributes• UICollectionViewFlowLayout
Supplementary и Decoration view
7
Supplementary и Decoration view
7
• Supplementary Views:
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view• Имеют тип:
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view• Имеют тип:
• UICollectionElementKindSectionHeader
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view• Имеют тип:
• UICollectionElementKindSectionHeader• UICollectionElementKindSectionFooter
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view• Имеют тип:
• UICollectionElementKindSectionHeader• UICollectionElementKindSectionFooter
• Decoration View:
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view• Имеют тип:
• UICollectionElementKindSectionHeader• UICollectionElementKindSectionFooter
• Decoration View: • Используется для декораций
Supplementary и Decoration view
7
• Supplementary Views:• Для презентации дополнительной информации• Некая аналогия header/footed view на table view• Имеют тип:
• UICollectionElementKindSectionHeader• UICollectionElementKindSectionFooter
• Decoration View: • Используется для декораций• Задается внутри layout у collection view
Источник данных UICollectionViewDataSource
8
Источник данных UICollectionViewDataSource
8
• Количество секций (О)
Источник данных UICollectionViewDataSource
8
• Количество секций (О)• Количество элементов в секции
Источник данных UICollectionViewDataSource
8
• Количество секций (О)• Количество элементов в секции• Ячейка для текущего элемента
Источник данных UICollectionViewDataSource
8
• Количество секций (О)• Количество элементов в секции• Ячейка для текущего элемента• Дополнительный (supplementary) вид для текущего элемента (О)
UICollectionReusableView
9
UICollectionReusableView
9
• Метод переиспользования
UICollectionReusableView
9
• Метод переиспользования• Идентификатор переиспользования
UICollectionReusableView
9
• Метод переиспользования• Идентификатор переиспользования• Методы для layout
UICollectionViewCell
10
NilNil
UICollectionViewCell
11
UICollectionViewCell
11
• var selected: Bool
UICollectionViewCell
11
• var selected: Bool• var highlighted: Bool
UICollectionViewDelegate
12
UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки
UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки• Методы отображения ячеек и дополнительных видов
UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки• Методы отображения ячеек и дополнительных видов
• Методы вспомогательного меню
UICollectionViewDelegate
12
• Методы выделения и нажатия на ячейки• Методы отображения ячеек и дополнительных видов
• Методы вспомогательного меню• Метод для смены layout у коллекции
Layout
13
Layout
13
• UICollectionViewDelegateFlowLayout
Layout
13
• UICollectionViewDelegateFlowLayout• UICollectionViewLayout
Layout
13
• UICollectionViewDelegateFlowLayout• UICollectionViewLayout• UICollectionViewFlowLayout
Layout
14
UICollectionViewDelegateFlowLayout
15
UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания
UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания• Размер ячейки
UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания• Размер ячейки• Отступы для секции
UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания• Размер ячейки• Отступы для секции• Минимальные отступы между ячейками
UICollectionViewDelegateFlowLayout
15
• Имеет базовый набор методов выравнивания• Размер ячейки• Отступы для секции• Минимальные отступы между ячейками• Размер дополнительного вида
Размер ячейки
16
Отступы для секции
17
Минимальные отступы между ячейками
18
Custom layouts
19
Custom layouts
19
• Процесс создания полностью своей логики расположения элементов
Custom layouts
19
• Процесс создания полностью своей логики расположения элементов
• Свой размер collection view
Custom layouts
19
• Процесс создания полностью своей логики расположения элементов
• Свой размер collection view• Может быть прокрутка в оба направления
Custom layouts
19
• Процесс создания полностью своей логики расположения элементов
• Свой размер collection view• Может быть прокрутка в оба направления
• Внешнее представление каждого элемента задается через UICollectionViewLayoutAttributes
Как это работает?
20
Как это работает?
20
• Вызывается invalidateLayout()
Как это работает?
20
• Вызывается invalidateLayout()• Срабатывает когда вы вызываете его руками или это делает collection view
Как это работает?
20
• Вызывается invalidateLayout()• Срабатывает когда вы вызываете его руками или это делает collection view
• При срабатывании shouldInvalidateLayoutForBoundsChange()
Как это работает?
20
• Вызывается invalidateLayout()• Срабатывает когда вы вызываете его руками или это делает collection view
• При срабатывании shouldInvalidateLayoutForBoundsChange()
• Вызывается prepareLayout()
Как это работает?
20
• Вызывается invalidateLayout()• Срабатывает когда вы вызываете его руками или это делает collection view
• При срабатывании shouldInvalidateLayoutForBoundsChange()
• Вызывается prepareLayout()• Запрашивается размер поля
collectionViewContentSize
Как это работает?
20
• Вызывается invalidateLayout()• Срабатывает когда вы вызываете его руками или это делает collection view
• При срабатывании shouldInvalidateLayoutForBoundsChange()
• Вызывается prepareLayout()• Запрашивается размер поля
collectionViewContentSize• Вызывается layoutAttributesForElementsInRect()
Схема
21
layoutAttributesForElementsInRect()
22
layoutAttributesForElementsInRect()
22
• layoutAttributesForCellWithIndexPath:
layoutAttributesForElementsInRect()
22
• layoutAttributesForCellWithIndexPath:• layoutAttributesForSupplementaryViewOfKind:withI
ndexPath:
layoutAttributesForElementsInRect()
22
• layoutAttributesForCellWithIndexPath:• layoutAttributesForSupplementaryViewOfKind:withI
ndexPath:• layoutAttributesForDecorationViewOfKind:withInde
xPath:
UICollectionViewLayoutAttributes
23
UICollectionViewLayoutAttributes
23
• frame
UICollectionViewLayoutAttributes
23
• frame• bounds
UICollectionViewLayoutAttributes
23
• frame• bounds• center
UICollectionViewLayoutAttributes
23
• frame• bounds• center• size
UICollectionViewLayoutAttributes
23
• frame• bounds• center• size• transform3D
UICollectionViewLayoutAttributes
23
• frame• bounds• center• size• transform3D• transform
UICollectionViewLayoutAttributes
23
• frame• bounds• center• size• transform3D• transform• alpha
UICollectionViewLayoutAttributes
23
• frame• bounds• center• size• transform3D• transform• alpha• zIndex
UICollectionViewLayoutAttributes
23
• frame• bounds• center• size• transform3D• transform• alpha• zIndex• hidden
Пару слов о редактировании
24
Пару слов о редактировании
24
• initialLayoutAttributesForAppearingItemAtIndexPath
Пару слов о редактировании
24
• initialLayoutAttributesForAppearingItemAtIndexPath• finalLayoutAttributesForDisappearingItemAtIndexPath
Пару слов о редактировании
24
• initialLayoutAttributesForAppearingItemAtIndexPath• finalLayoutAttributesForDisappearingItemAtIndexPath• Такие же методы для Supplementary и Decoration
view