Новые концепции
и новые средства
iOS 7
• Минимум визуальных
элементов управления —
максимум контента
iOS 7
• Продвинутые анимации
для отображения реакции
элементов на действия
пользователя
iOS 7
• Сохранение контекста
• Глубина (прозрачность,
размытие)
UI
• Больше контента
• Больше обратной связи в виде
анимаций
• Больше динамики во взаимодействии
• Физика
• Глубина (прозр...
Collection View
Контент
• Контент — набор элементов (коллекция)
• Задачи:
- показать элементы коллекции
- навигация по коллекции
- редакти...
UITableView
• Элементы — ячейки списка
• Навигация — вертикальный скроллинг
• Редактирование —
принудительное (кнопка), св...
UITableView
• Плюсы:
- механизм reusable-ячеек
- хорошо реализует наиболее частый
случай отображения (список)
- простой AP...
Что делать с этим?
UITableView
• Чем более естественно и интересно мы
хотим отобразить коллекцию, тем сложнее
нам заставить это делать UITabl...
UICollectionView
• Появилась отдельная сущность, которая
занимается лэйаутом
UICollectionViewLayout
UICollectionView UICol...
UICollectionView
• Механизм reusable-ячеек
• Максимально обобщённый API:
- (NSArray *)layoutAttributesForElementsInRect:(C...
UICollectionView
Delegate
Data Source
Ячейки показываются
для indexPath
атрибутов, которые
вернул
UICollectionViewLayout
C...
UICollectionView
• Cell — элемент коллекции
• Supplementary — соответствует функции от
элемента коллекции (например, загол...
Анимация
UICollectionView
• Поддержка автоматической анимации
смены лэйаута
Cell
Layout 1 : Attribute
Layout 2 : Attribute
UICollectionView
• Атрибуты — это характеристика ячейки с
точки зрения лэйаута
• Конечно, поддержка наследников
• Разделен...
UICollectionView
• В результате получаем максимально
настраиваемое отображение и поведение
коллекций
• Механизм reusable я...
Dynamics
UIKit Dynamics
• Новый взгляд на дизайн
Визуально
показываем
пользователю, что
элемент делает:
тени
выпуклость
…
До iOS 7
...
UIKit Dynamics
Animator
Collision
View View View View
Bounce
Gravity Collision
UIDynamicItem
• Элементами среды могут быть не только
UIView
• Протокол
- center
- transform
- bounds
UIDynamicItem
• Это не обязательно UIView, а всё, что
удовлетворяет протоколу
• Collection View Layout атрибуты
удовлетвор...
Где использовать?
★ Конечно, для анимаций
★ В коллекциях — dynamics слегка оживит
элементы
- Только там, где взаимодействи...
Auto Layout
Зачем?
• Представление контента —
первоочередная задача
• Много динамики, связей и сценариев
поведения, а как следствие — ...
Springs & Struts
• Проблема в императивном стиле
• Явное указание системе, что и где
расположить
• Много связей — много пе...
Auto Layout
• Пусть пересчетом занимается система
• Мы определим правила и опишем их для
системы
• Декларативный стиль
• О...
Auto Layout
• Система линейных уравнений/неравенств
• Каждое решение — вариант расположения
элементов
• Становится возможн...
Text Kit
Что было?
UI Kit
Core Graphics
Core Text
Что было?
• UIKit
- примитивная обработка текста
- UILabel
- добавили NSAttributedString
- проблемы при работе с
пользоват...
Что было?
• Core Text
- низкоуровневое мощное средство
- Frame, Line, Run, Glyph
- сложности во взаимодействии с UIKit
- ч...
Text Kit
• iOS 7
- Objective-C интерфейс API
- Сравним по возможностям с Core Text
- Отличная работа с пользовательскими
ш...
Архитектура
Text Container
Text Storage
Layout Manager
Преимущества
Text Container
Text Storage
Layout Manager 1
Преимущества
Text Container
Text Storage
Layout Manager 1 Layout Manager 1
Преимущества
Text Container 1
Text Storage
Layout Manager 1 Layout Manager 1
Text Container 2
NSLayoutManager
• Character + Font = Glyph
• Glyphs + Locations = Text Layout
• Это контроллер
• Берёт данные из NSTextSto...
Спасибо!
kiselev@anyvoid.ru
iOS 7. Новые концепции и новые средства
iOS 7. Новые концепции и новые средства
iOS 7. Новые концепции и новые средства
Upcoming SlideShare
Loading in …5
×

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

1,468 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,468
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Новые концепции и новые средства
  2. 2. iOS 7 • Минимум визуальных элементов управления — максимум контента
  3. 3. iOS 7 • Продвинутые анимации для отображения реакции элементов на действия пользователя
  4. 4. iOS 7 • Сохранение контекста • Глубина (прозрачность, размытие)
  5. 5. UI • Больше контента • Больше обратной связи в виде анимаций • Больше динамики во взаимодействии • Физика • Глубина (прозрачность, размытие)
  6. 6. Collection View
  7. 7. Контент • Контент — набор элементов (коллекция) • Задачи: - показать элементы коллекции - навигация по коллекции - редактирование коллекции - анимации элементов
  8. 8. UITableView • Элементы — ячейки списка • Навигация — вертикальный скроллинг • Редактирование — принудительное (кнопка), свайпы, лонгтап (перемещение) • Анимации — встроенные (fade, bottom, automatic…), изменение высоты ячеек
  9. 9. UITableView • Плюсы: - механизм reusable-ячеек - хорошо реализует наиболее частый случай отображения (список) - простой API • Проблемы: - ограничения лэйаута - ограничения интерфейса API
  10. 10. Что делать с этим?
  11. 11. UITableView • Чем более естественно и интересно мы хотим отобразить коллекцию, тем сложнее нам заставить это делать UITableView • Так было до iOS 6 • Большасть часть лэйаута была скрыта в SDK • Почему бы не отдать лэйаут коллекции в руки программисту?
  12. 12. UICollectionView • Появилась отдельная сущность, которая занимается лэйаутом UICollectionViewLayout UICollectionView UICollectionViewLayout Delegate Data Source
  13. 13. UICollectionView • Механизм reusable-ячеек • Максимально обобщённый API: - (NSArray *)layoutAttributesForElementsInRect:(CGRect) - наша задача — определять, какие indexPath соответствуют элементам внутри запрашиваемого прямоугольника • Отдельные сущности для ячейки и её атрибутов — UICollectionViewLayoutAttributes
  14. 14. UICollectionView Delegate Data Source Ячейки показываются для indexPath атрибутов, которые вернул UICollectionViewLayout Cell UICollectionViewLayout Атрибуты { indexPath frame … rect transform
  15. 15. UICollectionView • Cell — элемент коллекции • Supplementary — соответствует функции от элемента коллекции (например, заголовок секции) • Decoration — элемент лайаута!
  16. 16. Анимация
  17. 17. UICollectionView • Поддержка автоматической анимации смены лэйаута Cell Layout 1 : Attribute Layout 2 : Attribute
  18. 18. UICollectionView • Атрибуты — это характеристика ячейки с точки зрения лэйаута • Конечно, поддержка наследников • Разделение понятия элемента и его представления в рамках одного лэйаута
  19. 19. UICollectionView • В результате получаем максимально настраиваемое отображение и поведение коллекций • Механизм reusable ячеек • Анимация смены лэйаута • Если нужны обычные списки, то есть встроенный UICollectionViewFlowLayout, который заменит вам Table View
  20. 20. Dynamics
  21. 21. UIKit Dynamics • Новый взгляд на дизайн Визуально показываем пользователю, что элемент делает: тени выпуклость … До iOS 7 Интерфейс “реагирует” на взаимодействие, как будто это физический элемент среды iOS 7
  22. 22. UIKit Dynamics Animator Collision View View View View Bounce Gravity Collision
  23. 23. UIDynamicItem • Элементами среды могут быть не только UIView • Протокол - center - transform - bounds
  24. 24. UIDynamicItem • Это не обязательно UIView, а всё, что удовлетворяет протоколу • Collection View Layout атрибуты удовлетворяют протоколу! • Можно использовать связку UICollectionView + Dynamics • Пример: - Messages в iOS 7
  25. 25. Где использовать? ★ Конечно, для анимаций ★ В коллекциях — dynamics слегка оживит элементы - Только там, где взаимодействие пользователя с коллекцией действительно схоже с реальностью • Для задания сложного лэйаута, когда Auto Layout не спасает
  26. 26. Auto Layout
  27. 27. Зачем? • Представление контента — первоочередная задача • Много динамики, связей и сценариев поведения, а как следствие — много вариантов отображения контента • Становится сложнее уследить за фреймами • Autoresizing mask спасает, но далеко не всегда
  28. 28. Springs & Struts • Проблема в императивном стиле • Явное указание системе, что и где расположить • Много связей — много пересчета фрэймов • Пересчет фрэймов — потенциальное место для ошибки • Никогда не уверены, все ли кейсы учтены
  29. 29. Auto Layout • Пусть пересчетом занимается система • Мы определим правила и опишем их для системы • Декларативный стиль • Описываем цель, а не способ её достижения • Ловим ошибки на этапе описания правил
  30. 30. Auto Layout • Система линейных уравнений/неравенств • Каждое решение — вариант расположения элементов • Становится возможным указывать на зависимости между параметрами элементов • Intrinsic size — размер элемента в зависимости от контента
  31. 31. Text Kit
  32. 32. Что было? UI Kit Core Graphics Core Text
  33. 33. Что было? • UIKit - примитивная обработка текста - UILabel - добавили NSAttributedString - проблемы при работе с пользовательскими шрифтами - сложно реализовать задумки дизайнера
  34. 34. Что было? • Core Text - низкоуровневое мощное средство - Frame, Line, Run, Glyph - сложности во взаимодействии с UIKit - часто необходимо спускаться на уровень Core Graphics для обработки и “особого” вывода глифов
  35. 35. Text Kit • iOS 7 - Objective-C интерфейс API - Сравним по возможностям с Core Text - Отличная работа с пользовательскими шрифтами - Полная интеграция с UI Kit
  36. 36. Архитектура Text Container Text Storage Layout Manager
  37. 37. Преимущества Text Container Text Storage Layout Manager 1
  38. 38. Преимущества Text Container Text Storage Layout Manager 1 Layout Manager 1
  39. 39. Преимущества Text Container 1 Text Storage Layout Manager 1 Layout Manager 1 Text Container 2
  40. 40. NSLayoutManager • Character + Font = Glyph • Glyphs + Locations = Text Layout • Это контроллер • Берёт данные из NSTextStorage и отображает их в NSTextContainer • Настраиваем через делегата и наследование
  41. 41. Спасибо! kiselev@anyvoid.ru

×