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

Это руководство является частью моей серии Руководство по SwiftUI.

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

Важно! SF Symbols и SwiftUI совместимы только с iOS 13 или более поздней версии.

Если у вас нет существующего проекта для практики, сначала создайте новый, выполнив пошаговый процесс по этой ссылке.

Где символы научной фантастики

Приложение SF Symbol уже предустановлено на современных компьютерах Mac. Вы можете просто найти его, используя команду + пробел, введите "символы SF", затем выберите и откройте Символы SF.

Если у вас нет приложения SF Symbols на вашем Mac, вы можете скачать его на официальном сайте SF Symbols.

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

Удобный и безошибочный способ сделать это — сначала скопировать название нужного символа. Это можно сделать, щелкнув правой кнопкой мыши значок и выбрав «Копировать имя». Пример ниже показывает, что я выбираю изображение системы болтов.

Затем вставьте его под systemName следующим образом:

E.g.

Image(systemName: "bolt")

Изменение размера образа системы

SF Symbols создан для шрифта платформы Apple. Таким образом, при применении модификаторов он в основном рассматривается как шрифт.

Вы можете настроить размер системного изображения с помощью параметра размера модификатора .font.

E.g.

Image(systemName: "bolt")
    .font(.system(size: 400))

Изменение внешнего вида

Опять же, поскольку системное изображение рассматривается как шрифт, модификатор .foregroundColor может изменить его цвет.

E.g.

Image(systemName: "bolt")
    .foregroundColor(.blue)

Вы также можете добавить некоторые эффекты тени.

Image(systemName: "bolt")
    .font(.system(size: 400))
    .foregroundColor(.blue)
    .shadow(color: .gray, radius: 10, x: 0, y: 10)

Ожидайте еще одно руководство, связанное с изображениями, в нашей следующей статье SwiftUI.

Да пребудет с вами код,

-Дуга

Сноски: