SF Symbols и Render Mode

SF Symbols и Render Mode

Как работают Monochrome, Hierarchical, Palette, Multicolor Render для SF Symbols.


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

Содержание


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

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

Render Modes в SFSymbols.

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


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)

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

Hierarchical Render в SFSymbols.

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 цвета, третий игнорируется.

Palette Render в SFSymbols.

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:

Multicolor Render в SFSymbols.

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 в проектах.


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

Альтернативные иконки для тестов Product Page Optimization

Как добавить альтернативные иконки для A/B тестов на странице приложения.

Поиск и модификатор ´Searchable´ в SwiftUI

Поиск в SwiftUI. Работаем с модификатором Searchable.

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

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

Прототип вью и модификатор ´redacted´ в SwiftUI

Делаем прототип вью в SwiftUI. Скелет интерфейса, пока контент загружается.

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

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