Примеры создания динамических элементов: Навигация, карточки, формы

Вы уже умеете создавать сложные компоненты, используя Auto Layout, Variants и Component Properties. Теперь закрепим эти знания на практике: сделаем динамические элементы, которые часто встречаются в веб- и мобильных приложениях. Так вы увидите, как все инструменты работают вместе.

Динамическая навигация

Навигация — ключевой элемент любого интерфейса. Она должна быть гибкой, чтобы адаптироваться к разным состояниям (активный пункт, наведение) и количеству элементов.

Пример: Навигационное меню с активным состоянием

Представьте: вам нужен компонент навигационного элемента, который может быть активным или неактивным.

1. Создайте базовый элемент. Начните с текстового слоя для названия пункта меню и, возможно, иконки. Объедините их в Auto Layout фрейм. Назовите его, например, Nav Item.
2. Добавьте Variants. Превратите Nav Item в компонент. Добавьте свойство State со значениями: Default и Active.
   • Для Default настройте внешний вид: цвет текста, отсутствие фона.
   • Для Active измените цвет текста, добавьте подчеркивание или фон, чтобы выделить активный пункт.
3. Используйте Auto Layout для контейнера. Создайте новый Auto Layout фрейм — он будет контейнером для всего меню. Вставьте в него несколько экземпляров Nav Item.
4. Свойства для гибкости.
   • Text Property: Добавьте текстовое свойство к Nav Item, чтобы менять текст пункта меню. Это позволит быстро менять названия, не отсоединяя экземпляр.
   • Boolean Property: Если есть иконка, добавьте булево свойство Show Icon, чтобы управлять её видимостью.
   • Instance Swap Property: Если иконка может меняться, добавьте свойство Icon типа Instance Swap, чтобы легко заменять одну иконку на другую.
5. Протестируйте. Попробуйте изменить состояния, текст и видимость иконок в экземплярах меню. Убедитесь, что Auto Layout корректно перестраивает элементы.

Совет: Для сложной навигации, например, с выпадающими списками, вкладывайте один компонент навигации в другой, используя Auto Layout и Instance Swap.

Динамические карточки: Гибкость контента

Карточки — универсальные элементы для отображения контента. Их динамичность в том, что они могут менять содержимое, скрывать или показывать определённые блоки.

Пример: Карточка товара/услуги

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

1. Структура карточки.
   • Создайте Auto Layout фрейм для всей карточки.
   • Внутри него разместите:
     • Прямоугольник для изображения (или фрейм с заливкой).
     • Текстовый слой для заголовка.
     • Текстовый слой для описания.
     • Текстовый слой для цены.
     • Компонент кнопки (если у вас уже есть).
   • Объедините заголовок, описание и цену в отдельный Auto Layout фрейм для управления их отступами.
2. Превратите в компонент и добавьте свойства.
   • Text Properties: Для заголовка (Title), описания (Description) и цены (Price).
   • Boolean Properties: Для опциональных элементов, таких как Show Description, Show Price, Show Button. Привяжите видимость соответствующих слоев к этим свойствам.
   • Content Property (слот): Для изображения. Это позволит вам вставлять любое изображение или даже другой компонент в этот слот. Назовите его Image Slot.
   • Instance Swap Property: Если кнопка может меняться (например, на кнопку "Добавить в корзину" или "Подробнее"), добавьте свойство Button типа Instance Swap.
3. Настройте Auto Layout. Убедитесь, что Auto Layout настроен так, чтобы карточка автоматически подстраивалась под изменения контента и видимости элементов. Используйте Fill container для текстовых блоков, чтобы они занимали всю доступную ширину.
4. Протестируйте. Создайте несколько экземпляров карточки. Попробуйте менять текст, скрывать/показывать описание, цену, кнопку, менять изображение.

Гибкие формы: Поля ввода и валидация

Формы — ещё одна область, где динамические компоненты незаменимы. Поля ввода могут иметь разные состояния (активное, ошибка, заполнено) и содержать вспомогательный текст.

Пример: Поле ввода с состоянием ошибки

1. Базовое поле ввода.
   • Создайте Auto Layout фрейм.
   • Внутри него: текстовый слой для Label, прямоугольник для поля ввода (или фрейм с обводкой), текстовый слой для Error Message.
   • Сгруппируйте Label и поле ввода в отдельный Auto Layout.
2. Превратите в компонент и добавьте свойства.
   • Text Properties: Для Label и Error Message.
   • Boolean Property: Show Error. Привяжите видимость слоя Error Message к этому свойству.
   • Variants: Добавьте свойство State со значениями Default, Focused, Error.
     • Настройте стили для каждого состояния: например, цвет обводки поля ввода, цвет текста ошибки.
3. Настройте Auto Layout. Убедитесь, что все элементы корректно выравниваются и отступы сохраняются при изменении видимости сообщения об ошибке.
4. Протестируйте. Создайте экземпляры поля ввода. Переключайте состояния, вводите текст, включайте/выключайте сообщение об ошибке.

Важно: При создании форм всегда думайте о доступности. Используйте контрастные цвета и чёткие сообщения об ошибках.

Что дальше?

Мы научились применять Auto Layout, Variants и Component Properties для создания динамических элементов. Это лишь верхушка айсберга! Ваши возможности ограничены только вашей фантазией. Попробуйте создать свои динамические компоненты, комбинируя изученные инструменты.

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