Понимание пакета пользовательского интерфейса & Сгенерированный код

Пакет пользовательского интерфейса

Пакеты пользовательского интерфейса — это новый гибкий способ обмена информацией пользовательского интерфейса. Дизайнеры используют плагин Relay for Figma для создания пакетов пользовательского интерфейса из компонентов Figma. При этом проект объявляется готовым к использованию разработчиками. Затем дизайнеры предоставляют разработчикам URL-адрес их файла дизайна Figma.

Разработчики используют плагин Android Studio для импорта пакетов пользовательского интерфейса из файла дизайна Figma. В проекте Android Studio пакет пользовательского интерфейса содержит декларативные описания импортированных компонентов Figma вместе со связанными ресурсами, включая файлы шрифтов, изображения и SVG.

Пакеты пользовательского интерфейса являются постоянными артефактами и могут быть переданы в систему контроля версий. Когда разработчик импортирует пакет Figma в проект Android Studio, файлы добавляются в проект в папке ui-packages . Вот пример импортированного пакета пользовательского интерфейса:

Содержимое пакета пользовательского интерфейса

Проект с импортированным пакетом пользовательского интерфейса содержит следующие файлы:

  • [component_name].json — файл JSON, описывающий компонент (например, story_card.json ).
  • config.json — хранит метаданные для конкретного пакета пользовательского интерфейса.
  • fonts/ — Папка, в которой хранятся ресурсы шрифтов, используемые компонентом, если таковые имеются.
  • *.png — ресурсы изображения, используемые в компоненте (например, menu.png ), если таковые имеются.
  • [component_name]_preview.png — изображение предварительного просмотра компонента (например, story_card_preview.png ).
  • *.svg — векторные графические ресурсы, используемые в компоненте (например, треугольник), если таковые имеются.
  • FONTS.txt — список используемых шрифтов, если таковые имеются.
  • DEPS.txt — Имена любых дочерних компонентов.
  • VERSION.txt — версия Relay, используемая для создания и импорта пакета пользовательского интерфейса.

Они хранятся в папке src/main/ui-packages/[package_name] .

Удаление пакетов пользовательского интерфейса

Чтобы удалить пакет пользовательского интерфейса из проекта, вы можете удалить папку в разделе ui-packages/ . При повторной сборке проекта после удаления папки также удаляется сгенерированный ею код.

Структура папок сгенерированного кода

При сборке проекта эти пакеты пользовательского интерфейса преобразуются в сгенерированный код, содержащий функции @Composable , которые может вызывать разработчик. Они хранятся в build/generated/ . В представлении Android они отображаются как java (generated) и res в каталоге вашего модуля (в данном случае каталоге app ).

Папки, содержащие сгенерированные файлы в студии Android

На следующих снимках экрана показаны файлы в этом каталоге:

  • Ресурсы, такие как шрифты и изображения, копируются в build/generated/res/relay/ .

    Сгенерированные ресурсы в папке res
  • Каждый пакет пользовательского интерфейса имеет сгенерированный код, помещенный в build/generated/source/relay/ . В папке с созданным кодом каждого пакета пользовательского интерфейса имеется один файл, соответствующий импортированному компоненту. Он также содержит один файл, заканчивающийся на Fonts.kt , который содержит ссылки на ресурсы шрифтов, используемые компонентом.

    Сгенерированные файлы Kotlin в папке java(generated).
  • Существует также библиотека времени выполнения com.google.relay.compose , которая обеспечивает функциональность, используемую сгенерированным кодом.

    Библиотека времени выполнения реле

Сгенерированная структура кода

Композитные предметы

Компоненты в Figma состоят из слоев. Например, этот дизайн содержит слой кадра Hello Card , который содержит два дочерних слоя: Image (слой изображения) и Title (текстовый слой):

Компонент Hello Card со слоями изображения и заголовка

Когда этот проект транслируется в код, мы создаем отдельные составные функции для каждого слоя, где имя слоя Figma — это имя составной функции (измененное для соответствия синтаксису Kotlin). Слои переводятся следующим образом:

  1. Слой Hello Card :

    @Composable
    fun HelloCard(
      modifier: Modifier = Modifier,
      title: String
    ) {
      TopLevel(modifier = modifier) {
          Image()
          Title(title = title)
      }
    ]
    
  2. Слой изображения :

    @Composable
    fun Image(modifier: Modifier = Modifier) {
      Image(...)
    }
    
  3. Титульный слой:

    @Composable
    fun Title(
      title: String,
      modifier: Modifier = Modifier
    ) {
      Text(...)
    }
    

Переведенные варианты и параметры Figma

Если компонент Figma имеет несколько вариантов, то сгенерированный код включает перечисление для каждого свойства варианта. Значения в каждом перечислении варианта соответствуют значению этого свойства варианта. Составной объект включает параметр для каждого варианта перечисления.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   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,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Каждый параметр контента и обработчик взаимодействия компонента Figma преобразуются в параметр компонуемого компонента. Компонуемый элемент NewsCard представленный ниже, имеет четыре параметра контента (одно изображение и три строки) и два обработчика взаимодействия (два последних параметра).

/**
 *   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,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}
{% дословно %} {% дословно %} {% дословно %} {% дословно %}