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