Разработка
Поваренная книга SwiftUI: тексты и шрифты — часть 2
Форматирование текста очень важно при разработке пользовательских интерфейсов, поскольку оно помогает подчеркнуть определенные аспекты текста и облегчает его чтение
Форматирование текста в SwiftUI
Форматирование текста очень важно при разработке пользовательских интерфейсов, поскольку оно помогает подчеркнуть определенные аспекты текста и облегчает его чтение. В SwiftUI форматирование текста сделать очень просто, поскольку вы можете легко применять к нему различные стили оформления.
Для форматирования текста в SwiftUI можно использовать модификаторы fontWeight
, italic
, underline
и strikethrough
.
Например, вы хотите создать представление Text, в котором слово «Hello» будет выделено жирным шрифтом и курсивом, а слово «World» — подчеркнуто. Этого можно добиться с помощью следующего кода:
struct ContentView: View { var body: some View { Text("Hello ") .fontWeight(.bold) .italic() + Text("World") .underline() } }
Предварительный просмотр должен выглядеть следующим образом:
В этом примере вы используете модификатор fontWeight
, чтобы сделать текст «Hello» жирным, и модификатор italic
, чтобы выделить его курсивом. Затем с помощью оператора + вы объединяете еще одно представление Text, в котором отображается текст «World», и применяете к нему модификатор underline
, чтобы подчеркнуть его.
Можно также применять несколько стилей форматирования, соединяя модификаторы в цепочку. Например:
struct ContentView: View { var body: some View { Text("Hello, World!") .fontWeight(.semibold) .italic() .underline() .strikethrough(true, color: .red) } }
Предварительный просмотр должен выглядеть следующим образом:
Здесь вы используете модификатор fontWeight
со значением .semibold
, модификатор italic
, модификатор underline
и модификатор strikethrough
со значением true
, чтобы перечеркнуть текст красной линией.
Стилизация текста с помощью Markdown
Представление Text
в SwiftUI предоставляет два способа стилизации текста с помощью Markdown: непосредственно в представлении и с помощью AttributedString
. Использование Markdown непосредственно в представлении Text
может быть удобным для статического текста, но для динамических строк или когда вы хотите применить стили к различным частям строки программно, вам понадобится использовать AttributedString
.
Использование Markdown непосредственно в Text
Вы можете включить Markdown непосредственно в представление Text
, чтобы применить определенные стили. Вот пример:
struct ContentView: View { var body: some View { Text("**Bold** and _italic_ text!") } }
Предварительный просмотр:
Это отображает представление Text
с Bold
для жирного текста и Italic
для курсива.
Использование AttributedString для расширенной стилизации
Для более сложной или динамической стилизации лучше всего использовать инструмент AttributedString
. Он позволяет применять различные стили к разным частям строки. Вы можете смешивать модификаторы SwiftUI с атрибутами AttributedString
. Важно отметить, что атрибуты, применяемые с помощью AttributedString
, имеют приоритет перед модификаторами SwiftUI.
Вот пример, в котором к разным частям текста применяются разные стили:
let quote = """ **"Be yourself;** everyone else is _already taken._" - **Oscar Wilde** """ let attributedQuote = try! AttributedString(markdown: quote) struct ContentView: View { var body: some View { Text(attributedQuote) .font(.system(size: 16, weight: .medium, design: .serif)) .foregroundColor(.blue) } }
Предварительный просмотр:
В этом примере AttributedString
использует синтаксис Markdown, чтобы сделать «Be yourself;» и «Oscar Wilde» жирными, а «everyone else is already taken» курсивом. Когда эта AttributedString
передается в представление Text
, эти стили сохраняются.
Обратите внимание, что когда вы применяете модификаторы font
и foregroundColor
к представлению Text
, эти стили применяются ко всему тексту, но они не отменяют стили полужирного и курсивного начертания, указанные в AttributedString
. Это происходит потому, что стили, примененные через AttributedString
, имеют приоритет над модификаторами SwiftUI.
Использование кастомных шрифтов в SwiftUI
Пользовательские шрифты могут добавить уникальный штрих к дизайну вашего приложения и помочь создать фирменный стиль. В SwiftUI легко использовать пользовательские шрифты после того, как вы добавили их в свой проект.
Добавление пользовательских шрифтов в SwiftUI
Чтобы добавить пользовательский шрифт в проект SwiftUI, выполните следующие действия:
1. Скачайте и распакуйте файлы шрифта. Не забудьте внимательно прочитать лицензию на шрифт, если вы планируете распространять или продавать свое приложение. В приведенных здесь примерах используется шрифт Lobster, доступный в Google Fonts.
2. Перетащите файлы шрифтов в навигатор проектов Xcode. Можно перетащить сразу целую папку с файлами TrueType (.ttf) или OpenType (.otf). Примите настройки по умолчанию; вы ведь хотите копировать элементы, создавать группы и добавлять в текущую цель. Вы можете проверить, правильно ли был добавлен файл шрифта в текущую цель, выбрав его в навигаторе проекта, а затем открыв панель «Инспектор файлов» Xcode с помощью Command-Option-1. Выделите каждый файл шрифта в навигаторе проекта и убедитесь, что его принадлежность к Target указывает на цель вашего приложения.
3. Последний шаг — добавление ключа Fonts provided by application в Info.plist и установка его значения на только что добавленные шрифты. Для этого выберите проект в верхней части Навигатора проектов, затем выберите цель и вкладку Info. Чтобы добавить новый ключ, выберите любую строку в Custom iOS Target Properties, щелкните правой кнопкой мыши и выберите Add row. Прокрутите страницу до раздела Fonts provided by application, затем нажмите на треугольник раскрытия, чтобы развернуть строку, и введите путь к файлу пользовательского шрифта в вашем проекте. Обратите внимание, что при этом в проекте создается файл Info.plist, если он еще не существовал.
После установки пользовательских шрифтов они будут доступны во всем приложении.
Применение кастомных шрифтов в SwiftUI
Теперь, когда вы установили пользовательский шрифт, его легко применить к текстовым представлениям во всем проекте. Просто используйте модификатор font с аргументом Font.custom и укажите имя пользовательского шрифта, как показано ниже:
struct ContentView: View { var body: some View { Text("Rock Lobster") .font(.custom("Lobster-Regular",size: 36)) } }
Предварительный просмотр:
В этом примере вы используете аргумент .custom
модификатора font
, указывая имя и размер вашего пользовательского шрифта. Обратите внимание, что размер обязателен, а имя должно совпадать с именем файла шрифта, отображаемого в инспекторе Identity.
Использование пользовательских шрифтов в приложении SwiftUI может улучшить его общий вид и стиль. С помощью метода .custom
можно легко создавать и применять пользовательские шрифты к представлениям Text.
← Предыдущая статья: Тексты и шрифты — часть 1
-
Интегрированные среды разработки2 недели назад
Лучшая работа с Android Studio: 5 советов
-
Новости4 недели назад
Видео и подкасты о мобильной разработке 2024.43
-
Новости3 недели назад
Видео и подкасты о мобильной разработке 2024.44
-
Исследования2 недели назад
Поможет ли новая архитектура React Native отобрать лидерство у Flutter в кроссплатформенной разработке?