Informationen zu UI-Paket und generiertem Code

UI-Paket

UI-Pakete stellen eine neue flexible Möglichkeit zum Austausch von UI-Informationen dar. Designschaffende verwenden die Relay for Figma-Plug-in zum Erstellen von UI-Paketen aus Komponenten in Figma. Tun wird damit erklärt, dass das Design für die Verwendung durch Entwickelnde bereit ist. Designschaffende stellen dann Entwickelnden mit der URL zu ihrer Figma-Designdatei.

Entwickler verwenden das Android Studio-Plug-in, um UI-Pakete aus Figma zu importieren Designdatei. In einem Android Studio-Projekt enthält ein UI-Paket deklarative Beschreibungen der importierten Figma-Komponenten sowie zugehöriger Assets, einschließlich Schriftart-, Bild- und SVG-Dateien.

UI-Pakete sind persistente Artefakte und können der Versionsverwaltung per Commit zugewiesen werden. Wenn ein Entwickler ein Figma-Paket in ein Android Studio-Projekt importiert, werden die Dateien wurde dem Projekt im Ordner ui-packages hinzugefügt. Hier ist ein importiertes Beispiel UI-Paket:

<ph type="x-smartling-placeholder">
</ph> Inhalt eines UI-Pakets

Ein Projekt mit einem importierten UI-Paket enthält die folgenden Dateien:

  • [component_name].json: Eine JSON-Datei, die die Komponente beschreibt, z. B. story_card.json).
  • config.json: Speichert Metadaten für das spezifische UI-Paket.
  • fonts/: Ordner, in dem die von der Komponente verwendeten Schrift-Assets gespeichert sind, falls irgendetwas.
  • *.png: Bild-Assets, die in der Komponente verwendet werden (z. B. menu.png), wenn irgendetwas.
  • [component_name]_preview.png: Vorschaubild der Komponente (für Beispiel: story_card_preview.png).
  • *.svg: Vektorgrafik-Assets, die in der Komponente verwendet werden, z. B. ein Dreieck).
  • FONTS.txt: Eine Liste der verwendeten Schriftarten, falls vorhanden.
  • DEPS.txt: Namen aller untergeordneten Komponenten.
  • VERSION.txt – Die Relay-Version, die zum Erstellen und Importieren der UI verwendet wird Paket.

Diese sind unter „src/main/ui-packages/[package_name]“ gespeichert.

UI-Pakete entfernen

Um ein UI-Paket aus dem Projekt zu entfernen, können Sie den Ordner löschen unter ui-packages/ Wenn Sie das Projekt nach dem Entfernen des Ordners neu erstellen, werden seine generiert wurde.

Ordnerstruktur für generierten Code

Beim Erstellen des Projekts werden diese UI-Pakete in generierten Code umgewandelt. mit @Composable-Funktionen, die der Entwickler aufrufen kann. Dies sind gespeichert unter build/generated/. In der Android-Ansicht werden diese in Ihrem Modulverzeichnis (in diesem Fall app) als java (generated) und res angezeigt. -Verzeichnis).

Ordner, die generierte Dateien in Android Studio enthalten

Die folgenden Screenshots führen Sie durch die Dateien in diesem Verzeichnis:

  • Ressourcen wie Schriftarten und Bilder werden in build/generated/res/relay/

    Generierte Ressourcen im Ordner „res“

  • Bei jedem UI-Paket wird der generierte Code build/generated/source/relay/ Der generierte Code-Ordner jedes UI-Pakets enthält eine einzelne Datei für die importierte Komponente. Außerdem enthält eine einzelne Datei mit der Endung Fonts.kt und Verweisen auf die von der Komponente verwendeten Schrift-Assets.

    Generierte Kotlin-Dateien im Ordner „java(generated)“

  • Die Laufzeitbibliothek com.google.relay.compose bietet Funktionalität des generierten Codes verwendet.

    Relay-Laufzeitbibliothek

Struktur des generierten Codes

Zusammensetzbare Elemente

Komponenten in Figma bestehen aus Layern. Dieses Design enthält beispielsweise Frame-Ebene Hello Card, die die beiden untergeordneten Ebenen Image (ein Bild) enthält. Layer) und Title (Textebene):

Komponente „Hello Card“ mit Bild- und Titelebenen

Wenn dieses Design in Code übersetzt wird, erstellen wir separate zusammensetzbare Funktionen, für jede Ebene, wobei der Name der Figma-Ebene der Name des zusammensetzbare Funktion (geändert, um der Kotlin-Syntax zu entsprechen). Die Schichten sind wie folgt übersetzt:

  1. Ebene Hello Card:

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

  2. Bildebene:

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

  3. Titelebene:

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

Übersetzte Figma-Varianten und -Parameter

Wenn eine Figma-Komponente mehrere Varianten hat, enthält der generierte Code ein Aufzählung für jedes Variantenattribut ein. Die Werte in jeder Aufzählung der Variante entsprechen den Wert dieser Varianteneigenschaft. Die zusammensetzbare Funktion enthält jeweils einen Parameter Variante enum.

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

Jeder Inhaltsparameter und Interaktions-Handler einer Figma-Komponente der in einen Parameter der zusammensetzbaren Funktion übersetzt wird. Die unten zusammensetzbare Funktion NewsCard enthält vier Inhaltsparameter (ein Bild und drei Zeichenfolgen) sowie zwei Interaktionsmöglichkeiten. Handler (die letzten beiden Parameter).

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