SF Symbols 3 - Код Воробья
Новое в iOS 15

SF Symbols 3

Вместе c iOS 15 обновили SF Symbols до 3-ей версии. Добавили 600 новых символов и разные способы покрасить их. Некоторые символы получили вариации форм.

developer.apple.com

Имя Автора
Автор Иван Воробей iOS разработчик. Пишу библиотеки, веду телеграм-канал.

Примеры кода будут для SwiftUI и UIKit. Внимательно следите за совместимостью символов - не все доступны для 14 и предудыщих iOS. Глянуть с какой версии доступен символ можно в приложении.

Render Modes

Render Modes - это отрисовка иконки в цветовой схеме. Доступны монохром, иерархический, палетка и мульти-цвет. Наглядное превью:

SFSymbols Render Modes Preview

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

Monochrome Render

Иконка целиком красится в указанный цвет. Цвет управляется через tintColor.

// UIKit
let image = UIImage(systemName: "doc")
let imageView = UIImageView(image: image)
imageView.tintColor = .systemRed

// SwiftUI
Image(systemName: "doc")
    .foregroundColor(.red)

Способ работает для любых изображений, не только для SF Symbols.

Hierarchical Render

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

// UIKit
let config = UIImage.SymbolConfiguration(hierarchicalColor: .systemIndigo)
let image = UIImage(systemName: "square.stack.3d.down.right.fill", withConfiguration: config)

// SwiftUI
Image(systemName: "square.stack.3d.down.right.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(.indigo)

Обратите внимание, иногда рендер с моно-цветом совпадает с иерархическим.

SFSymbols Hierarchical Render

Palette Render

Отрисовывает иконку в кастомных цветах. Каждому символу нужно опредленное количество цветов.

// UIKit
let config = UIImage.SymbolConfiguration(paletteColors: [.systemRed, .systemGreen, .systemBlue])
let image = UIImage(systemName: "person.3.sequence.fill", withConfiguration: config)

// SwiftUI
Image(systemName: "person.3.sequence.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.red, .green, .blue)

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

SFSymbols Palette Render

Multicolor Render

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

// UIKit
let config = UIImage.SymbolConfiguration.configurationPreferringMulticolor()
let image = UIImage(systemName: "externaldrive.badge.plus", withConfiguration: config)

// SwiftUI
Image(systemName: "externaldrive.badge.plus")
    .symbolRenderingMode(.multicolor)

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

SFSymbols Multicolor Render

Symbol Variant

Некоторые символы имеют поддержку форм, например колокольчик bell можно вписать в квадарт или круг. В UIKit нужно вызывать их по имени - например, bell.square, но в SwiftUI есть модификатор .symbolVariant():

// Колокльчик перечеркнут
Image(systemName: 'bell')
    .symbolVariant(.slash)

// Вписывает в квадарт
Image(systemName: 'bell')
    .symbolVariant(.square)

// Можно комбинировать
Image(systemName: 'bell')
    .symbolVariant(.fill.slash)

Обратите внимание, в последнем примере можно комбинировать варианты символов.

Адаптация

SwiftUI умеет отображать символы соотвественно контексту. Для iOS Apple использует залитые иконки, но в macOS иконки без заливки, только линии. Если вы используете SF Symbols для Side Bar, то не нужно указывать, залитый символ или нет - он будет автоматически адаптироваться в зависимости от системы.

Label('Home', systemImage: 'person')
    .symbolVariant(.none)

Это все изменения в новой версии. Напишите в коментариях к посту была ли полезна статья, и используете ли SF Symbols в проектах.


Другие туториалы

Часть 1: Коллекция и Таблица

Drag и Drop

Как изменить порядок ячеек в коллекции и таблице. Как перенести ячейки в другую коллекцию. Перемещение нескольких ячеек группой.

Новое в iOS 15

StoreKit 2

Apple пересмотрела логику покупок и переписала StoreKit. Буду много хвалить - крутой апдейт этого года.

Интерфейс в UIKit

Жизненный цикл UIViewController

Рассмотрим когда вызываются методы контроллера и что можно делать внутри них. Когда настраивать вьюхи и данные.

Подборка

Ресурсы для iOS разработчиков

Подборка полезных ссылок для iOS разработчиков. Структурирована по формату материала. Есть раздел с русскими ресурсами.

В telegram-канале приходят уведомления о новых туториалах. В чате для iOS разработчиков ответят на вопросы.

Открыть Telegram-канал