В Figma варианты используются для группировки разных вариантов одного и того же компонента, например, разных состояний или размеров. Реле сохраняет варианты компонента при его трансляции в код. В этом разделе мы увидим, как Relay обрабатывает варианты в проектах.
Начальная точка
![Карточка новостей с древовидными вариантами](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/design-variants/news-card-with-variants.png?authuser=9&hl=ru)
Начнем с файла Figma, содержащего компонент News Card с тремя вариантами:
- герой-предмет для самой важной новостной статьи
- item-item предназначен для типичной статьи
- аудио-пункт предназначен для статьи, которую вы слушаете, а не читаете
Скопировать пример Фигмы
В качестве примера для этого урока мы будем использовать существующий файл Figma. Убедитесь, что вы вошли в свою учетную запись Figma.
- Загрузите HelloNews.fig на свой компьютер.
В Figma перейдите в файловый браузер. С левой стороны наведите курсор на «Черновики». Появится значок + — нажмите значок + , затем «Импортировать» . Выберите файл HelloNews.fig , который вы только что скачали. Это может занять от 10 секунд до минуты.
Откройте импортированный файл в Figma.
Создать пакет пользовательского интерфейса
Плагин Relay for Figma добавляет дополнительную информацию к нашему компоненту, поэтому мы можем работать с нашими разработчиками, которые будут использовать наш компонент в своем коде.
- Откройте плагин Relay for Figma в своем файле (в строке меню: Плагины > Relay for Figma ). Нажмите «Начать» .
Выберите компонент и нажмите «Создать пакет пользовательского интерфейса» .
Выбрав пакет пользовательского интерфейса, добавьте описание в поле сводки. Например: «Компонент новостной карточки, предназначенный для отображения новостей в виде списка».
Сохранить названную версию
Теперь, когда вы создали пакет пользовательского интерфейса, подготовьте свой компонент, чтобы поделиться им с командой разработчиков.
- Откройте плагин Figma Relay, если он еще не открыт.
- Нажмите «Поделиться с разработчиком» .
- На экране «Поделиться с разработчиком» вы можете ввести новое имя и описание версии в разделе «Сохранить историю версий» .
Нажмите Сохранить .
Пример названия : Начальная новая карта
Пример описания : первая итерация элементов новостной статьи.
Скачать проект Android Studio
В части этого руководства, посвященной Android Studio, мы будем использовать предварительно настроенный проект Android Studio. Этот проект содержит приложение, которое отображает новостные статьи в текстовом формате.
- Загрузите образец файла HelloNews.zip .
- Дважды щелкните файл, чтобы разархивировать его, в результате чего будет создана папка с именем HelloNews . Переместите его в свою домашнюю папку.
- Вернитесь в Android Studio. Перейдите в меню «Файл» > «Открыть» , перейдите в свою домашнюю папку, выберите «HelloNews» и нажмите «Открыть» .
- Когда вы откроете проект, Android Studio спросит вас, доверяете ли вы этому проекту. Нажмите «Доверить проекту» .
Импортировать в Android Studio
Давайте импортируем наш компонент Figma в проект.
Вернувшись в Figma, скопируйте URL-адрес файла News Card Tutorial Figma. Мы будем использовать этот URL-адрес для импорта наших компонентов. В правом верхнем углу Figma нажмите кнопку «Поделиться» . В открывшемся диалоговом окне нажмите «Копировать ссылку» .
Переключитесь на проект HelloNews в Android Studio. Выберите «Файл» > «Создать» > «Импортировать пакеты пользовательского интерфейса…» в строке меню Android Studio.
Вставьте URL-адрес вашего файла Figma и нажмите «Далее» .
- После завершения загрузки файла (что может занять некоторое время) нажмите «Готово» .
Нажмите
для создания вашего проекта. Это может занять минуту или около того.
Предварительный просмотр приложения и компонента
В представлении Android откройте
app/java/com/example/hellonews/ui/home/HomeScreen.kt
и вы увидите предварительный просмотр приложения, в котором отображаются несколько новостных статей в текстовом формате с печатными историями над аудиоисториями. .Откройте
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
. Это сгенерированный код Jetpack Compose для нашего компонента Figma. Из предварительного просмотра мы видим, что три варианта компонента NewsCard были переведены из Figma в код. Давайте внимательно посмотрим на код.Перечисление
View
позволяет нам выбрать, какой вариант использовать для этого компонента. Имя перечисления и его значения были взяты из вариантов нашего компонента Figma. Это используется в параметреview
в нашей компонуемой NewsCard .Составной элемент NewsCard был создан из пакета пользовательского интерфейса. Он включает параметр типа
View
, который устанавливает вариант карточки новостей для создания экземпляра.package com.example.myapplication.newscard import ... // Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list. * * This composable was generated from the UI Package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem ) {...}
Дальше
Мы еще не совсем готовы использовать NewsCard . Компонент не умеет отображать разные новости, только одну и ту же, зашитую в Figma. Итак, если бы мы добавили этот компонент сейчас, все, что мы получили бы, — это повторение одной и той же новости. Нам нужен способ указать, какие части NewsCard должны быть заполнены динамическими данными.
В этом разделе мы добавим параметры контента в компонент NewsCard .
{% дословно %}Рекомендуется для вас
- Примечание. Текст ссылки отображается, когда JavaScript отключен.
- Параметры контента
- Прокрутка
- Использование Compose в представлениях