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

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

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

iOS 7• Сохранение контекста

• Глубина (прозрачность, размытие)

UI• Больше контента

• Больше обратной связи в виде анимаций

• Больше динамики во взаимодействии

• Физика

• Глубина (прозрачность, размытие)

Collection View

Контент• Контент — набор элементов (коллекция)

• Задачи:

- показать элементы коллекции

- навигация по коллекции

- редактирование коллекции

- анимации элементов

UITableView• Элементы — ячейки списка

• Навигация — вертикальный скроллинг

• Редактирование — принудительное (кнопка), свайпы, лонгтап (перемещение)

• Анимации — встроенные (fade, bottom, automatic…), изменение высоты ячеек

UITableView• Плюсы:

- механизм reusable-ячеек

- хорошо реализует наиболее частый случай отображения (список)

- простой API

• Проблемы:

- ограничения лэйаута

- ограничения интерфейса API

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

UITableView• Чем более естественно и интересно мы хотим отобразить коллекцию, тем сложнее нам заставить это делать UITableView

• Так было до iOS 6

• Большасть часть лэйаута была скрыта в SDK

• Почему бы не отдать лэйаут коллекции в руки программисту?

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

UICollectionView UICollectionViewLayout

Delegate

Data Source

UICollectionView• Механизм reusable-ячеек

• Максимально обобщённый API:

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)

- наша задача — определять, какие indexPath соответствуют элементам внутри запрашиваемого прямоугольника

• Отдельные сущности для ячейки и её атрибутов — UICollectionViewLayoutAttributes

UICollectionView

Delegate

Data SourceЯчейки показываются

для indexPath атрибутов, которые

вернул UICollectionViewLayout

Cell

UICollectionViewLayout

Атрибуты{ indexPathframe

…recttransform

UICollectionView• Cell — элемент коллекции

• Supplementary — соответствует функции от элемента коллекции (например, заголовок секции)

• Decoration — элемент лайаута!

Анимация

UICollectionView• Поддержка автоматической анимации смены лэйаута

Cell

Layout 1 : Attribute

Layout 2 : Attribute

UICollectionView• Атрибуты — это характеристика ячейки с точки зрения лэйаута

• Конечно, поддержка наследников

• Разделение понятия элемента и его представления в рамках одного лэйаута

UICollectionView• В результате получаем максимально настраиваемое отображение и поведение коллекций

• Механизм reusable ячеек

• Анимация смены лэйаута

• Если нужны обычные списки, то есть встроенный UICollectionViewFlowLayout, который заменит вам Table View

Dynamics

UIKit Dynamics• Новый взгляд на дизайн

Визуально показываем

пользователю, что элемент делает:

тенивыпуклость

…

До iOS 7

Интерфейс “реагирует” на взаимодействие, как будто это физический элемент среды

iOS 7

UIKit DynamicsAnimator

Collision

View View View View

Bounce

Gravity Collision

UIDynamicItem• Элементами среды могут быть не только

UIView

• Протокол

- center

- transform

- bounds

UIDynamicItem• Это не обязательно UIView, а всё, что удовлетворяет протоколу

• Collection View Layout атрибуты удовлетворяют протоколу!

• Можно использовать связку UICollectionView + Dynamics

• Пример:

- Messages в iOS 7

Где использовать?★ Конечно, для анимаций

★ В коллекциях — dynamics слегка оживит элементы

- Только там, где взаимодействие пользователя с коллекцией действительно схоже с реальностью

• Для задания сложного лэйаута, когда Auto Layout не спасает

Auto Layout

Зачем?• Представление контента — первоочередная задача

• Много динамики, связей и сценариев поведения, а как следствие — много вариантов отображения контента

• Становится сложнее уследить за фреймами

• Autoresizing mask спасает, но далеко не всегда

Springs & Struts• Проблема в императивном стиле

• Явное указание системе, что и где расположить

• Много связей — много пересчета фрэймов

• Пересчет фрэймов — потенциальное место для ошибки

• Никогда не уверены, все ли кейсы учтены

Auto Layout• Пусть пересчетом занимается система

• Мы определим правила и опишем их для системы

• Декларативный стиль

• Описываем цель, а не способ её достижения

• Ловим ошибки на этапе описания правил

Auto Layout• Система линейных уравнений/неравенств

• Каждое решение — вариант расположения элементов

• Становится возможным указывать на зависимости между параметрами элементов

• Intrinsic size — размер элемента в зависимости от контента

Text Kit

Что было?

UI Kit

Core Graphics

Core Text

Что было?• UIKit

- примитивная обработка текста

- UILabel

- добавили NSAttributedString

- проблемы при работе с пользовательскими шрифтами

- сложно реализовать задумки дизайнера

Что было?• Core Text

- низкоуровневое мощное средство

- Frame, Line, Run, Glyph

- сложности во взаимодействии с UIKit

- часто необходимо спускаться на уровень Core Graphics для обработки и “особого” вывода глифов

Text Kit• iOS 7

- Objective-C интерфейс API

- Сравним по возможностям с Core Text

- Отличная работа с пользовательскими шрифтами

- Полная интеграция с UI Kit

Архитектура

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

• Это контроллер

• Берёт данные из NSTextStorage и отображает их в NSTextContainer

• Настраиваем через делегата и наследование

Спасибо!

kiselev@anyvoid.ru