Пользовательские SF Symbols

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

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

Этот подход действительно работает и позволяет мне визуализировать активы изображений переменного размера с точностью до пикселя. Тем не менее, это действительно неудобно и не совсем то, что SwiftUI ожидает от вас. Таким образом, вы упускаете такие моменты, как выравнивание текста по базовой линии и автоматическое масштабирование с помощью Dynamic Type.

Итак, сегодня я решил, что должен пристегнуться и попробовать свои силы в создании некоторых пользовательских SF Symbols. Мне нужен символ для представления человека в инвалидной коляске для «Режима инвалидной коляски» в Pedometer++.

Я следовал этому руководству, которое адаптировало инструкции с сайта компании Apple для разработчиков конкретно к тому, что мне нужно было сделать в Sketch (мой любимый векторный редактор в настоящий момент).

Процесс довольно прост:

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

• Выбрать File → Export Template in SF Symbols.

• Открыть этот файл в Sketch.

• Заменить слои с Symbols новыми формами символов.

• Экспортировать из Sketch в формате SVG.

• Перетащить получившийся SVG в SF Symbols.

Теперь у вас есть собственный символ в SF Symbols, который вы можете настроить по своему усмотрению. Например, я разъединил колеса этой инвалидной коляски. Так что, если мне когда‑нибудь понадобится, я могу раскрасить их отдельно от контура человека.

Затем я выбираю File → Export Symbol, и у меня есть собственный символ.

Теперь вместо моего старого подхода, основанного на фигуре, я могу ссылаться на этот символ так же, как на любой символ systemNamed.

А вот и в действии (слева новый, справа старый):

Если вам интересно, вот ссылка на вывод SVG этого процесса: cfc‑wheelchair.svg.

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

Глиф — это физическое представление символа в заданном шрифте.

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