Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Be the first to comment

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

    Be the first to comment

    Login to see the comments

  • derga6

    Mar. 25, 2014

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

Views

Total views

1,758

On Slideshare

0

From embeds

0

Number of embeds

39

Actions

Downloads

17

Shares

0

Comments

0

Likes

1

×