Разработка
Поваренная книга SwiftUI: изображения и иконки — Часть 2
SF Symbols — это набор из тысяч настраиваемых символов, разработанных для бесшовной интеграции с системными шрифтами Apple.
Добавление иконки из SF Symbols
SF Symbols — это набор из тысяч настраиваемых символов, разработанных для бесшовной интеграции с системными шрифтами Apple. Чтобы добавить иконку SF Symbol в SwiftUI, вы передаете аргумент systemName в представление Image, указывая имя символа, который вы хотите использовать.
Например, чтобы добавить значок отпечатка лапы, вы можете использовать следующий код:
struct ContentView: View { var body: some View { Image(systemName: "pawprint.circle.fill") .font(.largeTitle) .foregroundColor(.blue) } }
Предварительный просмотр должен выглядеть следующим образом:
Вот что делает этот код:
Image(systemName: "pawprint.circle.fill")
создает представлениеImage
с предоставленным системой изображением. АргументsystemName
указывает на то, что изображение является одним из SF-символов Apple, которые представляют собой набор из тысяч последовательных, легко настраиваемых символов, которые вы можете использовать в своих приложениях. В данном случае используется символ pawprint.circle.fill..font(.largeTitle)
устанавливает размер символа в соответствии с большим размером заголовка..foregroundColor(.blue)
устанавливает цвет изображения в синий.
Настройка вариантов SF-символов
Некоторые SF-символы имеют множество вариантов, которые вы можете легко настроить в SwiftUI с помощью модификатора symbolVariant
. Например, вы можете захотеть отобразить значок колокольчика с косой чертой или даже окружить колокольчик квадратом.
Вот как это можно сделать:
struct ContentView: View { var body: some View { VStack(spacing: 16) { // This renders a bell icon with a slash through it Image(systemName: "bell") .symbolVariant(.slash) // This surrounds the bell with a square Image(systemName: "bell") .symbolVariant(.square) // This renders a bell icon with a slash through it and fills it Image(systemName: "bell") .symbolVariant(.fill.slash) } } }
Ваш предварительный просмотр должен выглядеть следующим образом:
Здесь ContentView
содержит VStack
изображений, каждое из которых имеет свой вариант SF-символа «колокольчик».
- Первое изображение отображает символ «колокольчик» с косой чертой. Для этого используется модификатор
.symbolVariant(.slash)
. - На втором изображении символ «колокольчик» окружен квадратом. Для этого используется модификатор
.symbolVariant(.square)
. - На третьем изображении заполненный символ «колокольчик» дополнен косой чертой, проходящей через него. Это достигается путем комбинирования двух вариантов с помощью модификатора
.symbolVariant(.fill.slash)
.
Настройка вариантов SF-символов обеспечивает большую гибкость при использовании SF-символов и позволяет настроить внешний вид иконки в соответствии с дизайном и функциональностью вашего приложения.
Адаптация SF символов к контексту
Одна из ключевых функций SwiftUI — возможность отображения символов SF в зависимости от их контекста. Это особенно важно в TabView
, где правильный вариант символа зависит от системы: в iOS руководство Apple по человеческому интерфейсу рекомендует использовать заполненные иконки, а в macOS — скругленные прямоугольники.
SwiftUI решает эту проблему хитро: если вы используете SF Symbol для элемента вкладки, не нужно указывать, заполнен он или нет — он автоматически адаптируется в зависимости от системы.
Рассмотрим следующий пример:
struct ContentView: View { var body: some View { TabView { Text("Your View Here") .tabItem { Label("Home", systemImage: "person") .symbolVariant(.none) } Text("Your Activity View Here") .tabItem { Label("Activity", systemImage: "bell") .symbolVariant(.none) } } } }
Запустите его в симуляторе iOS, и вы увидите следующее:
Теперь смените таргет на macOS, и ваш вид будет выглядеть так:
И никаких изменений в коде!
В этом примере элемент вкладки, использующий символ «человек», будет отображаться заполненным на iOS, но округлым на macOS, что позволяет создать нативный вид и ощущение на обеих платформах.
Просмотр и поиск SF-символов
Чтобы просмотреть все варианты SF-символов в Xcode и найти подходящий, используйте Command-Shift-L для отображения библиотеки SwiftUI. Используйте строку поиска в верхней части, чтобы отфильтровать отображаемое. Дважды щелкните символ или перетащите его в свой файл, чтобы попробовать его в режиме просмотра.
Узнать больше о SF Symbols вы можете с помощью приложения SF Symbols от Apple. Оно позволяет изучать цветовые вариации, режимы рендеринга и слои, открывая множество интересных возможностей для дизайна.
← Предыдущая статья: Изображения и иконки — Часть 1
-
Новости1 месяц назад
Видеозвонки с Лили, Приключения и пианино — обновления Duolingo
-
Новости1 месяц назад
Видео и подкасты о мобильной разработке 2024.39
-
Видео и подкасты для разработчиков1 месяц назад
Lua – идеальный встраиваемый язык
-
Новости1 месяц назад
Poolside, занимающийся ИИ-программированием, привлек $500 млн