Создайте ячейку, сложив подвиды

Создайте приложение, подобное Lego, с помощью SwiftUI - Урок 14

В SwiftUI мы можем построить представление из компонентов subview, перетаскивая их из библиотеки так, чтобы они встали на место по вертикали и горизонтали, как блоки Lego®.

В этом уроке 14 мы добавим текстовые подпредставления, кнопку и изображение для изменения размера.

В предыдущем Уроке 13 мы завершили соединение экземпляров модели новостей Article с NewsCell в сцене новостей. Теперь мы создадим ProductCell для нашей сцены продуктов.

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

2. Ячейка продукта

Мы собираемся создать ячейку продукта, чтобы отображать изображение, название, описание и цену продукта, а также кнопку для его покупки. Собираем блоки Lego® следующим образом:

В приведенном выше макете показаны заполнители для блоков изображения и текста, которые мы сможем заменить для каждого отдельного экземпляра. Например, чтобы продать мост Харбор-Бридж в Сиднее, мы могли бы заменить блоки изображения и текста, как показано ниже.

👉 В меню «Файл» Xcode выберите New > File. Выберите шаблонSwiftUI View и назовите его ProductCell.swift.

3. Текстовые атрибуты

Теперь мы зададим стиль текстовому подвиду с помощью инспектора атрибутов.

👉 Убедитесь, что панель инспектора атрибутов видна справа. Если нет, нажмите кнопки Show Inspectors и Show Attributes inspector в правом верхнем углу (как показано ниже).

👉 В предварительном просмотре щелкните один раз текст Hello, World!, чтобы выделить его.

👉 В инспекторе атрибутов измените текст на просто слово Text. Ударь return. Установите Font на Title 2. Установите Font Weight на Bold.

🐞 Вам может потребоваться сначала выбрать Title, чтобы Xcode также указал Title 2.

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

4. Добавьте подвиды в вертикальную стопку.

Давайте добавим к нашему представлению другие блоки Lego (подвиды).

👉 Нажмите кнопку «Библиотека» (символ +) в правом верхнем углу панели предварительного просмотра.

👉 Появится библиотека. Убедитесь, что выбрана вкладка "Представления". Введите слово text в строку поиска. Выберите в списке элемент Text, как показано ниже.

👉 Перетащите элемент Text из библиотеки в область предварительного просмотра, чуть ниже существующего вложенного представления Text (блок Lego).

👁 Как показано ниже, Xcode показывает, где будет располагаться новое подвид, как один блок Lego под другим.

👁 В коде Xcode добавляет VStack (вертикальный стек), содержащий исходный Text и новый Placeholder текст.

👉 В предварительном просмотре щелкните новое Placeholder текстовое подпредставление, чтобы увидеть его атрибуты.

👉 В инспекторе атрибутов измените новое представление текста, чтобы оно содержало слова Detail Text. Нажмите return, чтобы Xcode применил изменение. Измените Color на Gray.

👉 Снова из библиотеки видов перетащите третье подвид текста, чуть ниже Detail Text. Прежде чем отпустить перетаскиваемый объект, убедитесь, что в подписи внизу указано Insert Text in Vertical Stack. Если вместо этого написано Add Text to a new Vertical Stack..., вам нужно переместить указатель на несколько пикселей вверх, пока заголовок не изменится.

👁 Убедитесь, что ваш код выглядит так, как показано ниже, со всеми тремя Text подпредставлениями всего в одном VStack. В противном случае отмените действие и попробуйте снова.

👉 В предварительном просмотре щелкните один раз новое Placeholder текстовое подпредставление. В инспекторе атрибутов измените слова наTertiary Text и нажмите return.

5. Вертикальное выравнивание стека

Наша вертикальная стопка содержит три текстовых подпредставления, уложенных друг на друга, как блоки Lego®. По умолчанию VStack выравнивает свои подвиды по центру, но мы хотим, чтобы VStack выровнял их по переднему краю (левому краю в английских системах).

👉 В предварительном просмотре выберите VStack, щелкнув слева или справа от вложенного просмотра Text. Также можно щелкнуть пустое пространство вдали от текстовых подвидов, а затем один раз в любом месте текстовых подвидов.

👁 Убедитесь, что Xcode показывает VStack, выбранный в инспекторе кода, предварительного просмотра и атрибутов, как показано ниже.

👉 В инспекторе атрибутов рядом с Alignment щелкните ведущий (первый) значок.

6. Добавить подпредставление в горизонтальный стек.

👉 Снова покажите библиотеку представлений, но на этот раз найдите элемент Button (вверху списка). Перетащите Button в область предварительного просмотра справа от Tertiary Text. Убедитесь, что полоса вставки отображается только справа от Tertiary Text, а не всех текстовых подвидов.

👁 Xcode создает HStack (горизонтальный стек), содержащий рядом Tertiary Text и Button.

7. Добавьте растягивающееся изображение в горизонтальную стопку.

👉 Нажмите кнопку + еще раз, чтобы отобразить библиотеку. Щелкните вкладку Media Library, чтобы просмотреть ресурсы изображений, доступные в нашем проекте.

👉 Перетащите изображение Sydney влево от текстовых подвидов. На этот раз убедитесь, что полоса вставки отображается рядом со всеми подвидами текста, как показано ниже.

🐞 Мы могли бы вместо этого перетащить Image из библиотеки представлений, но по умолчанию используется Image("Image Name"). Поскольку имя файла "Image Name" отсутствует в нашем проекте, предварительный просмотр ничего не покажет, что затруднит выбор.

👁 Изображение загружается, но оно настолько велико, что его почти не видно на экране iPhone. Он также выталкивает весь другой контент за пределы экрана.

Нам нужно ограничить изображение шириной 60 точек, заставить его растягиваться / сжиматься по размеру и сохранять его соотношение сторон.

👉 В коде щелкните строку кода Image("Sydney"). Мы не можем просто щелкнуть, чтобы выбрать его в самом предварительном просмотре, так как он находится за пределами поля.

👉 В инспекторе атрибутов установите Frame Width на 60 и нажмите return.

👁 Как вы можете видеть по высокому прямоугольному контуру, ширина изображения теперь ограничена 60 точками, что позволяет снова разместить остальную часть содержимого. Однако содержимое изображения выходит за пределы своего кадра.

Нам нужно ограничить изображение сжатием / растяжением, чтобы заполнить только его рамку.

👉 В инспекторе атрибутов установите Resizing Mode на Stretch

👁 Изображение теперь растягивается по размеру кадра, но искажается - не растягивается по вертикали в той же пропорции, что и по горизонтали.

Мы можем исправить вертикальное / горизонтальное искажение, установив соответствующее соотношение сторон.

👉 В инспекторе атрибутов установите Aspect Ratio на Fit.

8. Символ изображения

Поскольку библиотека упрощает добавление только Image, использующего файл ресурсов, мы использовали изображение Sydney в качестве заполнителя. Однако лучше было бы показать что-то более общее, например, фото системного изображения. Как мы обсуждали ранее в Учебнике 6, SwiftUI предоставляет тысячи значков SF Symbol, в том числе одну под названием photo.

👉 В коде после Image выберите ("Sydney"). Удалите его и снова введите открывающую скобку. Xcode показывает всплывающий список параметров автозаполнения. Прокрутите вниз до параметра Image(systemName:) и выберите его.

👁 Xcode вводит Image(systemName: String) с выбранным заполнителемString.

👉 Заменить String на "photo".

👁 Xcode показывает значок фотографии в качестве изображения-заполнителя в нашей ячейке.

9. Подходящий размер предварительного просмотра

Макет ProductCell сейчас выглядит неплохо.

Предварительный просмотр отображается на полноэкранном iPhone. Это представление предназначено для того, чтобы быть просто частью полной сцены, поэтому имеет смысл показывать предварительный просмотр только того размера, который соответствует содержимому.

👉 Щелкните в любом месте белого пространства предварительного просмотра, за пределами добавленных вложений.

👉 В инспекторе атрибутов установите Preview Layout на Size That Fits.

🐞 Мы могли бы установить макет предварительного просмотра на Size That Fits в самом начале, перед добавлением вложенных представлений. Так было бы немного легче управлять. К сожалению, Xcode (по крайней мере до версии 12.5) не позволяет нам перетаскивать вложенные представления внутрь, чтобы добавить внешний VStack или HStack, без дополнительного места снаружи. Итак, мы отложили изменение размера предварительного просмотра до тех пор, пока это не было сделано.

10. Измените заголовок кнопки.

Кнопка в настоящее время отображает заголовок по умолчанию Button. Давайте изменим его на Buy, чтобы он соответствовал нашему дизайну.

👉 В предварительном просмотре щелкните один раз в Button.

🐞 Как видите, инспектор атрибутов не позволяет изменить заголовок кнопки. Он просто показывает Argument 2 с отключенной кнопкой.

👉 В коде щелкните Content под строкой Button кода. Ударьте delete на клавиатуре, чтобы удалить его.

👉 Нажмите кнопку +, чтобы открыть библиотеку. Из библиотеки представлений перетащите подвид Text в код, где Content раньше находился в Button.

👉 В инспекторе атрибутов измените слово Text с Placeholder на Buy и нажмите return.

👁 Убедитесь, что ваш код и предварительный просмотр отображаются, как показано выше.

11. Зафиксируйте изменения

Как вы это делали раньше:

1. 👉 Выберите Commit в меню Source Control.
2. 👉 Введите описание, например: ProductCell
3. 👉 Нажмите кнопку Commit.

12. Далее…

Мы создали ProductCell, включая подпредставления для текста, изображения и кнопки.

В Урок 15 мы создадим Product модель, несколько макетов продуктов и покажем их в списке в приложении.

Смотрите предстоящие уроки в Оглавлении. Следуйте за автором, чтобы получать уведомления о других статьях. Если вам понравилась эта статья, похлопайте по ней (до 50 раз).

💬 Если у вас есть какие-либо вопросы или комментарии, пожалуйста, добавьте ответ ниже.

Эта серия выпущена через Next Level Swift. Подпишитесь, чтобы быть в курсе и никогда не пропустите новый учебник из этой серии!

Мы всегда ищем талантливых и увлеченных Swift-разработчиков! Не стесняйтесь заглянуть в раздел нашего писателя и узнать, как вы можете поделиться своими знаниями с сообществом Next Level Swift!