— Концепции UI в iOS 7 — UIDynamics: перестаём видеть, начинаем ощущать — UICollectionView: обобщение лэйаута и API — AutoLayout: переход от императивного стиля к декларативному — TextKit: избавляемся от CoreText

1. Новые концепции
и новые средства

2. iOS 7
• Минимум визуальных
элементов управления —
максимум контента

3. iOS 7
• Продвинутые анимации
для отображения реакции
элементов на действия
пользователя

4. iOS 7
• Сохранение контекста
• Глубина (прозрачность,
размытие)

5. UI
• Больше контента
• Больше обратной связи в виде
анимаций
• Больше динамики во взаимодействии
• Физика
• Глубина (прозрачность, размытие)

6. Collection View

7. Контент
• Контент — набор элементов (коллекция)
• Задачи:
- показать элементы коллекции
- навигация по коллекции
- редактирование коллекции
- анимации элементов

8. UITableView
• Элементы — ячейки списка
• Навигация — вертикальный скроллинг
• Редактирование —
принудительное (кнопка), свайпы,
лонгтап (перемещение)
• Анимации — встроенные (fade, bottom,
automatic…), изменение высоты ячеек

9. UITableView
• Плюсы:
- механизм reusable-ячеек
- хорошо реализует наиболее частый
случай отображения (список)
- простой API
• Проблемы:
- ограничения лэйаута
- ограничения интерфейса API

10. Что делать с этим?

12. UITableView
• Чем более естественно и интересно мы
хотим отобразить коллекцию, тем сложнее
нам заставить это делать UITableView
• Так было до iOS 6
• Большасть часть лэйаута была скрыта в
SDK
• Почему бы не отдать лэйаут коллекции в
руки программисту?

13. UICollectionView
• Появилась отдельная сущность, которая
занимается лэйаутом
UICollectionViewLayout
UICollectionView UICollectionViewLayout
Delegate
Data Source

15. UICollectionView
• Механизм reusable-ячеек
• Максимально обобщённый API:
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)
- наша задача — определять, какие indexPath
соответствуют элементам внутри запрашиваемого
прямоугольника
• Отдельные сущности для ячейки и её
атрибутов — UICollectionViewLayoutAttributes

16. UICollectionView
Delegate
Data Source
Ячейки показываются
для indexPath
атрибутов, которые
вернул
UICollectionViewLayout
Cell
UICollectionViewLayout
Атрибуты
{
indexPath
frame
…
rect
transform

17. UICollectionView
• Cell — элемент коллекции
• Supplementary — соответствует функции от
элемента коллекции (например, заголовок
секции)
• Decoration — элемент лайаута!

18. Анимация

19. UICollectionView
• Поддержка автоматической анимации
смены лэйаута
Cell
Layout 1 : Attribute
Layout 2 : Attribute

20. UICollectionView
• Атрибуты — это характеристика ячейки с
точки зрения лэйаута
• Конечно, поддержка наследников
• Разделение понятия элемента и его
представления в рамках одного лэйаута

21. UICollectionView
• В результате получаем максимально
настраиваемое отображение и поведение
коллекций
• Механизм reusable ячеек
• Анимация смены лэйаута
• Если нужны обычные списки, то есть
встроенный UICollectionViewFlowLayout,
который заменит вам Table View

22. Dynamics

23. UIKit Dynamics
• Новый взгляд на дизайн
Визуально
показываем
пользователю, что
элемент делает:
тени
выпуклость
…
До iOS 7
Интерфейс
“реагирует” на
взаимодействие,
как будто это
физический
элемент среды
iOS 7

24. UIKit Dynamics
Animator
Collision
View View View View
Bounce
Gravity Collision

25. UIDynamicItem
• Элементами среды могут быть не только
UIView
• Протокол
- center
- transform
- bounds

26. UIDynamicItem
• Это не обязательно UIView, а всё, что
удовлетворяет протоколу
• Collection View Layout атрибуты
удовлетворяют протоколу!
• Можно использовать связку
UICollectionView + Dynamics
• Пример:
- Messages в iOS 7

27. Где использовать?
★ Конечно, для анимаций
★ В коллекциях — dynamics слегка оживит
элементы
- Только там, где взаимодействие
пользователя с коллекцией
действительно схоже с реальностью
• Для задания сложного лэйаута, когда
Auto Layout не спасает

28. Auto Layout

29. Зачем?
• Представление контента —
первоочередная задача
• Много динамики, связей и сценариев
поведения, а как следствие — много
вариантов отображения контента
• Становится сложнее уследить за фреймами
• Autoresizing mask спасает, но далеко не
всегда

30. Springs & Struts
• Проблема в императивном стиле
• Явное указание системе, что и где
расположить
• Много связей — много пересчета фрэймов
• Пересчет фрэймов — потенциальное место
для ошибки
• Никогда не уверены, все ли кейсы учтены

31. Auto Layout
• Пусть пересчетом занимается система
• Мы определим правила и опишем их для
системы
• Декларативный стиль
• Описываем цель, а не способ её
достижения
• Ловим ошибки на этапе описания правил

32. Auto Layout
• Система линейных уравнений/неравенств
• Каждое решение — вариант расположения
элементов
• Становится возможным указывать на
зависимости между параметрами
элементов
• Intrinsic size — размер элемента в
зависимости от контента

33. Text Kit

34. Что было?
UI Kit
Core Graphics
Core Text

35. Что было?
• UIKit
- примитивная обработка текста
- UILabel
- добавили NSAttributedString
- проблемы при работе с
пользовательскими шрифтами
- сложно реализовать задумки
дизайнера

37. Что было?
• Core Text
- низкоуровневое мощное средство
- Frame, Line, Run, Glyph
- сложности во взаимодействии с UIKit
- часто необходимо спускаться на
уровень Core Graphics для обработки и
“особого” вывода глифов

38. Text Kit
• iOS 7
- Objective-C интерфейс API
- Сравним по возможностям с Core Text
- Отличная работа с пользовательскими
шрифтами
- Полная интеграция с UI Kit

39. Архитектура
Text Container
Text Storage
Layout Manager

40. Преимущества
Text Container
Text Storage
Layout Manager 1

41. Преимущества
Text Container
Text Storage
Layout Manager 1 Layout Manager 1

42. Преимущества
Text Container 1
Text Storage
Layout Manager 1 Layout Manager 1
Text Container 2

43. NSLayoutManager
• Character + Font = Glyph
• Glyphs + Locations = Text Layout
• Это контроллер
• Берёт данные из NSTextStorage и
отображает их в NSTextContainer
• Настраиваем через делегата и
наследование

44. Спасибо!
kiselev@anyvoid.ru