Эта страница переведена с помощью Cloud Translation API.

Обработка вариантов дизайна

В Figma варианты используются для группировки разных вариантов одного и того же компонента, например, разных состояний или размеров. Реле сохраняет варианты компонента при его трансляции в код. В этом разделе мы увидим, как Relay обрабатывает варианты в проектах.

Начальная точка

Карточка новостей с древовидными вариантами

Начнем с файла 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 и нажмите «Далее» .
Примечание. Если у вас нет URL-адреса Figma, повторите первый шаг и вернитесь в это диалоговое окно.
Примечание. Если вы увидите запрос связки ключей, введите свой пароль и нажмите «Разрешить».
Примечание. Если вместо этого вы увидите диалоговое окно о токене доступа Figma, повторите инструкции по настройке токена доступа Figma при установке.
1. После завершения загрузки файла (что может занять некоторое время) нажмите «Готово» .
Нажмите для создания вашего проекта. Это может занять минуту или около того.
Примечание. Нажмите вкладку «Сборка» в нижней части приложения, чтобы просмотреть результаты сборки.

Предварительный просмотр приложения и компонента

В представлении 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 .

{% дословно %} {% дословно %}