В докладе пойдет речь о верстке для UITableView и, в частности, UICollectionView. Зимин Александр расскажет о том, почему стоит использовать UICollectionView чаще, чем вы думаете, как не сесть в лужу с оптимизацией и динамично подстраивать верстку под контент. Доклад будет сопровождаться работой в Xcode, реальными примерами кода и полезными ссылками.

2. Нестандартная верстка для
стандартных компонентов в iOS
Зимин Александр

3. iOS Developer
UI Engineer
CocoaHeads
Russia
macOS Developer
Co-Founder
Организатор
Маркетинг, Дизайн, Аналитика, …

4. План
• Верстка в iOS
• Table View/Collection View
• 4 примера-истории
• Советы и оптимизация

5. Верстка в iOS

6. • Распространение элементов на экране
• Отступы, размеры, выравнивания, …
• Динамические коллекции

8. Airbnb

9. Airbnb
UICollectionView
Custom Pagining
UICollectionView
Custom Pagining

15. UITableView UICollectionView

16. Table View/Collection View

17. Scroll View
• Контент может быть больше
экрана
• Позволяет прокручивать по
оси x и y

18. Cell
Cell
Cell
Table View

19. Cell
Cell
Cell
Table View
Data Source
Delegate

20. Cell
Cell
Cell
Table View
Data Source
Delegate
Cell Data

21. Cell
Cell
Cell
Table View
Data Source
Delegate
Cell Data
“Although UITableView allows vertical scrolling only”

22. Cell
Cell
Cell
Table View
Data Source
Delegate
Cell Data
“Although UITableView allows vertical scrolling only”
Cell Height

23. Cell
Cell
Cell
Table View
Data Source
Delegate
Cell Data
“Although UITableView allows vertical scrolling only”
Cell Height
Dynamic Height

24. Cell
Cell
Cell
Table View
Data Source
Delegate
Cell Data
“Although UITableView allows vertical scrolling only”
Cell Height
Dynamic Height
8

25. Cell Cell
Cell
Cell Cell
Collection View

26. Data Source
Delegate
Cell Cell
Cell
Cell Cell
Collection View

27. Data Source
Delegate
Cell Data
Cell Cell
Cell
Cell Cell
Collection View

28. Data Source
Delegate
Cell Data
Cell Cell
Cell
Cell Cell
Collection ViewCollection View Layout

29. Data Source
Delegate
Cell Data
Cell Cell
Cell
Cell Cell
Collection ViewCollection View Layout
Layout
Attributes

30. Пример

37. • override func systemLayoutSizeFitting(:, :, :) -> CGSize
• Нет ничего плохого в комбинировании Auto Layout и
ручного подсчета
• Типы динамического контента:
• Картинки (UIImageView)
• Текст (UILabel, UITextView)
• Нестандартные элементы (Custom UIView/UIControl)

39. • UILabel
• func sizeThatFits(_ size: CGSize) -> CGSize
• String/NSAttributedString
• func boundingRect(with size: CGSize, options:
NSStringDrawingOptions = [], attributes: [String : Any]? = nil,
context: NSStringDrawingContext?) -> CGRect
goo.gl/pBdZlI

40. • UILabel
• func sizeThatFits(_ size: CGSize) -> CGSize
• String/NSAttributedString
• func boundingRect(with size: CGSize, options:
NSStringDrawingOptions = [], attributes: [String : Any]? = nil,
context: NSStringDrawingContext?) -> CGRect
goo.gl/pBdZlI

41. • UILabel
• func sizeThatFits(_ size: CGSize) -> CGSize
• String/NSAttributedString
• func boundingRect(with size: CGSize, options:
NSStringDrawingOptions = [], attributes: [String : Any]? = nil,
context: NSStringDrawingContext?) -> CGRect
• func boundingRect(with size: CGSize, options:
NSStringDrawingOptions = [], context:
NSStringDrawingContext?) -> CGRect
goo.gl/pBdZlI

42. • UIImageView
• UIImage
• CGSize
• Заранее заданный размер

43. • Динамическая верстка у таблиц и коллекций
существует уже давно (iOS 8+)
• В ней нет ничего плохого, и она вам упростит жизнь
• Вы всегда можете комбинировать auto layout и
ручной подсчет
• Посчитать размер String/NSAttributedString легко
Итоги демо

44. Пример

46. Collection View Layout

47. Collection View Layout
prepare()

48. Collection View Layout
prepare()
var collectionViewContentSize: CGSize

49. Collection View Layout
prepare()
var collectionViewContentSize: CGSize
func layoutAttributesForElements(in rect:
CGRect) -> [UICollectionViewLayoutAttributes]?

50. Collection View Layout
prepare()
var collectionViewContentSize: CGSize
func layoutAttributesForElements(in rect:
CGRect) -> [UICollectionViewLayoutAttributes]?

51. Collection View Layout
prepare()
var collectionViewContentSize: CGSize
func layoutAttributesForElements(in rect:
CGRect) -> [UICollectionViewLayoutAttributes]?
func shouldInvalidateLayout(forBoundsChange
newBounds: CGRect) -> Bool

53. • Для любой нестандартной верстки вам хватит
UICollectionView
• Нестандартный paging находится там же
• Для оптимизации кэшируйте все заранее или в
процессе
Итоги демо

54. • Заготавливайте ваши значения в prepare()
• Кэшируйте значения
• Не стоит всегда возвращать true из `shouldInvalidateLayout`
• Будьте осторожнее с `estimatedItemSize`

56. • Не все то золото, что блестит
• Не жалейте ресурсов на проверку всех
поддерживаемых iOS
• Использование таких элементов по-прежнему
оправдано
Итоги демо

57. Анимация

59. • Вы всегда можете показать взаимодействие
пользователя с контентом
• Чем интереснее возможность, тем сложнее ее
поддерживать
Итоги демо

60. • Динамическая верстка — это хорошо
• Любую верткую можно реализовать на
UICollectionView, и это просто
• Чем интереснее возможность — тем больше
ответственность
• Все это можно еще анимировать
Итоги

61. • WWDC 2016 Inclusive App Design — https://developer.apple.com/videos/play/
wwdc2016/801/
• WWDC 2016 Making Apps Adaptive Part 1/2 — https://developer.apple.com/
videos/play/wwdc2016/222/, https://developer.apple.com/videos/play/
wwdc2016/233/
• Подсчет высоты строки — https://goo.gl/pBdZlI
Ссылки

62. • WWDC 2016 Inclusive App Design — https://developer.apple.com/videos/play/
wwdc2016/801/
• WWDC 2016 Making Apps Adaptive Part 1/2 — https://developer.apple.com/
videos/play/wwdc2016/222/, https://developer.apple.com/videos/play/
wwdc2016/233/
Ссылки

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