Приложение-клон Instagram с использованием SwiftUI и GraphQL – HomeView

Сегодня в четвертой части нашего приложения-клона Instagram с GraphQL мы продолжим изучение SwiftUI, создавая представление Home.

В наших предыдущих статьях мы узнали , как зарегистрировать пользователя и как войти в систему, а также создали представление Profile с соответствующими пользовательскими интерфейсами в нашем приложении-клоне Instagram. Сегодня мы используем часть этого кода и создадим нечто похожее на UIScrollView с большим количеством контента.

Пристегните ремни и давайте начнем!

Для лучшего усвоения материала скачайте проект iOS Instagram Clone с исходным кодом.

Хотите быстро начать?

Клонируйте это приложение из нашего хаба и начните использовать его без лишних хлопот!

Что именно мы будем создавать

Мы будем строить следующее представление:

Как мы видели ранее, SwiftUI позволяет очень легко создавать такие сложные интерфейсы, поскольку вы можете повторно использовать множество компонентов очень легко. Слово “повторное использование”.

Помните, мы уже закодировали этот нижний бар? Мы используем его для этого. Все остальное – новое.

Я не буду снова рассказывать о VStacks и HStacks, так что если вы пропустили эту часть, посмотрите ее здесь.

Наши компоненты пользовательского интерфейса

Этот экран будет состоять в основном из четырех компонентов:

• Верхняя панель (с камерой, строкой Back4Gram, иконкой дома и иконкой бумажного самолетика)
• Панель истории (с иконками историй)
• Подробная временная шкала (с фактическими постами)
• Нижняя панель (которую мы будем использовать повторно).

Давайте начнем их создавать!

Верхняя панель

Верхняя панель состоит из пяти компонентов:

• Кнопка камеры
• Строка Back4Gram
• Разделитель
• Кнопка домика
• Кнопка бумажного самолёта

Добавьте иконки для кнопок, как вы уже научились, и приступим к кодированию.

Создайте файл HomeView.swift и добавьте GeometryReader, чтобы мы могли красиво изменить размеры:

И, как и в предыдущем уроке, добавим VStack, потому что все будет отображаться по вертикальной оси:

Наша верхняя панель будет представлять собой сочетание компонентов, выровненных по горизонтали, поэтому добавим HStack для ее создания:

И, наконец, добавим элементы управления, которые мы будем использовать:

Как это выглядит?

Мы достигли цели!

Теперь давайте немного поговорим о

панели истории

Полоса истории сама по себе является сложным компонентом. Она похожа на UIScrollView из старого UIKit, но внутри нее находится элемент управления, состоящий из изображения и текста под ним (он же VStack). Давайте создадим эту структуру:

Поместить ее в наш основной VStack так же просто, как добавить ScrollView. А чтобы сделать его более красивым, давайте сделаем его прокручивающимся только по горизонтали и скроем индикаторы прокрутки:

И, наконец, добавим его в наш основной VStack:

Проверяем внешний вид:

Теперь давайте перейдем к добавлению нашей…

нижнюю панель

Теперь давайте насладимся всей этой возможностью повторного использования. Просто добавьте его из нашего файла BottomBar.swift в наш код:

И наш полный код:

Разве это не просто? Как это выглядит?

Ух ты!

Добавим немного сложности

Самой сложной частью этого представления будет детальное представление Timeline.

Чтобы сохранить соответствие с тем, что мы сделали в TimelineView, давайте создадим новый файл TimlineDetailView.swift и в нем создадим новую структуру, которая будет хранить данные, как и в TimelineView.

Помните, что у нас уже есть структура Preview, объявленная в TimelineView, так что давайте используем и ее.

Структура получит Preview, чтобы мы могли получить imageUrl позже:

После этого добавим само представление:

Основное содержимое также будет находиться в VStack:

И этот VStack будет состоять из четырех компонентов:

• HStack с логотипом, текстами и кнопкой с тремя точками
• Изображение поста
• Hstack с кнопкой сердца, кнопкой комментария, кнопкой бумажного самолетика и кнопкой флага
• VStack с текстами “Понравилось…” и “Посмотреть все комментарии”.

Итак, давайте начнем с добавления первого HStack:

И добавим элементы управления внутри него:

Затем изображение:

Наш второй HStack со всеми кнопками:

И его элементы управления:

И, наконец, наши тексты VStack:

Теперь, внутри нашего TimelineDetailView, давайте жестко закодируем несколько превьюшек:

И, наконец, выполним цикл добавления наших PreviewDetailView в ScrollView:

Наконец, добавим его в наш HomeView:

Наконец, давайте посмотрим на результаты:

Как это круто!

Заключение

Возможность повторного использования – ключевой момент в SwiftUI.

Сегодня вы узнали, как повторно использовать BottomView и Preview struct из наших предыдущих статей.

Настало время для функциональности, и я с нетерпением жду этого момента.

Оставайтесь с нами!

Ссылка

• Первая часть этой серии – приложение Instagram Clone.
• Часть 2 – Swift Instagram Clone.
• Часть 3 – Профиль Instagram.
• Часть 4 – Instagram Homeview.
• Загрузите проект iOS Instagram Clone с исходным кодом и начните использовать Back4App.

Зарегистрируйтесь сейчас в Back4App и начните создавать свое приложение Instagram Clone App.