Informacje o pakiecie UI i wygenerowanym kodzie

Pakiet interfejsu

Pakiety interfejsu to nowy, elastyczny sposób wymiany informacji z interfejsu. Projektanci używają Usługa przekaźnika dla wtyczki Figma do tworzenia pakietów UI z komponentów w Figmie. Wykonuję deklaruje on, że projekt jest gotowy do użycia przez programistów. Następnie projektanci tworzą przez podanie adresu URL pliku projektu Figma.

Deweloperzy używają wtyczki Android Studio do importowania pakietów UI z narzędzia Figma pliku projektu. W projekcie Android Studio pakiet interfejsu zawiera funkcje deklaratywne opisy zaimportowanych komponentów Figma wraz z powiązanymi zasobami, w tym pliki czcionek, obrazy i pliki SVG.

Pakiety interfejsu to trwałe artefakty i można je zatwierdzić do kontroli źródła. Gdy deweloper zaimportuje pakiet Figma w projekcie Android Studio, pliki dodano do projektu w folderze ui-packages. Oto przykład zaimportowanej Pakiet interfejsu:

Zawartość pakietu UI

Projekt z zaimportowanym pakietem interfejsu zawiera te pliki:

  • [component_name].json – plik JSON opisujący komponent (np. story_card.json).
  • config.json – przechowuje metadane określonego pakietu interfejsu użytkownika.
  • fonts/ – folder, w którym przechowywane są zasoby czcionek używane przez komponent (jeśli są używane). dowolne.
  • *.png – komponenty z obrazem używane w komponencie (np. menu.png), jeśli dowolne.
  • [component_name]_preview.png – obraz podglądu komponentu (dla np. story_card_preview.png).
  • *.svg – zasoby graficzne wektorowe użyte w komponencie (np. trójkąta).
  • FONTS.txt – lista użytych czcionek (jeśli istnieją).
  • DEPS.txt – nazwy wszystkich komponentów podrzędnych.
  • VERSION.txt – wersja usługi Relay używana do tworzenia i importowania interfejsu użytkownika Przesyłka.

Te dane są przechowywane pod nazwą src/main/ui-packages/[package_name].

Usuwam pakiety interfejsu

Aby usunąć z projektu pakiet interfejsu, możesz usunąć folder w ui-packages/ Ponowne kompilowanie projektu po usunięciu folderu spowoduje usunięcie wygenerowany kod.

Wygenerowana struktura folderu z kodem

Podczas kompilacji projektu te pakiety UI są przekształcane w wygenerowany kod zawierające funkcje @Composable, które deweloper może wywołać. Są to przechowywane w ramach subskrypcji build/generated/. W widoku Androida są one widoczne jako java (generated) i res w katalogu modułów (w tym przypadku są to moduły app ).

Foldery zawierające pliki wygenerowane w Android Studio

Poniższe zrzuty ekranu pokazują pliki w tym katalogu:

  • Zasoby, takie jak czcionki i obrazy, są kopiowane do: build/generated/res/relay/

    Zasoby zostały wygenerowane w folderze res

  • Wygenerowany kod każdego pakietu UI jest umieszczany w build/generated/source/relay/ Folder kodu każdego wygenerowanego pakietu UI zawiera pojedynczy plik odpowiadający zaimportowanemu komponentowi. Dodatkowo zawiera jeden plik z końcówką Fonts.kt, który zawiera odwołania do zasobów czcionek używanych przez komponent.

    Wygenerowane pliki Kotlin w folderze java(wygenerowanego)

  • Dostępna jest też biblioteka środowiska wykonawczego com.google.relay.compose, która udostępnia funkcji używanych przez wygenerowany kod.

    Biblioteka środowiska wykonawczego usługi przekaźnika
.

Wygenerowana struktura kodu

Elementy kompozycyjne

Komponenty w Figmie składają się z warstw. Na przykład ten projekt zawiera warstwa ramki Hello Card, która zawiera dwie warstwy podrzędne: Obraz (obraz warstwa) i Tytuł (warstwa tekstowa):

Komponent Hello Card z warstwami Obraz i Tytuł

Gdy ten projekt zostanie przekonwertowany na kod, utworzymy osobny dla każdej warstwy, gdzie nazwa warstwy Figma to nazwa funkcja kompozycyjna (zmodyfikowana zgodnie ze składnią Kotlin). Warstwy są przetłumaczone w następujący sposób:

  1. Warstwa Hello Card:

    @Composable
fun HelloCard(
  modifier: Modifier = Modifier,
  title: String
) {
  TopLevel(modifier = modifier) {
      Image()
      Title(title = title)
  }
]

  2. Warstwa obrazu:

    @Composable
fun Image(modifier: Modifier = Modifier) {
  Image(...)
}

  3. Warstwa tytułowa:

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

Przetłumaczone warianty i parametry Figmy

Jeśli komponent Figma ma kilka wariantów, wygenerowany kod zawiera element enum dla każdej właściwości wariantu. Wartości w każdej wyliczeniu wariantów odpowiadają wartościom wartości właściwości tego wariantu. Funkcja kompozycyjna zawiera parametr wyliczeniowa wariantów.

// 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 { ... }
           }
       }
   }
}

Każdy parametr treści i moduł obsługi interakcji komponentu Figma przeniesione na parametr funkcji kompozycyjnej. Element kompozycyjny NewsCard poniżej zawiera cztery parametry treści (jeden obraz i trzy ciągi znaków) oraz dwa interakcje. modułów obsługi (dwóch ostatnich parametrów).

/**
 *   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 = {}
) {...}
.