Поваренная книга SwiftUI: изображения и иконки — Часть 2

Добавление иконки из 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)
  }
}

struct ContentView: View {

  var body: some View {

    Image(systemName: "pawprint.circle.fill")

      .font(.largeTitle)

      .foregroundColor(.blue)

  }

}

​

Предварительный просмотр должен выглядеть следующим образом:

Вы можете стилизовать символы SF так же, как и текст.

Вот что делает этот код:

• 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)
    }
  }
}

xxxxxxxxxx

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)

    }

  }

}

​

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

Вы можете легко модифицировать SF-символы с помощью модификатора symbolVariant.

Здесь 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)
        }
    }
  }
}

xxxxxxxxxx

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, и вы увидите следующее:

Использование вкладок с SF-символами на iOS.

Теперь смените таргет на macOS, и ваш вид будет выглядеть так:

Использование представления с вкладками с SF-символами на macOS.

И никаких изменений в коде!

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

Просмотр и поиск SF-символов

Чтобы просмотреть все варианты SF-символов в Xcode и найти подходящий, используйте Command-Shift-L для отображения библиотеки SwiftUI. Используйте строку поиска в верхней части, чтобы отфильтровать отображаемое. Дважды щелкните символ или перетащите его в свой файл, чтобы попробовать его в режиме просмотра.

Отобразите библиотеку, чтобы просматривать и искать SF-символы.

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

← Предыдущая статья: Изображения и иконки — Часть 1

Источник