Руководство об их преимуществах и о том, как их использовать

Символы SF были представлены во время WWDC 2019 и стали большим подарком разработчикам. Apple предоставила нам бесплатные символы для использования в нашем приложении, и ими легко пользоваться!

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

Вы можете найти примеры кода Swift внизу.

Что такое символы SF?

SF Symbols - это набор из более чем 1500 символов, которые вы можете использовать в своем приложении. Они выровнены и настраиваются в широком диапазоне веса и масштабов, чтобы адаптироваться к вашему дизайну. Поскольку они интегрированы в системный шрифт San Francisco, который автоматически обеспечивает оптическое вертикальное выравнивание с текстом для любого веса и размера.

Какие платформы поддерживают символы SF?

Поддерживаемые платформы для символов SF:

  • iOS 13 и новее
  • watchOS 6 и новее
  • tvOS 13 и выше

Поскольку символы включены в системный шрифт San Francisco, вы также можете использовать их в приложении для Mac, но при этом действуют лицензионные соглашения.

Могу ли я использовать символы везде?

Нет, определенно нет! Внимательно следите за действующими лицензионными соглашениями. Как цитата из Apple:

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

Запрещенные символы

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

Полный список этих символов можно найти в разделе Символы для использования как есть.

Как я могу просмотреть доступные символы?

Apple предоставляет приложение SF Symbols, которое позволяет просматривать, копировать и экспортировать любые доступные символы. Приложение можно скачать здесь, оно доступно для macOS 10.14 и новее.

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

Это отлично подходит для поиска нужного значка и нужного веса.

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

Экспорт символа

Приложение для Mac позволяет поддерживать все символы в формате SVG, используя File -> Export Symbol... или ⌘E. Это отличный способ включить символ в тех местах, где нельзя использовать сам шрифт. Однако помните о лицензионных соглашениях.

Просмотр символов в Интернете

Стоит отметить, что вы также можете просматривать символы на сайте sfsymbols.com/.

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

Однако из-за лицензионных ограничений они могут отображать только названия символов, поэтому вам лучше использовать приложение Mac.

Создание собственного символа

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

Сессия Введение в символы SF с WWDC 2019 дает подробное объяснение того, как использовать пользовательские символы.

Выбор правильного символа в качестве базовой ссылки

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

Большинство фигур также доступны без значков. Например, circle или circle.fill:

Это отличная отправная точка для вашего пользовательского символа.

Мне нужно поддерживать все веса и весы?

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

Экспорт и использование пользовательского символа

После того, как вы экспортировали свой символ в SVG, вы можете просто перетащить символ в свой Каталог активов в Xcode.

Он показывает предварительный просмотр вашего символа и позволяет вам настроить его имя, внешний вид, направление и локализацию.

Использование пользовательского символа в iOS 12 и ниже

Символы поддерживаются только в iOS 13 и новее. Apple проделала большую работу, чтобы упростить нам возврат к образу в случае более старой версии системы. Просто дайте своему изображению то же имя, что и пользовательский символ, и следующая строка кода вернется к изображению, если это необходимо:

let customSymbol = UIImage(named: "my_custom_symbol")

Как использовать символы SF в Swift

Чтобы использовать символ SF в Swift, вы можете использовать новый UIImage(systemName:) initializer:

let image = UIImage(systemName: "square.and.pencil")

Как видите, Apple упростила использование символов SF:

  • Найдите и найдите свой значок в приложении SF Symbols для Mac
  • Используйте ⇧⌘C, чтобы скопировать имя символа
  • Используйте имя внутри инициализатора UIImage(systemName:)
  • Используйте изображение внутри UIImageView, UIButton или любого другого элемента пользовательского интерфейса

Как изменить масштаб символа SF в Swift

Чтобы изменить масштаб символа SF, вы можете использовать конфигурацию символа UIImage.

Это позволяет вам установить шрифт, масштаб, размер, вес и стиль текста.

let smallConfiguration = UIImage.SymbolConfiguration(scale: .small)
let smallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: smallConfiguration)

По умолчанию масштаб установлен на medium, как вы можете видеть на следующей площадке Swift Playground:

Как изменить вес символа SF в Swift

Вес также можно изменить с помощью конфигурации символа UIImage.

let ultraLightConfiguration = UIImage.SymbolConfiguration(weight: .ultraLight)
let ultraLightSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: ultraLightConfiguration)

Это отличный способ лучше согласовать ваш символ с вашим дизайном.

Изменение конфигурации символа в UIImageView и UIButton

Классы UIImageView и UIButton имеют новое свойство preferredSymbolConfiguration, которое позволяет применять определенную конфигурацию к любым символам, установленным в представлении изображения.

let imageView = UIImageView(image: defaultSymbolImage)
let updatedConfiguration = UIImage.SymbolConfiguration(weight: .bold)
imageView.preferredSymbolConfiguration = updatedConfiguration

Это изменит символ всякий раз, когда он установлен в представлении изображения. Как вы можете видеть на следующем изображении Swift Playground, символ также приобретает синий цвет.

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

let heartImage = UIImage(systemName: "heart.fill")!
let redHeartImage = heartImage.withTintColor(.red, renderingMode: .alwaysOriginal)

Для кнопок он работает более или менее так же, используя метод UIButton.setPreferredSymbolConfiguration(_:forImageIn:). По умолчанию к системным кнопкам применяются стили .body и .large.

Комбинирование конфигураций

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

Вы можете легко сделать это с помощью метода applying.

let boldLargeConfig = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .bold, scale: .large)
let smallConfig = UIImage.SymbolConfiguration(scale: .small)
let boldSmallConfig = boldLargeConfig.applying(smallConfig)
let boldSmallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: boldSmallConfig)

Как вы можете видеть на следующей площадке, изображение меньше, но полужирно:

Выравнивание символов

Новый метод UIImage.withBaselineOffset(fromBottom:) позволяет применить новое смещение к изображению снизу изображения. Этот метод также может быть полезен при общем использовании изображений.

Как использовать символы SF в iOS 12 и ниже

К сожалению, вы не можете использовать символы SF непосредственно в iOS 12 и ниже, как в iOS 13 и выше. Если вы хотите использовать какие-либо символы в iOS 12 и ниже, вам необходимо экспортировать их из приложения SF Symbols для Mac, а затем импортировать их как обычные ресурсы в свой каталог активов.

Заключение

Apple сделала нам отличный подарок во время WWDC 2019 с более чем 1500 символами. Если у вас нет дизайнера или вы хотите работать быстро, вы можете использовать символы для создания красивого нативного приложения.

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

Спасибо!