swift верстка в коде
10 главных конструкций языка Swift
Быстрый гайд по языку.
Чтобы быстро начать программировать на языке, достаточно знать несколько основных конструкций и общих правил написания кода. Со временем вы освоите все нюансы, а на старте можно использовать что-то попроще.
Мы уже писали про Swift — что умеет этот язык и для чего он нужен. Теперь посмотрим, из чего он состоит и как можно быстро вникнуть в код на Свифте.
О чём пойдёт речь
🤔 Мы обещали 10 конструкций, но в итоге получилось 12. Простите 🙂
Переменные
В Swift используют две основных команды:
Тип данных можно не указывать, язык сам разберётся, что к чему:
var myVar = 42
let myConst = 42
Если нужно указать, что переменная должна иметь дробную часть, то делают так:
var myVar: Double = 40
Обратите внимание — Свифт не требует точки с запятой после каждой команды (и не считает ошибкой, если вы их поставите). Но если вы захотите написать несколько команд на одной строке, то точка с запятой понадобится, чтобы отделить одну команду от другой:
var s = 20; let q = ‘string’
Комментарии
Комментарии оформляются так же, как и в JavaScript — двойным слешем:
// привет, это комментарий
Ввод данных с клавиатуры
Чтобы ввести данные с клавиатуры, применяют команду readLine(). С её помощью можно ввести любые значения в какую угодно переменную, если ей подойдёт то, что мы написали.
Вывод данных в терминал
Для стандартного вывода данных можно использовать команду print() или println(). Они отличаются тем, что в первой команде курсор остаётся на той же строке, а во второй курсор после вывода перейдёт на новую строчку.
Присваивание и сравнение
Присваивание обозначается одним знаком равно, а проверка на равенство — двумя:
Ещё есть другие, тоже привычные всем операторы сравнения:
Эта функция ничего не возвращает, а при вызове hello() просто выводит на экран нужную фразу.
Если мы хотим передать в функцию какие-то параметры, то их нужно прописать в круглых скобках при объявлении:
Чтобы функция возвращала какое-то значение, мы должны указать тип этого значения, например, что функция вернёт строку или число:
Классы
Классы определяются так, как это принято в ООП — сначала идёт название класса, потом переменные (свойства класса) и функции (методы класса, если они нужны):
Объекты
Чтобы создать новый объект на основе класса, берут переменную и присваивают ей значение этого класса. После этого можно работать с любыми свойствами объекта, прописанного в классе, и вызывать любые методы:
👉 Если пока не знаете, зачем нужны классы и объекты, прочитайте наш цикл статей про объектно-ориентированное программирование.
Что ещё
Или оставайтесь у нас, мы будем рассказывать про технологии и программирование на русском 🙂
Swift UI — галопом по Европам
22:35. Восторг
Просмотрел WWDC 2019 Key Notes. Ожидаемый декларативный UI действительно стал явью, и это воистину событие вселенского масштаба для мира iOS-разработки. «Надо написать об этом статью», — подумал я и еще тысячи iOS-разработчиков по всему миру, пребывающих в состоянии экзальтации.
05:30. Туториалы
Swift UI — новый framework, разработанный Apple, написан на Swift, предназначен для декларативного описания UI в коде.
Заметил, что с каждым годом в плане документации у «Яблока» становится все круче и круче. В этот раз под Swift UI они запилили несколько полноценных туториалов с пошаговым добавлением и интерактивным отображением результата на view, а в конце еще заботливо добавили контрольные вопросы для закрепления пройденного. Ну прям сказка! Там же — ссылки на example-проекты.
Красиво!
Не буду пересказывать туториал на русском языке, в таком прекрасном виде его лучше потыкать в первоисточнике. Опишу свои впечатления и наблюдения по поводу всей этой истории cо Swift UI и немного побалуюсь с ним.
07:00. Установка
В новом Xcode появился новый режим редактирования кода — Editor And Canvas.
Канвас я увидел не сразу — для этого мало скачать Xcode 11.0, нужно еще обновить и Макось до 10.15. Без нее Xcode работать будет, но без прелестей в виде канваса и, возможно, чего-то еще.
Порадовало, что, когда выделяешь код, выделятся и соответствующий ему элемент в канвасе.
Новая ось, exampl’ы запущены. Крашится? Ну да, бывает. Подсветка отваливается? Нет конечно — в Xcode такого же никогда не было 😉 Но канвас работает, и изменения вьюшки отражаются моментально, если это не таблица со сложными ячейками.
09:22. Новый проект
При создании нового проекта теперь доступна опция Use Swift UI и проект создается с соответствующей конфигурацией.
Ну а сама Default Configuration лежит в Info.plist и SceneDelegate указывается там же. Все встало на свои места.
Но вернемся к SceneDelegate — запуск происходит именно в нем.
Протокол View прост до неприличия:
Тут просто: мы создаем вью из уже реализованных Views and Controls | Apple Developer Documentation. Могли бы сделать ее посложнее, используя различные контейнеры View Layout and Presentation | Apple Developer Documentation и вью, которые уже создали мы сами.
Попробуем же создать экран с примитивной таблицей:
Всё. Готово. Просто, лаконично, элегантно. Вот она вся прелесть от декларативного UI!
Видно, что List — это таблица под капотом. Но не UITableView, а некая UpdateCoalesingTableView.
А еще видно, что нет автолэйаута. Нет contstaint’s, всё на фреймах, а значит, нет этих сложных систем с линейными уравнениями и кучей расчетов. Но, с другой cтороны, верстка выходит адаптивной и фрейм как-то да рассчитывается — посмотрим в дальнейших сессиях WWDC, как именно.
Swift UI — обертка ли это над UIKit’ом? Похоже, что и да, и в то же время нет.
Joe Groff пишет следующее у себя в твиттере:
«Некоторые сущности — это обертки над UI/NS views, но тот факт, что они это делают, и то, какого типа вьюшку они оборачивают, — это вещь, которая может меняться».
Оригинал:
Some things wrap UI/NS views, but whether they do, and what view type they wrap, is subject to change. Best to think about it as a distinct thing.
11:00. Итого
Увы, все эти прелести
То есть переходить на них — это отказываться от старых осей, что слишком радикально и лишено заботы о пользователе.
Уверен, что механизм пока сырой, будет еще немало изменений, да и багов всплывет уйма, и это естественно. Но через год-два можно будет внедрять в прод.
Swift UI — прям революция в мире человеков, называющих себя iOS-разработчиками, и круто, что эта новая дорога, пусть и не идеальная, открылась.
Ну а пока ничего не мешает использовать это в своих пет-проектах, набивать руку и получать эстетическое наслаждение 🙂
Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift
Обучение Swift, Xcode Storyboard, Auto Layout и Designable Views
Необходимо ли обучение Swift и Xcode для дизайнера?
В прошлом году я писал Главу 3 под Objective-C и Xcode 5. С тех пор многое кардинально изменилось. Код Swift существенно упростился, из-за чего он стал одним из самых популярных языков для разработки приложений. Xcode 6 представил ряд новых инструментов, включая Playground, Vector Assets и Designable Views. Кроме того, Адаптивные макеты стали невероятно востребованы в связи с выходом iPhone 6 и 6 Plus.
Читайте также:
Глава 1. Обучение Swift и Xcode для дизайнера, создание своего приложения на Swift
Мобильные разработки продолжают развиваться экспоненциально, составляя наибольшую часть прибыли разработчиков. Apple заплатил за это 10 миллиардов долларов в 2014 году. Прототипирование стало одним из самых привлекательных навыков для дизайнеров. Какой инструмент использовать – быструю программку вроде Pixate, более мощный инструмент вроде Framer или же Storyboard в Xcode – спорный вопрос. Но, несомненно, навыки работы в этих программах пригодятся вам в дальнейшем.
Лично я потратил 14 лет своей жизни на создание вебсайтов. Помимо Photoshop и Sketch я изучил CSS, HTML и Javascript. Эти навыки я ни за что бы ни продал. Они позволили мне быть там, где я сейчас нахожусь. Зная, как реализовать свой собственный дизайн в коде, вы значительно расширяете свои возможности. Это позволяет тестировать и отлаживать процесс дизайна в реальном времени. Это отладка за счет вашего понимания разработки, которая позволит избежать типичных ошибок в дизайне, которые могут стоить недель вашего времени.
Ни один дизайнер не захочет потратить неделю только на то, чтобы узнать, что его задумка не сработает.
Зная, как пользоваться Storyboard, Auto Layout и чуть-чуть навыков в Swift не только позволит вам создать собственное приложение, но и частично перенять на себя нагрузку по разработке. Вы сможете работать нога в ногу со своей командой, выполняя итерации вместе с программистами. Скорость развития проекта ограничена скоростью выполнения самого медленного процесса. Разработка занимает 80% времени, а 20% приходятся на визуальный дизайн. Есть еще 30%, которые вы можете взять на себя. Поскольку дизайнеры получили возможность обучиться для этой части, можно серьезно оптимизировать работу всей команды.
В этой главе мы научимся, как заполучить те недостающие 30%. Я буду описывать с точки зрения дизайнера.
Быстрое прототипирование
Несмотря на то, что Xcode предоставляет действительно мощные возможности, он также хорош для создания простых прототипов. И все это без единой строки кода.
Переходы
Есть 6 типов переходов между экранами в iOS: Cover Vertical (наплыв по вертикали), Flip Horizontal (горизонтальное листание), Cross Dissolve (перекрестное растворение), Partial Curl (частичный вихрь), None (эффект отсутствует) и Push (вытеснение) (требует Navigation Controller).
Бонус: если вам нужно скачать демо-проект Xcode для этого урока, он здесь. Полностью реализован в Storyboard.
Проектирование дизайна в Storyboard
Storyboard работает очень похоже на артборды в Sketch. Он становится невероятно интуитивным и простым инструментом, как только вы избавляетесь от страха перед Xcode. В Storyboard вы можете управлять пользовательским интерфейсом своего приложения самым обычным образом. Это даже проще, чем HTML и CSS, потому что вам не нужно учить код (еще пока не нужно), чтобы добраться до этого этапа.
Как дизайнеру, вам будет полезно уметь внедрять свой дизайн в код приложения, не говоря уже о том, что это очень интересно. Нам повезло иметь такой функциональный инструмент, как Storyboard. Даже разработчики пользуются им. С ним вы сможете не только прототипировать, но и создавать высококачественную верстку на уровне конечного кода продукта.
Адаптивная верстка
Адаптивная верстка – один из самых важных навыков, которые вы можете развить. В будущем, где количество мобильных устройств и размеров экранов постоянно растет, мы уже не можем позволить себе застрять на статическом дизайне.
Auto Layout
Авто-макет требует 2 параметра: позиция и размер. Для построения автоматически подстраиваемого дизайна этого достаточно. Для этого нужны два инструмента: Align и Pin.
Установка ограничений между двумя объектами
Помните смарт-гайды и измерение расстояний в Sketch? Ограничения – это что-то вроде них, только применяется для адаптации вашего макета.
Инструмент Preview (предпросмотр)
Инструмент Preview в Assistant Editor позволяет быстро проверить, как дизайн будет смотреться на iPhone 3.5’, 4’, 4.7’, 5.5’ и iPad в портретном и альбомном режимах без необходимости запускать приложение на каждом устройстве.
Классы размеров
Size Classes – удобный инструмент для установки ограничений в авто-макете и контенте для различных групп устройств. Вы можете добавить дополнительное меню или увеличить какую-то часть контента в зависимости от устройства, на котором вы работаете.
Работа с цветами
Как дизайнер со знаниями в программировании, я обычно работаю с палитрой цветов в 16-ричной системе. Эти инструменты помогут вам эффективно конвертировать цвета из Sketch в Xcode.
Vector Assets
Вместо генерации 3 изображений в разном масштабе (1x, 2x, 3x) для каждого исходника, вам понадобится всего один файл. В Sketch нужно импортировать их в PDF. Важно учесть 3 момента.
Представляем Spring
Год назад я представил вам Canvas, iOS-библиотеку анимаций, которая предназначена для упрощения процесса создания анимации с помощью Runtime Attributes (атрибуты рабочего цикла) в Storyboard. Он был достаточно прост, чтобы любой дизайнер без навыков в коде мог успешно разрабатывать динамические эффекты интерфейса.
С тех пор много чего произошло. Swift пришел на смену, а Xcode 6 значительно все упростил. Теперь Runtime Attributes можно установить, используя IBInspectables. Вместо того, чтобы вручную прописывать несколько атрибутов, таких как тип анимации, задержка и длительность, вы можете просто указать значения напрямую в Attribute Inspector (инспектор атрибутов).
Я решил засесть за планшет и поработать в новой библиотеке анимаций под названием Spring, с помощью двух iOS-разработчиков. Этот проект начался, когда я представил свою книгу Swift Chapter в помощь дизайнерам и новичкам для изучения Swift. Эта книга помогала сократить код анимации и учила, как устанавливать свойства слоя, которые еще не доступны в Attribute Inspector – cornerRadius (радиус закругления угла), shadowColor (цвет тени), shadowOpacity (непрозрачность тени) и другие.
Эта библиотека выросла в полноценную библиотеку анимации, которая поддерживает все возможные представления, переходы, анимации загрузки и многое другое.
Установка Spring
Просто вставьте папку Spring в ваш Project Navigator, как показано на видео.
Используя Spring, вы можете быстро анимировать любой слой без единой строчки кода. У вас есть доступ к более, чем 25 предустановкам анимации, таких как slideDown, zoomIn, squeezeUp и т.д. Вы можете играться с опциями x, y, масштаба и вращения. Кроме того, вы можете экспериментировать с параметрами кривой, замедления и скорости.
Для простых анимаций:
Игра с приложением Spring
С кодом вы можете гораздо больше. Spring построен так, что вы можете запускать анимации или цепь анимаций на любое событие.
Вы можете активировать их во время viewDidAppear() или в IBAction.
layer.animation = “squeezeDown”
layer.animate()
Я рекомендую хранить все параметры анимации в Storyboard и просто вызывать функцию animate() или animateTo() в коде. Таким образом, вы можете избежать слишком большого количества кода в файлах классов.
Обучение Swift для дизайнера
С помощью Swift Playground вы можете экспериментировать с кодом в реальном времени. Это идеальная площадка для экспериментов со всеми возможностями, без ограничений графического интерфейса. Изучение использования функций, классов и работа с UIKit может сделать ваше приложение гораздо более мощным.
Мне нравится расценивать код как еще один инструмент дизайна. Программные продукты сделаны из кода, он неизбежен.
Эта книга была написана с учетом последних стандартов, принятых Apple. Я консультировался у двух iOS-разработчиков во время ее написания, и они любезно просматривали весь мой код, чтобы убедиться в соблюдении наивысших стандартов.
Как дизайнер, изучающий код, вы можете:
Создание своего приложения на Swift
В этой обновленной главе мы не пропустим ни одного шага. Вы изучите все максимально детально: интерфейс Xcode, Storyboard, Auto Layout, анимацию, и язык Swift, а также многое другое. Каждый раздел максимально визуализирован и содержит видео с голосовой озвучкой, а также проекты на Xcode, которые можно скачать себе. Весь процесс был значительно упрощен для дизайнеров и начинающих разработчиков, которые никогда в своей жизни не сталкивались с кодом.
Читайте также:
Глава 1. Обучение Swift и Xcode для дизайнера, создание своего приложения на Swift
Знакомство с SwiftUI: Создание простого приложения с использованием TableView
Во время проведения WWDC 2019, одним из самым больших и захватывающих моментом был анонс релиза SwiftUI. SwiftUI — это совершенно новый фреймворк, который позволяет проектировать и разрабатывать пользовательские интерфейсы с написанием меньшего количества кода, декларативным способом.
В отличие от UIKit, который обычно использовался в сочетании с storyboards, SwiftUI полностью основан на программном коде. Тем не менее, синтаксис очень прост для понимания и проект можно быстро просмотреть с помощью Automatic Preview.
Поскольку SwiftUI использует язык Swift, он позволяет создавать приложения той же сложности с гораздо меньшим количеством кода. Более того, использование SwiftUI автоматически позволяет приложению использовать такие функции, как Dynamic Type, Dark Mode, Localization и Accessibility. Кроме того, он доступен на всех платформах, включая macOS, iOS, iPadOS, watchOS и tvOS. Итак, теперь ваш код пользовательского интерфейса может быть синхронизирован на всех платформах, что дает больше времени для того, чтобы сосредоточиться на второстепенном платформо-зависимом коде.
Об этой статье
Важно, чтобы разработчики узнали, как использовать SwiftUI на более ранних стадиях, поскольку компания Apple в конечном итоге сфокусирует большую часть своего внимания на этом фреймворке. В этой статье мы рассмотрим основы SwiftUI и узнаем, как создавать минимальную навигацию, отображать изображения, текст и списки, посредством создания простого списка контактов, который отобразит всех участников нашей команды. При выборе участника команды, приложение отображает детальную информацию, которая содержит изображение пользователя с его краткой биографией. Давайте начнем!
Запустим Xcode 11. На время написания данной статьи, Xcode 11 все еще находится в бета-версии, поэтому некоторые функции могут работать не так, как ожидалось. В этой статье мы будем использовать Swift 5. Несмотря на то, что продвинутые знания языка Swift не обязательны для данной статьи, все же рекомендуется понимание основ языка.
Примечание редактора: Для предварительного просмотра и взаимодействия с изображениями из Canvas в Xcode, убедитесь, что на Mac установлена MacOS версий 10.15 beta.
Создание нового проекта с использованием SwiftUI
Давайте начнем все сначала, чтобы вы могли сразу увидеть, как запустить приложение SwiftUI. Сначала откройте Xcode и выберите пункт «Create new Xcode project». Для платформы iOS выберите Single View App. Введите название приложению и заполните текстовые поля. Однако следует убедиться, что внизу установлен флажок Use SwiftUI. Если вы не выберите эту опцию, Xcode создаст для вас storyboard файл.
Xcode автоматически создаст для вас файл с именем ContentView.swift, и удивительным будет то, что предварительный просмотр вашего кода, будет отображен с правой стороны, как показано ниже.
Если вы не видите предварительного просмотра, необходимо нажать кнопку Resume в зоне предварительного просмотра. Компиляция проекта займет некоторое время. Будьте терпеливы и дождитесь завершения компиляции.
Теперь давайте посмотрим, как можно изменить эти файлы для создания приложения.
Создание представления в виде списка
Создание представления в виде списка осуществляется в три этапа. Первый — это создание строк в списке. Возможно дизайн похож на UITableView. Для этого необходимо создать ContactRow. Второй этап это передача необходимых данных в список. У меня есть данные, которые уже закодированы, и требуется всего лишь несколько изменений, чтобы связать список с данными. Последний этап — это просто добавление Navigation Bar и встраивание списка в Navigation View. Это довольно просто. Теперь посмотрим, как все это было реализовано в SwiftUI.
Создание списка преподавателей
Во-первых, необходимо создать представление для отображения списка всех участников команды, включая фотографии их профиля и их описание. Посмотрим, как это можно сделать.
Как мы видим, в сгенерированном коде имеется компонент Text со значением «Hello World». В редакторе кода изменим значение кода на «Simon Ng».
Если все работает верно, справа вы должны увидеть автоматическое обновление. Это эффект мгновенного просмотра, что мы и ожидали.
Давайте добавим в приложении новый элемент Text. Это будет краткое описание участника. Чтобы в приложении добавить новый элемент интерфейса, необходимо нажать кнопку + в правом верхнем углу. Появится новое окно со списком различных вью. Переместим вью с названием Text и поместим его под первоначальный элемент Text, как показано ниже.
Обратите внимание на код слева:
Можно заметить, что новый элемент Text был добавлен под Text вью с значением Simon Ng. Отличие состоит в том, что теперь это вью, похоже, обернул представление в нечто, называемое VStack. VStack используется для вертикального стека, и он является заменой Auto Layout в SwiftUI. Если у Вас имеется опыт разработки программного обеспечения для watchOS, вы вероятно знаете, что здесь нет никаких ограничений, более того все элементы помещаются в группы. При вертикальном стеке все вью будут расположены вертикально.
Теперь измените текст «Placeholder» на «Founder of AppCoda»
Далее, давайте добавим изображение слева от этого текста. Так как мы хотим расположить представление горизонтально к существующим представлениям, то имеется необходимость обернуть VStack в HStack. Для этого, выполним ⌘+Click на VStack, а затем выберем Embed in HStack. Посмотрим на это ниже:
Данный код должен выглядеть следующим образом:
Значительных изменений пока нету, но сейчас мы добавим изображение. Измените код, чтобы он выглядел следующим образом:
Начиная с iOS 13, Apple представляет новую функцию под названием SFSymbols. SF Symbols, разработанный компанией Apple, представляет собой набор из более чем 1500 символов, которые можно использовать в приложениях. Поскольку они могут легко интегрироваться с системным шрифтом San Francisco, символы автоматически обеспечивают оптическое вертикальное выравнивание с текстом любого размера. Поскольку у нас пока нет изображений наших преподавателей, будем использовать так называемый placeholder.
Теперь сосредоточимся на некоторых незначительных проблемах дизайна. Поскольку имеется необходимость эмуляции внешнего вида UITableRow, давайте выровняем текст по левому краю (т. е. сделаем его главным). Для этого выполним ⌘+Click на VStack и нажмем Inspect. Выберем значок выравнивания по левому краю, как показано ниже:
Далее увидим изменение в коде. Также код будет изменен в реальном времени для отображения новых изменений.
Теперь, когда второе текстовое представление является заголовком, давайте изменим шрифт. Как и раньше, ⌘+Click на текстовом представлении «Founder of AppCoda» в режиме предварительного просмотра и выбираем Inspect. Изменим шрифт на «Subheadline» и отобразим предварительный просмотр и изменение кода в реальном времени.
Давайте также изменим цвет и установим его на «Серый». Данный код должен выглядеть следующим образом:
Теперь, после окончания проектирования ряда сэмплов, мы подошли к волшебной части. Посмотрите, как легко создать список. Выполним ⌘+Click на HStack и выполним клик на Embed in List. Вуаля! Посмотрите, как код будет автоматически меняться, и пустая область будет отображать 5 красивых новых строк, каждая из которых показывает Simon Ng в качестве члена команды.
Также обязательно обратите внимание, как был создан List в коде. Удалив HStack и заменив его повторяющимся List, было создано табличное представление. Теперь подумайте сколько времени вы сэкономили и на сколько меньше кода написали, избегая все эти UITableViewDataSource, UITableViewDelegate, Auto Layout, реализации для Dark Mode и т. д. Все это само по себе показывает мощь и силу SwiftUI. Тем не менее, мы далеки от завершения. Давайте добавим некоторые реальные данные в новый список.
Подключение данных к списку
Данные, которые нам необходимы, это список участников команды и их биография вместе с папкой со всеми их изображениями. Вы можете скачать необходимые файлы здесь. Вы должны найти 2 файла с именами Tutor.swift и Tutor.xcassets.
После загрузки импортируйте файл с расширением Swift и папку ресурсов в проект Xcode. Чтобы их импортировать, просто перетащите их в навигатор проекта.
В файле Tutor.swift объявляем структура Tutor и приводим ее в соответствие с протоколом Identifiable. Вы поймете, почему это важно позже. Также определяем переменные id, name, headline, bio и imageName. Наконец, добавим некоторые тестовые данные, которые будут использоваться в нашем приложении. В Tutor.xcassets имеются изображения всех участников команды.
Вернитесь к ContentView.swift и измените код следующим образом:
Убедимся, что ContentView использует tutors для отображения данных на экране.
Вот так! Посмотрите, как изменилось представление.
Изображения отображаются в виде квадрата. Хотелось бы, чтобы они выглядели более округлыми. Давайте посмотрим, как мы можем сделать изображение с закругленными углами. В правом верхнем углу нажмите кнопку + и перейдите на вторую вкладку. Так будет отображен список модификаторов макета, которые вы можете добавлять к изображениям.
Ищите «Corner Radius/Угловой радиус», перетащите его из окна предварительного просмотра и поместите его на изображение. Вы должны увидеть измененный код, и изображения предварительного просмотра будет изменено на следующее.
Тем не менее, радиус закругления в 3 слишком мал. Итак, измените его на 40. Таким образом, получаем красивые скругленные картинки.
Ячейка и список готовы! Далее необходимо отображать детальную информацию, когда пользователь нажимает на ячейку. Давайте начнем работу с создания навигаций.
Создание навигации
Навигационное представление оборачивает уже имеющееся представление в панель навигации и контроллер навигации. Предположительно, вы уже знакомы с Storyboard, и знаете, что довольно просто встроить представление в интерфейс навигации. Все, что необходимо сделать, это всего лишь несколько кликов.
В SwiftUI обернуть List вью в NavigationView также очень просто. Все, что вам нужно сделать, это изменить код следующим образом:
Теперь экран должен выглядеть примерно так:
Далее установим кнопку навигации. NavigationButton ведет на новый экран, который находится в стеке навигации. Подобно тому, как мы обернули List в NavigationView, необходимо обернуть содержимое List с помощью NavigationButton, как показано ниже:
Теперь имя участника команды отображено в подробном представлении. Сейчас самое время проверить это.
В текущем режиме предварительного просмотра вы не можете взаимодействовать с представлением. Обычно, когда вы нажимаете на предварительный просмотр, происходит простое выделение кода. Чтобы выполнить тест и проверить взаимодействие с пользовательским интерфейсом, необходимо нажать кнопку воспроизведения в правом нижнем углу.
Вью станет темным, и возможно, придется подождать пару секунд, пока загрузится весь симулятор, прежде чем появится возможность реально взаимодействовать с представлениями.
Когда загрузка закончится, вы сможете нажать на ячейку, и она перейдет к новому представлению в стеке, в котором будет отображаться имя выбранной ячейки.
Прежде чем перейти к реализации детализированного представления, позвольте мне показать вам хитрый прием, который поможет сделать ваш код более разборчивым. ⌘+Click NavigationButton и выберите «Extract Subview».
Бум! Вы можете видеть, что весь код в NavigationButton был создан в совершенно новой структуре, которая делает его очень разборчивым. Переименуйте ExtractedView в TutorCell.
Теперь можно получить ошибку в TutorCell. Это потому, что у нас нет параметра tutor для передачи в эту структуру. Исправить ошибку очень просто. Добавьте новую константу в структуру TutorCell следующим образом:
А, в ContentView, добавьте отсутствующий параметр изменив строку на:
Вот и все! Имеется список и ячейки, все они хорошо продуманные и разложены в требуемом порядке! Далее мы собираемся создать детальный вид, который будет показывать всю информацию о преподавателе.
Создание представления для отображения детальной информаций.
Давайте создадим новый файл, перейдя в File > New > File. Под iOS выберите SwiftUI View и назовите этот файл TutorDetail.
В предварительном просмотре уже создался главный базовый вид. Давайте с ним поработаем. Сначала нажмите на кнопку « +» и поместите изображение над уже встроенным представлением Text. Установите имя изображения «Simon Ng». Должно появится изображение Саймона. Теперь измените код так, как показано ниже:
Также необходимо добавить еще два текстовых вью: headline и bio. Перетащите два текстовых вью ниже текстового вью с именем преподавателя, и отредактируйте их:
Хорошей новостью является то, что у нас есть текстовые вью. Плохая новость в том, что они плохо выглядят и не показывают разницу между заголовком и детальным описанием. Кроме того, текстовое вью биографии не отображает весь текст. Давайте исправим это.
Обновите код следующим образом:
Давайте исправим следующую ошибку. Нам необходимо отобразить весь текст текстового представления биографии. Это можно легко сделать, добавив новую строку кода:
Все выглядит хорошо. Есть одно последнее изменение дизайна, которое я хочу сделать. Заголовок и текстовые представления биографии находятся слишком близко друг к другу. Я хотел бы иметь некоторое пространство между этими двумя представлениями. Кроме того, я хотел бы добавить некоторые отступы ко всем вью, чтобы они не касались краев устройства. Убедитесь, что вы изменили код следующим образом:
Это все! Поздравляю! Экран детального просмотра готов. Осталось только соединить наш список преподавателей и их детальное описание. Это довольно просто.
Передача данных
Для передачи данных необходимо объявить некоторые параметры в структуре TutorDetail. Перед объявлением переменной body добавьте следующие переменные:
Это параметры, которые мы передадим из ContentView. Проведите следующие изменения:
И последнее, но не менее важное: нам необходимо добавить отсутствующие параметры в структуру TutorDetail_Previews.
В приведенном выше коде мы добавляем отсутствующие параметры и заполняем информацию той, что имели ранее.
Вы можете быть удивлены, что случилось с инструкциями #if DEBUG/#endif. Это означает, что любой код, заключенный в эти команды, будет выполнен только при предварительном просмотре для целей отладки. В вашем последнем приложении этого не будет.
Ничто не должно измениться, так как информация также неизменна.
И так, последний шаг — связать это представление со списком. Переключитесь на файл ContentView.swift. Все, что необходимо сделать, это изменить одну строку кода в структуре TutorCell. Измените код NavigationButton на ниже приведенный:
Вместо того, чтобы отобразить представление с именем преподавателя, необходимо изменить место назначения на TutorDetail при заполнении соответствующих данных. Данный код должен выглядеть следующим образом:
Нажмите кнопку воспроизведения и выполняйте взаимодействие с представлением. Если все работает хорошо, приложение будет также хорошо работать.
Просто выберите одну из записей участника:
И тогда будут отображены детали участника на детальном экране.
Заключение
В этой статье представлены основы SwiftUI. Теперь будет удобно создавать простые приложения, такие как планировщик задач и т.д. Я предлагаю взглянуть на некоторые из приведенных ниже ресурсов, таких как документация от компании Apple и сессии WWDC 2019, посвященные данному фреймворку.
Этот фреймворк — это будущее развития Apple, поэтому очень здорово, если вы начнете именно с него. Помните, что если вы не уверены в коде, попробуйте поработать с автоматическим предварительным просмотром и посмотрите, сможете ли вы внести изменения в пользовательский интерфейс напрямую, чтобы увидеть, как создается код. Если у вас есть какие-либо вопросы, не стесняйтесь, задавайте их в комментариях ниже.
Для справки вы можете скачать готовый проект здесь.