Следующая статья поможет вам: Работа с каталогами ресурсов в Xcode
Вернуться в блог
Каталоги ресурсов очень полезны для организации ресурсов вашего приложения в Xcode. Перетащите графику, изображения, значки, цвета и векторы в каталог ресурсов и используйте их непосредственно в коде вашего приложения.
В этом уроке мы обсудим:
- Как добавить цвета и изображения в каталог активов
- Как использовать каталоги ресурсов в практической разработке iOS
- Различные размеры и масштабы изображений
- Использование цветов в темном и светлом режиме
- Как использовать цвета и изображения из каталога ресурсов в своем коде
Проще говоря, каталог ресурсов — это отдельная папка в Xcode, которую вы используете для организации изображений, значков, цветов и многого другого вашего приложения. Вместо добавления отдельных изображений в органайзер файлов Xcode вы добавляете ресурсы, аккуратно организованные в одном каталоге. Каталоги активов также включают метаданные, например, о масштабе изображения.
Вот пример каталога ресурсов Assets.xcassets в проекте Xcode:
Проект приложения в Xcode по умолчанию имеет один каталог .xcassets по умолчанию, который вы можете найти в Навигаторе проекта слева от Xcode. Открыв его, вы увидите следующие интерфейсы:
Наиболее распространенными типами ресурсов в обычном проекте приложения являются:
Каковы преимущества использования каталога ресурсов в вашем проекте приложения?
- Большинство функций и компонентов в iOS SDK, которые работают с ресурсами, могут напрямую работать с именем ресурса, то есть Color («зеленый») и Image («логотип»), что очень удобно. Вы даже можете использовать литералы изображений и цветов в редакторе Xcode, поэтому значки и цвета отображаются как встроенные изображения.
- Когда вы используете каталоги ресурсов, App Store может использовать App Thinning для загрузки только соответствующих изображений и ресурсов на iPhone пользователя. Например, более крупному iPhone 11 Pro не нужно хранить изображения с низким разрешением 1x. Это уменьшает загрузку приложения и последующий размер хранилища.
- Каталог активов содержит всевозможные полезные метаданные об активах, такие как предполагаемая платформа, масштаб, цветовое пространство, светлый/темный режим, направление LTR/RTL и т. д. Это позволяет вам точно настраивать ресурсы вашего приложения и повышать удобство работы пользователей вашего приложения.
Давайте узнаем больше о специфике ресурсов в Xcode!
Файл .xcassets фактически представляет собой папку внутри корневой папки вашего проекта Xcode. Ресурсы хранятся в подпапках, а метаданные хранятся в файлах JSON. Все это вполне совместимо с инструментами контроля версий, такими как Git. Аккуратный!
Наиболее распространенными ресурсами, которые вы найдете в каталоге ресурсов, являются, конечно же, изображения! Вы используете их для самых разных вещей: фотографий, значков, графики, векторов и так далее. Все, что является пиксельным и не может быть нарисовано только с помощью графического кода, вероятно, будет файлом изображения PNG или JPG.
Добавить изображение в каталог ресурсов так же просто, как перетащить его из Finder в Xcode. Так:
Добавив изображение в каталог ресурсов, вы можете использовать его в своем коде следующим образом:
// УИКит
imageView.image = UIImage(с именем: «lolcatz»)
// SwiftUI
Изображение («лолкац»)
Просто, правда? Преимущество работы с каталогом ресурсов по умолчанию в Xcode состоит в том, что вы можете ссылаться на имя ресурса непосредственно в своем коде. Вам не нужно загружать пакет, читать из файла или работать с путями к файлам.
Если вы внимательно посмотрите на скриншот выше, вы увидите, что на самом деле мы перетаскиваем 3 файла из Finder в Xcode. Что с этим случилось? Короче говоря, это из-за разных размеров экрана iPhone.
Различные модели iPhone имеют разные абсолютные размеры и разрешения экрана, что приводит к разному количеству пикселей на дюйм (PPI) для этого iPhone. Когда вы можете разместить больше пикселей в одном и том же «физическом» пространстве, вам нужны изображения большего размера. Вы предоставляете эти изображения в своем приложении iOS через Xcode с помощью [email protected] и [email protected] соглашение об именах файлов.
Кстати, ресурс App Icon в файле Assets.xcassets выглядит сложно, но это всего лишь изображение. Отличие от обычного графического ресурса состоит в том, что значок приложения содержит изображения множества разных размеров. Каждый размер соответствует определенной модели iPhone/iPad и варианту использования, например @3x для значка уведомления iPhone. Когда вы настраиваете значок своего приложения, просто экспортируйте файл изображения в разные размеры (или используйте шаблон), перетащите его в соответствующие слоты, и все готово.
Вы можете узнать больше о масштабировании изображения и пикселях по сравнению с точками в этом руководстве: Объяснение масштабирования изображения в 1x, 2x и 3x на iOS.
Обычно вы используете 1 из 3 типов файлов изображений в своем приложении iOS:
- PNG: сжатый формат файлов без потерь, поддерживающий прозрачность. Используйте его для векторов, значков и иллюстраций. Вы можете выбрать между PNG-8 и PNG-24, чтобы еще больше уменьшить размер файла.
- JPG: формат сжатых файлов с потерями, не поддерживающий прозрачность. Используйте его для сложной графики, растровых изображений и фотографий. JPG имеет лучшее сжатие по сравнению с PNG, но при этом теряется больше данных цвета и растрового изображения.
- SVG: Начиная с Xcode 12, вы можете использовать масштабируемую векторную графику, которая представляет собой формат на основе XML для векторных изображений, таких как значки, графики и иллюстрации. При использовании в сочетании со сжатием и оптимизацией текста он часто меньше PNG. Он также не зависит от масштаба, что означает, что вам не понадобятся 2-3 изображения для разных размеров экрана.
Если вы хотите, чтобы размер загрузки и хранения вашего приложения был небольшим, разумно использовать такой инструмент, как ImageOptim, для оптимизации ваших изображений перед их импортом в Xcode. Вы можете значительно уменьшить размер файлов изображений в зависимости от выбранных вами настроек.
Потрясающий! Давайте вернемся к каталогу ресурсов и обсудим цветовые ресурсы.
Авторы Note: Вы также можете добавлять PDF-файлы (независимые от масштаба) в каталог ресурсов вашего приложения в Xcode, но теперь, когда SVG здесь, в этом больше нет необходимости.
Недооцененной особенностью каталогов ресурсов Xcode является возможность добавлять цвета непосредственно в каталог. Вы можете определить цвета RGB и использовать их в своем приложении по имени, как если бы вы использовали изображение.
Вот как это работает:
- Откройте каталог ресурсов в Xcode.
- Щелкните правой кнопкой мыши по контуру слева.
- Выбрать новый набор цветов
- Выберите цвет в редакторе («Универсальный»)
- Перейдите к инспектору атрибутов справа.
- Измените свойства RGB цвета, например, на шестнадцатеричный код цвета.
- Используйте цветовое пространство sRGB (или DCI-P3) для настройки цветов. Это цветовое пространство, которое iOS использует на iPhone и iPad. Убедитесь, что инструмент редактирования графики (например, Sketch) и монитор вашего компьютера настроены на одно и то же цветовое пространство.
- При изменении цвета в каталоге активов вы можете выбирать между вводом в виде шестнадцатеричных кодов цвета или значениями от 0–255 до 0,0–1,0. Проще всего использовать шестнадцатеричные коды цветов, поскольку их обычно можно скопировать и вставить непосредственно из инструмента редактирования графики. Вы также можете использовать цветовую панель macOS.
- Выбрав цвет, измените настройку «Внешний вид» в Инспекторе атрибутов. Вы можете изменить его, чтобы поддерживать 3 разных внешнего вида:
- Нет: цвет не изменит свой внешний вид.
- Любой, Темный: Любой используется для светлого режима и более старых версий iOS, которые не поддерживают темный режим. Темный режим, конечно, используется для темного режима.
- Любой, Темный, Светлый: Любой используется для старых версий iOS, которые не поддерживают внешний вид в темном/светлом режиме. Темный и Светлый используются для темного и светлого режима соответственно.
- Как использовать каталоги ресурсов в практической разработке iOS
- Как добавить цвета и изображения в каталог активов
- Использование цветов в темном и светлом режиме
- Различные размеры и масштабы изображений
- Как использовать цвета и изображения из каталога ресурсов в своем коде
Как вы используете цвет в своем приложении? Вот как:
// SwiftUI
Text(“Прощайте и спасибо за рыбок”).foregroundColor(Color(“мята”))
// УИКит
textLabel.textColor = UIColor(с именем: «мята»)
Несколько вещей, которые следует иметь в виду:
Работа с цветами через каталог ресурсов Xcode имеет еще одно интересное преимущество: вы можете автоматически добавлять цвета для поддержки темного режима. Вот как это работает:
Одна из замечательных особенностей этой настройки заключается в том, что она легко меняет цвета в вашем приложении между темным и светлым режимами. Если вы постоянно используете название цвета в своем приложении, вы сможете использовать темный режим практически без усилий.
Разумеется, эта же настройка «Внешний вид» работает и для изображений. Вы можете указать, какой файл изображения использовать, т. е. использовать конкретное изображение для темного режима.
Потрясающий! Теперь вы знаете, насколько полезны каталоги ресурсов в Xcode. В них можно хранить все что угодно: изображения, цвета, метаданные и многое другое. Вот что мы обсуждали:
