Поваренная книга 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()
  }
}

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

Форматирование текста с помощью модификаторов в SwiftUI.

В этом примере вы используете модификатор fontWeight, чтобы сделать текст «Hello» жирным, и модификатор italic, чтобы выделить его курсивом. Затем с помощью оператора + вы объединяете еще одно представление Text, в котором отображается текст «World», и применяете к нему модификатор underline, чтобы подчеркнуть его.

Можно также применять несколько стилей форматирования, соединяя модификаторы в цепочку. Например:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .fontWeight(.semibold)
      .italic()
      .underline()
      .strikethrough(true, color: .red)
  }
}

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

Цепочка модификаторов для форматирования текста в SwiftUI.

Здесь вы используете модификатор 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!")
  }
}

Предварительный просмотр:

Текстовое представление SwiftUI с Markdown.

Это отображает представление 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)
  }
}

Предварительный просмотр:

Текстовое представление SwiftUI с AttributedString.

В этом примере 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, если он еще не существовал.

Файлы пользовательских шрифтов должны быть добавлены в Info проекта.

После установки пользовательских шрифтов они будут доступны во всем приложении.

Применение кастомных шрифтов в SwiftUI

Теперь, когда вы установили пользовательский шрифт, его легко применить к текстовым представлениям во всем проекте. Просто используйте модификатор font с аргументом Font.custom и укажите имя пользовательского шрифта, как показано ниже:

struct ContentView: View {
  var body: some View {
    Text("Rock Lobster")
      .font(.custom("Lobster-Regular",size: 36))
  }
}

Предварительный просмотр:

Google Fonts предлагает множество бесплатных пользовательских шрифтов, которые можно добавить в проект SwiftUI.

В этом примере вы используете аргумент .custom модификатора font, указывая имя и размер вашего пользовательского шрифта. Обратите внимание, что размер обязателен, а имя должно совпадать с именем файла шрифта, отображаемого в инспекторе Identity.

Использование пользовательских шрифтов в приложении SwiftUI может улучшить его общий вид и стиль. С помощью метода .custom можно легко создавать и применять пользовательские шрифты к представлениям Text.

← Предыдущая статья:  Тексты и шрифты — часть 1

Источник