Векторные изображения в Xcode

Apple добавила векторные изображения PDF в каталог ещё в Xcode 6. Это удобный способ создания ассетов изображений с разрешением 1x, 2x и 3x без необходимости вручную создавать каждый файл. Но чего не было к тому моменту, так это масштабируемых векторных изображений. Растягивание изображения сверх его базового размера приводило к каким-то неприятным и нечетким результатам.

С Xcode 9 это изменилось: появилась возможность сохранять векторные данные и масштабировать изображения во время выполнения программы. Эти улучшения хорошо сочетаются и с динамическими типами.

Нечеткие изображения

Если вкратце рассказать о добавлении векторных изображений PDF в каталог ассетов, то некоторое время назад выходила статья о создании масштабированных изображений с помощью векторов PDF. Вы добавляете PDF-изображение с разрешением 1х в каталог, выбираете одиночный масштаб, и Xcode генерирует изображения 2х и 3х во время сборки.

Проблема с использованием PDF-изображений до сих пор заключалась в том, что Xcode создает масштабированные изображения во время сборки. Не было никакой поддержки для использования масштабируемых изображений в рантайме. Например, у меня есть изображение звезды размером 100x100 пикселей, которое неплохо выглядит при нормальном размере:

Если я добавляю ограничения для растягивания изображения, чтобы заполнить UIImageView, оно выглядит некрасиво. Вот оно же, использующее режим содержимого Aspect Fit, масштабированное чуть более чем в три раза, чтобы заполнить ширину iPhone 7 Plus:

В результате получается размытое и неровное изображение, которое еще хуже выглядит на планшетах.

Сохранение векторных данных

Xcode 9 изменил эту ситуацию, позволяя в рантайме отображать картинку как вектор. Это означает, что изображение может плавно масштабироваться до произвольных размеров. Единственное изменение, которое вам нужно сделать, - это установить флажок Preserve Vector Data для PDF-изображения в каталоге ассетов:

Теперь изображение выглядит четким даже при масштабировании, чтобы заполнить экран iPhone 7 Plus (примечание: девайс, конечно, не самый новый):

Если вы используете Interface Builder, масштабированное изображение все еще может выглядеть размытым в предварительном просмотре, но во время выполнения в симуляторе и на устройстве оно будет выглядеть нормально.

Примечание: в Xcode 13 всё в порядке в IDE тоже.

Это работает только c iOS 11. Xcode не предупреждает вас, когда вы включаете Preserve Vector Data и выставляете iOS 10 или более ранние версии.

Примечание: в 2022 году это уточнение про iOS 11 уже неактуально, если вы, конечно, вообще никогда не обновляете приложения.

Доступность (Accessibility)

Есть две дополнительные функции, которые хотелось бы упомянуть и которые легко поддерживать, если вы используете векторные изображения.

Настройка размеров изображений для доступности

В iOS 11 компания Apple добавила протокол UIAccessibilityContentSizeCategoryImageAdjusting. И UIButton, и UIImageView принимают этот протокол, который добавляет единственное булево свойство adjustsImageSizeForAccessibilityContentSizeCategory. Если установить значение true, то размер изображения увеличивается при использовании любого из больших размеров текста (обычные размеры текста содержимого не влияют).

Чтобы добавить поддержку:

1. Добавьте PDF-изображение в каталог и не забудьте установить флажок Preserve Vector Data, как и раньше:

2. При добавлении представления изображения или кнопки в Storyboard убедитесь, что установлен флажок Adjusts Image Size.

При добавлении представления изображения в коде:

imageView.adjustsImageSizeForAccessibilityContentSizeCategory = true

Вот пример использования 100-точечного звездообразного вектора PDF из предыдущего примера в представлении с текстовой меткой, использующей текстовый стиль .headline при стандартном размере категории содержимого:

Вот то же представление с категорией размера содержимого, увеличенной до самого большого размера доступности (.accessibilityExtraExtraExtraLarge). Размер изображения меняется в зависимости от размера доступности. При самом большом размере оно достигло размера 300x300 точек, но все равно выглядит плавным:

Если вы не используете векторное изображение PDF или забыли поставить галочку Preserve Vector Data, то просмотр изображения масштабирует исходные данные изображения, что может быть заметно при больших размерах. Также не забудьте проверить, работает ли ваше приложение с теперь уже гораздо большими размерами изображений.

Apple добавила еще одно улучшение доступности в iOS 11 для значков, используемых в барах, таких как панель вкладок и панель инструментов. Например, если я использую tab bar с некоторыми элементами:

При нажатии и удержании значка при использовании одного из больших размеров текста доступности iOS 11 показывает увеличенную версию нашей иконки.

Чтобы добавить поддержку:

1. Для каждого изображения элемента панели добавьте изображение размером 75x75 точек в каталог активов. Использование векторного изображения PDF упрощает эту задачу, но при желании можно добавить и отдельные изображения (1x: 75x75 пикселей, 2x: 150x150 пикселей, 3x: 225x225 пикселей).
2. Добавьте изображение большого размера содержимого к элементу панели. Interface Builder помечает свойство Accessibility:

При добавлении в коде установите свойство largeContentSizeImage на изображение.

barItem.largeContentSizeImage = image

Помните, что большое изображение отображается только при использовании одного из дополнительных больших размеров текста доступности.

Больше интересных статей здесь: https://t.me/iOS_Career

Написать мне лично: https://t.me/viktorianec