Приветствую вас в серии уроков по SwiftUI!
В чём особенность этих уроков?
Основаны на книге "Mastering SwiftUI" от Appcoda: Мы берем за основу материал этой книги, но не слепо следуем ей.
Интерпретация и перевод: Мы адаптируем материал книги для русскоговорящей аудитории, делая его более понятным и удобным для восприятия.
Для начинающих и опытных: Эти уроки подойдут как тем, кто только начинает изучать SwiftUI, так и тем, кто хочет узнать что-то новое об этом фреймворке.
Чего вы можете ожидать?
Пошаговое изучение SwiftUI: Мы будем проходить все основные темы, от простых до сложных.
Практические примеры: Вы сможете закрепить полученные знания, выполняя практические задания.
Присоединяйтесь к этой серии!
Ставьте лайки и пишите комментарии: Это поможет мне сделать эти уроки еще лучше и понятнее.
Делитесь своими знаниями: Расскажите другим о том, что вы узнали.
Давайте начинать
Создание нового проекта для работы с SwiftUI
Сначала запустите Xcode и создайте новый проект, используя шаблон App в категории iOS. Apple обновила некоторые из шаблонов проектов. Если вы ранее использовали более старую версию Xcode, шаблон Single Application теперь заменён на шаблон App.
Нажмите "Далее", чтобы перейти к следующему экрану, и введите имя проекта. Я задал его как SwiftUIText, но вы можете использовать любое другое имя. Для имени организации вы можете указать название вашей компании или организации. Идентификатор организации - это уникальный идентификатор вашего приложения. Здесь я использую com.swiftexplorer, но вам следует задать своё собственное значение. Если у вас есть веб-сайт, укажите ваш домен в обратной доменной записи.
Чтобы использовать SwiftUI, вам необходимо выбрать SwiftUI в опции Interface. Язык должен быть установлен на Swift. Нажмите "Далее" и выберите папку для создания проекта.
После сохранения проекта Xcode должен загрузить файл ContentView.swift и отобразить холст для дизайна/превью. Если вы не видите дизайн-холст, вы можете перейти в меню Xcode и выбрать Editor > Canvas, чтобы включить его. Чтобы освободить больше места для написания кода, вы можете скрыть навигатор проекта и инспектор.
По умолчанию Xcode генерирует некоторый код SwiftUI для файла ContentView.swift. В Xcode 14 холст превью должен автоматически отображать предварительный просмотр приложения в симуляторе, который вы выбираете в селекторе симулятора (например, iPhone 15 Pro). Для более старых версий Xcode вам может потребоваться нажать кнопку "Возобновить", чтобы увидеть предварительный просмотр.
Отображение простого текста
В сгенерированном примере кода в ContentView показано, как отобразить одну строку текста и изображения. Также используется VStack для вложения текста и изображения в вертикальный стеквью. Мы обсудим изображения и стеки в последующих частях. Сейчас давайте сосредоточимся на использовании Text.
Для отображения текста на экране вы инициализируете объект Text и передаете ему текст (например, Hello World) для отображения.
Обновите код body следующим образом:
Text("Привет Swift UI!")
Холст предварительного просмотра должен отображать «Привет Swift UI!» на экране. Это базовый синтаксис для создания текстового представления. Вы можете свободно изменить текст на любое значение, и холст должен мгновенно отобразить изменение.
Изменение шрифта и цвета
В SwiftUI вы можете изменять свойства (например, цвет, шрифт, насыщенность) элемента управления, вызывая методы, известные как Модификаторы.
Допустим, вы хотите сделать текст жирным. Вы можете использовать модификатор fontWeight и указать предпочитаемую насыщенность шрифта (например, .bold) следующим образом:
.fontWeight(.heavy)
Вы получаете доступ к модификатору, используя синтаксис точки. Когда вы вводите точку, Xcode покажет вам возможные модификаторы или значения, которые вы можете использовать. Например, когда вы вводите точку в модификаторе fontWeight, вы увидите различные варианты насыщенности шрифта.
Вы можете выбрать жирный (bold), чтобы сделать текст жирным. Если вы хотите сделать его еще более жирным, используйте heavy или black.
Вызывая fontWeight с значением .bold, вы получаете новое представление с жирным текстом. Интересно то, что в SwiftUI вы можете дополнительно связывать это новое представление с другими модификаторами. Скажем, вы хотите сделать жирный текст немного крупнее, вы пишете код следующим образом:
.font(.title)
Поскольку мы можем цеплять несколько модификаторов вместе, мы обычно пишем код таким образом:
// - Обратите внимание -• каждый • новый - модификатор - с новой • строки-
Text ("Привет Swift UI!")
.fontWeight(.bold)
.font(.title)
.padding()
.background(ignoresSafeAreEdges: .bottom)
Функциональность несмотря на такой синтаксис никак не ломается, но зато повышается читабельность. Я буду продолжать использовать эту конвенцию написания кода в течение всех частей этой серии статей.
Модификатор шрифта позволяет вам изменить его свойства. В приведенном выше коде мы указываем тип шрифта заголовка, чтобы увеличить размер текста. SwiftUI поставляется с несколькими встроенными стилями текста, включая title, largeTitle, body и т. д. Если вы хотите дополнительно увеличить размер шрифта, замените .title на .largeTitle.
Примечание: Вы всегда можете обратиться к документации, чтобы узнать все поддерживаемые значения модификатора шрифта.
Вы также можете использовать модификатор шрифта, чтобы указать дизайн шрифта. Допустим, вы хотите, чтобы шрифт был моноширинный. Модификатор шрифта можно написать так:
.font(.system(.title, design: .monospaced))
Здесь вы указываете использовать системный шрифт с текстовым стилем заголовка и моноширинным дизайном. Холст предварительного просмотра должен немедленно отреагировать на изменение и показать вам новый текст.
В IOS имеется поддержка динамических типов, пользователь может сам установить удобный для него размер текста в настройках своего айфона (Настройки > Дисплей и яркость > Размер текста)
За счет этого, при использовании текстовых стилей (например, .title), размер шрифта будет изменяться, и ваше приложение будет автоматически масштабировать текст в зависимости от предпочтений пользователя.
Если же вы хотите использовать фиксированный размер шрифта, то указывайте его следующим образом:
.font.system(size: 40))
Этот фрагмент кода говорит системе использовать шрифт фиксированного размера равному 40 поинтам.
Вы можете связать другие модификаторы для еще большей настройки текста. Давайте изменим цвет шрифта. Для этого используйте модификатор цвета foregroundColor следующим образом:
.foregroundColor(.orange)
foregroundColor Модификатор принимает значение Color. Мы указали .orange , этот цвет является одним из встроенных в систему. Разумеется вы можете использовать и другие цвета, которые поставляются из коробки .red , .purple , и другие.
Хотя я предпочитаю настраивать свойства элемента управления путем написания кода, также можно использовать холст дизайна для их редактирования. Наведите курсор на элемент текста и левой кнопкой мыши вызовите контекстное меню в котором выберите Show SwiftUI Inspector
В этом меню вы можете менять различные свойства вашего шрифта или других модификаторов, также добавлять новые.
При этом любое изменение которое вы добавите в таком инспекторе, также будет моментально отображено на вашем экране превью
Работа с многостроковым текстом
Text поддерживает многострочный текст по дефолту, он может отобразить каждую новую строку без каких либо специальных модификаторов. Замените код следующим образом:
Text("SwiftUI - это фреймворк • с • набором готовых - библиотек для создания пользовательского интерфейса • в iOS-приложениях. Этот - инструмент, разработанный Арре, пришёл на смену UIKit - последний почти во - всём - устраивал - разработчиков, • но • создание элементов в части- UI - занимало много времени. SwiftUI не стоит путать со Swift - языком программирования, • с-помощью которого пишут приложения для платформы - Apple.)
.fontWeight(.bold)
.font(.headline)
.foregroundColor(.orange)
Разумеется можете вставить любой собственный текст, главное сделайте его настолько большим чтобы увидеть как работает многострочность. Как только вы произведете изменения, дизайн канвас отрендерит многострочный текст.
Чтобы выровнять текст по центру, добавьте multilineTextAlignment модификатор и установить его значение на .center следующим образом:
.multilineTextAlignment(.center)
В некоторых случаях можно и ограничить количество строк определенным количеством. Используйте модификатор lineLimit для управления этим свойством. Вот пример:
.lineLimit(4)
Еще один модификатор, truncationMode указывает, где обрезать текст в текстовом представлении. Вы можете обрезать в начале, середине или конце текстового представления. По дефолту, система обрезает конец текста. Чтобы изменить режим обрезки текста, используйте модификатор
truncationMode и установите значение на .head или .middle следующим образом:
.truncationMode(.middle)
Ранее я говорил о том, что Text поддерживает несколько строк по дефолту. Причина этому поведению заключается в том, что в SwiftUI установлено значение nil для модификатора lineLimit. Попробуйте сами поменять это значение в ручную и посмотрите на результат:
.lineLimit(nil)
Установка Padding и Line Spacing
Обычно интервал между строками по умолчанию выглядит вполне удовлетворительно для большинства ситуаций. Чтобы изменить настройку по умолчанию, можно корректировать интервал с помощью модификатора lineSpacing.
.lineSpacing(10)
Помимо этого, можно заметить что наш текст находится слишком близко к левой и правой стороне по краям устройства. Можно использовать модификатор padding, который добавит дополнительное пространство к каждой стороне текста. Вставьте еще одну строку кода:
.padding()
Теперь наш текст имеет больший отступ от каждой из сторон.
Вращение текста
Фреймворк SwiftUI предоставляет модификатор, который позволяет легко вращать текст. Можно использовать rotationEffect и передать в него степень вращения следующим образом:
.rotationEffect(.degrees(45))
После вставки этого фрагмента когда, наш текст повернулся на 45 градусов.
По дефолту, поворот происходит вокруг точки в центре той вью которую вы хотите крутить. Однако если вы хотите крутить вью вокруг какой то другой специфичной точки, это тоже можно осуществить:
.rotationEffect(.degrees(45), anchor: .top)
Для этого нам потребовался атрибут anchor и как вы видите мы можем указать через точечный синтаксис заранее подготовленные точки такого якоря, а можно и указать конкретную специфическую точку:
.rotationEffect(.degrees(45), anchor: UnitPoint(x: 0, y:0))
SwiftUI также позволяет крутить вьюшки не только в 2D перспективе, но и в 3D. В этом нам поможет модификатор rotation3DEffect, он принимает два параметра: угол поворота и ось. Замените код связанный с поворотом на следующий.
.rotation3DEffect(.degrees(60), axis: (x: 1.0, y: 0.0, z: 0.0))
У нас получился текст похожий на титры к Звездным Войнам
Вы также можете вставить следующую строку кода чтобы создать эффект тени для перспективного текста:
.shadow(color: .black, radius: 2, x: 0, y: 10)
Модификатор .shadow применит эффект тени к тексту. Все, что вам нужно сделать, это указать цвет и радиус тени. При желании вы можете указать системе положение тени, указав значения по x и y.
Использование кастомных шрифтов
Как вы заметили по дефолту у нас используется некий системный шрифт, но что делать если мы хотим какой-то свой собственный шрифт?
Представим, что вы нашли какой то шрифт или ваш дизайнер изготовил для вас его, мы кстати скачали его с ресурса с бесплатными шрифтами - https://www.1001freefonts.com
После скачивания этот шрифт необходимо добавить в наш проект, давайте это сделаем.
При копировании обязательно добавьте ваш шрифт к таргету.
После добавления файла шрифта вы все равно не можете использовать шрифт напрямую. Xcode требует, чтобы разработчики зарегистрировали шрифт в конфигурации проекта. В навигаторе проекта выберите SwiftUIText, а затем нажмите SwiftUIText в разделе таргетов.
Выберите вкладку «info», на которой отображается конфигурация проекта.
Вы можете навести курсор на BundleName и выбрать Добавить строку.
Установите имя ключа на Fonts provided by application
Затем раскройте эту запись и установить для нулевого элемента значение Bombing.ttf, который и является файлом нашего шрифта. Разумеется если у вас несколько шрифтов, то вы всегда можете добавить еще несколько строк к этому ключу.
Теперь можно возвращаться обратно к нашему ContentView, замените код еще раз на следующий:
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Swift UI \n Apple")
.fontWeight(.bold)
.foregroundColor(.orange)
.multilineTextAlignment(.center)
.lineSpacing(10)
.padding()
.font(.custom("Bombing", size:60))
}
.padding()
}
}
Как вы видите мы загрузили свой собственный шрифт и получили текст в стиле граффити.
Отображение Markdown Text
SwiftUI имеет встроенную поддержку рендеринга Markdown. Если вы не знаете, что такое Markdown, это инструмент который позволяет стилизовать обычный текст, используя легко читаемый формат. Чтобы узнать больше о Markdown, вы можете посмотреть это руководство (https://www.markdownguide.org/getting- start/).
Чтобы использовать Markdown для разметки текста, все что вам нужно сделать, это указать текст в Markdown. Текстовое представление в SwiftUI автоматически отображает текст для вас с такой редакцией. Вот пример:
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("**Это жирный текст**, *Это курсив*, а еще можно делать ссылки [кликните тут](https://t.me/swiftexplorer)")
.foregroundColor(.orange)
.multilineTextAlignment(.center)
.lineSpacing(10)
.padding()
}
.padding()
}
}
Итоги
Надеюсь что вам понравилось создавать пользовательский интерфейс с помощью SUI. Декларативный синтаксис делает код более читаемым и понятным. Как вы заметили в отличие от UIKit создание текста в 3D стиле потребует от вас буквально одной строки кода в SwiftUI и таких примеров здесь очень много.
Подписывайтесь на мой телеграм канал - https://t.me/swiftexplorer
В ближайшее время выйдут следующие части уроков по SwiftUI.
Спасибо за прочтение!