Crea un'app completa con Relay e Jetpack Compose

1. Prima di iniziare

Relay è un toolkit che consente ai team di progettare componenti UI in Figma e utilizzarli direttamente nei progetti Jetpack Compose. Elimina la necessità di noiose specifiche di progettazione e cicli di QA, il che aiuta i team a fornire rapidamente ottime UI per Android.

In questo codelab, imparerai a integrare i pacchetti di UI di inoltro nel processo di sviluppo di Compose. Si concentra sulle tecniche di integrazione, non sul flusso di lavoro end-to-end. Per informazioni sul flusso di lavoro generale per l'inoltro, consulta il tutorial di base di inoltro.

Prerequisiti

• Esperienza di base con Compose. Se non lo hai già fatto, completa il codelab sulle nozioni di base di Jetpack Compose.
• Esperienza con la sintassi di Kotlin.

Cosa imparerai a fare

• Come importare pacchetti UI.
• Come integrare i pacchetti UI con l'architettura di navigazione e dati.
• Aggregare i pacchetti UI con la logica controller.
• Come mappare gli stili Figma al tema Compose.
• Come sostituire i pacchetti UI con elementi componibili esistenti nel codice generato.

Cosa creerai

• Un design realistico dell'app basato su pacchetti di inoltro forniti da un designer. L'app si chiama Reflect, un'app di monitoraggio quotidiano che promuove la mindfulness e le buone abitudini. Contiene una raccolta di tracker di vari tipi e UI per aggiungerli e gestirli. L'app è simile alla seguente immagine:

Che cosa ti serve

• Android Studio Electric Eel o versioni successive
• Un account Figma senza costi e un token di accesso personale.

2. Configurazione

Ottieni il codice

Per ottenere il codice per questo codelab, effettua una delle seguenti operazioni:

• Clona il repository relay-codelabs da GitHub:

$ git clone https://github.com/googlecodelabs/relay-codelabs

• Vai al repository relay-codelabs su GitHub, seleziona il ramo desiderato e fai clic su Codice > Scarica il file ZIP e apri il file ZIP scaricato.

In entrambi i casi, il ramo main contiene il codice di avvio, mentre il ramo end contiene il codice della soluzione.

Installare il plug-in Relay per Android Studio

Se non disponi già del plug-in Relay for Android Studio, procedi nel seguente modo:

1. In Android Studio, fai clic su Impostazioni > Plug-in.
2. Nella casella di testo, inserisci Relay for Android Studio.
3. In corrispondenza dell'estensione visualizzata nei risultati di ricerca, fai clic su Installa.

4. Se viene visualizzata una finestra di dialogo Note sulla privacy per i plug-in di terze parti, fai clic su Accetta.
5. Fai clic su OK > Riavvia.
6. Se viene visualizzata la finestra di dialogo Conferma uscita, fai clic su Esci.

Collegare Android Studio a Figma

Relay recupera i pacchetti UI con l'API Figma. Per utilizzarlo, devi avere un account Figma senza costi e un token di accesso personale; ecco perché sono elencati nella sezione Che cosa ti serve.

Se non hai ancora collegato Android Studio a Figma, procedi nel seguente modo:

1. Nel tuo account Figma, fai clic sull'icona del tuo profilo nella parte superiore della pagina e seleziona Settings (Impostazioni).
2. Nella sezione Token di accesso personali, inserisci una descrizione del token nella casella di testo, quindi premi Enter (o return su macOS). Viene generato un token.
3. Fai clic su Copia questo token.

4. In Android Studio, seleziona Strumenti > Impostazioni inoltro. Viene visualizzata la finestra di dialogo Impostazioni di inoltro.
5. Nella casella di testo Figma Access Token (Token di accesso Figma), incolla il token di accesso e fai clic su OK. L'ambiente è configurato.

Nota: per ulteriori informazioni sulla configurazione dell'ambiente di sviluppo Relay, consulta Installare Relay.

3. Esamina il design dell'app

Per l'app Reflect, abbiamo collaborato con un designer per aiutarci a definire colore, tipografia, layout e comportamento dell'app. Abbiamo creato questi design in conformità alle convenzioni di Material Design 3, in modo che l'app si integri perfettamente con i temi e i componenti Material.

Controllare la schermata Home

La schermata principale mostra un elenco di tracker definiti dall'utente. Fornisce inoltre inviti per cambiare il giorno attivo e creare altri tracker.

In Figma, il nostro designer ha suddiviso questa schermata in più componenti, definito le relative API e pacchettizzato con il plug-in Relay for Figma. Dopo aver pacchettizzato questi componenti, puoi importarli nel tuo progetto Android Studio.

Nota: la definizione dei parametri dei componenti funziona al meglio come collaborazione tra designer e sviluppatori. In questo modo, entrambi i ruoli hanno una visualizzazione unificata del componente e delle opzioni disponibili.

Consulta la schermata di aggiunta/modifica

La schermata Aggiungi/Modifica consente agli utenti di aggiungere o modificare tracker. Il formato visualizzato è leggermente diverso in base al tipo di tracker.

Analogamente, questa schermata è divisa in più componenti pacchettizzati.

Esamina il tema

I colori e gli elementi tipografici per questo design sono implementati come stili Figma in base ai nomi dei token Material Design 3. In questo modo, l'interoperabilità è migliore con i temi Compose e con i componenti Material.

4. Importa pacchetti UI

Generare il link alla fonte Figma

Prima di poter importare i pacchetti UI nel progetto, devi caricare l'origine del progetto in Figma.

Per recuperare il link alla fonte Figma:

1. In Figma, fai clic su Importa file, quindi seleziona il file ReflectDesign.fig che si trova nella cartella del progetto CompleteAppCodelab.
2. Fai clic con il tasto destro del mouse sul file e seleziona Copia link. Ti servirà nella prossima sezione.

Nota: non è necessario importare file sorgente Figma al di fuori di questo codelab. I designer forniscono un URL.

Importare pacchetti UI nel progetto

1. In Android Studio, apri il progetto ./CompleteAppCodelab.
2. Fai clic su File > Nuovo > Importare pacchetti UI. Viene visualizzata la finestra di dialogo Importa pacchetti UI.
3. Nella casella di testo Figma source URL (URL di origine Figma), incolla l'URL che hai copiato nella sezione precedente.

4. Nella casella di testo Tema dell'app, inserisci com.google.relay.example.reflect.ui.theme.ReflectTheme. In questo modo, le anteprime generate utilizzeranno il tema personalizzato.
5. Fai clic su Avanti. Verrà visualizzata un'anteprima dei pacchetti UI del file.
6. Fai clic su Crea. I pacchetti vengono importati nel progetto.
7. Vai alla scheda Progetto e fai clic sulla freccia di espansione accanto alla cartella ui-packages.

Nota: se non vedi la cartella ui-packages, fai clic con il pulsante destro del mouse sulla cartella app e seleziona Ricarica dal disco.

8. Fai clic sulla freccia di espansione accanto a una delle cartelle del pacchetto e nota che contiene un file di origine JSON e dipendenze degli asset.
9. Apri il file di origine JSON. Il modulo Relay mostra un'anteprima del pacchetto e della relativa API.

Crea e genera codice

1. Nella parte superiore di Android Studio, fai clic su Crea progetto. Il codice generato per ogni pacchetto viene aggiunto alla cartella java/com.google.relay.example.reflect. I componibili generati contengono tutte le informazioni su layout e stile del design di Figma.
2. Apri il file com/google/relay/example/reflect/range/Range.kt.
3. Tieni presente che le anteprime di Compose vengono create per ogni variante del componente. Se necessario, fai clic su Dividi in modo da visualizzare il codice e i riquadri di anteprima uno accanto all'altro.

5. Integra i componenti

In questa sezione, osserverai più da vicino il codice generato per il tracker Cambia tracker.

1. In Android Studio, apri il file com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (generato)

/**
 * This composable was generated from the UI Package 'switch'.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth(modifier = Modifier.rowWeight(1.0f)) {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            Checkmark {
                if (isChecked) {
                    Icon()
                }
            }
        }
    }
}

2. Tieni presente quanto segue:

• Vengono generati tutti i layout e gli styling dal design di Figma.
• I sottoelementi sono suddivisi in elementi componibili separati.
• Le anteprime componibili vengono generate per tutte le varianti del design.
• Colore e stili tipografici sono impostati come hardcoded. Puoi correggere il problema in un secondo momento.

Inserisci il tracker

1. In Android Studio, apri il file java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Questo file fornisce dati e logica di interazione agli strumenti per il monitoraggio delle abitudini.
2. Crea ed esegui l'app nell'emulatore. Attualmente, questo componente produce dati non elaborati dal modello di tracker.

3. Importa il pacchetto com.google.relay.example.reflect.switch.Switch nel file.
4. Sostituisci Text(text = trackerData.tracker.toString()) con un blocco when che ruota in base al campo trackerData.tracker.type.
5. Nel corpo del blocco when, chiama la funzione Composable di Switch() quando il tipo è TrackerType.BOOLEAN.

Il tuo codice sarà simile al seguente:

TrackerControl.kt

// TODO: replace with Relay tracker components
when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

6. Ricrea il progetto. Ora la home page mostra correttamente il tracker Cambia tracker come progettato per i dati in tempo reale.

6. Aggiungi stato e interazione

I pacchetti UI sono stateless. Ciò che viene mostrato è un semplice risultato dei parametri trasmessi. Ma le app reali richiedono interazione e stato. I gestori di interazione possono essere passati nei componibili generati come qualsiasi altro parametro, ma dove si mantiene lo stato manipolato da questi gestori? Come si eviti di passare lo stesso gestore a ogni istanza? Come puoi astrarre composizioni di pacchetti in componenti componibili riutilizzabili? Per questi casi, ti consigliamo di aggregare i pacchetti generati in una funzione Composable personalizzata.

Aggrega i pacchetti UI in una funzione Composable del controller

L'aggregazione dei pacchetti UI in una funzione Composable del controller consente di personalizzare la presentazione o la logica di business e, se necessario, gestire lo stato locale. I designer sono comunque liberi di aggiornare il pacchetto UI originale in Figma senza dover aggiornare il codice del wrapper.

Per creare un controller per il tracker Switch, procedi nel seguente modo:

1. In Android Studio, apri il file java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
2. Nella funzione SwitchControl() Composable, trasmetti i seguenti parametri:

• trackerData: un oggetto TrackerData
• modifier: un oggetto decorator
• onLongClick: un callback di interazione per abilitare la pressione prolungata sui tracker per la modifica e l'eliminazione

Nota: la ricezione dei dati del modello come oggetto disaccoppia l'API del controller dallo schema dei dati Intervallo.

3. Inserisci una funzione Switch() e passa un modificatore combinedClickable per gestire il clic e la pressione prolungata.
4. Passa valori dall'oggetto TrackerData alla funzione Switch(), incluso il metodo isToggled().

La funzione SwitchControl() completata ha un aspetto simile al seguente snippet di codice:

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}

5. Nel file TrackerControl.kt, rimuovi l'importazione Switch e sostituisci la funzione Switch() con una chiamata alla funzione SwitchControl().
6. Aggiungi casi per le costanti di enumeratore TrackerType.RANGE e TrackerType.COUNT.

Nota: le funzioni RangeControl() e ValueControl() Composable sono già implementate nel codice di avvio.

Il blocco when completato ha un aspetto simile al seguente snippet di codice:

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}

7. Ricrea il progetto. Ora puoi visualizzare e interagire con i tracker. La schermata Home è completa.

7. Mappa i componenti esistenti

Relay consente agli sviluppatori di personalizzare il codice generato sostituendo i pacchetti UI con elementi componibili esistenti. È un ottimo modo per generare componenti pronti all'uso o anche sistemi di progettazione personalizzati nel codice.

Mappare un campo di testo

La seguente immagine è il design del componente Tracker Settings nella finestra di dialogo Aggiungi/modifica tracker:

Il nostro designer ha utilizzato un ReflectTextField nel design, per il quale disponiamo già di un'implementazione nel codice basata sui campi di testo di Material Design 3. Figma non supporta i campi di testo in modo nativo, quindi il codice predefinito generato da Relay è simile al design; non è un controllo funzionale.

Per testare l'implementazione attuale di TrackerSettings:

1. In Android Studio, crea ed esegui l'app nell'emulatore.
2. Premi a lungo sulla riga di un tracker e seleziona Modifica.
3. Tocca il campo di testo Title e nota che non risponde all'interazione.

Per sostituire l'implementazione reale di questo elemento, sono necessari due elementi: un pacchetto UI con campo di testo e un file di mappatura. Fortunatamente il nostro designer ha già pacchettizzato i componenti del sistema di progettazione in Figma e ha utilizzato un componente di campo di testo nel progetto per Tracker Settings. Per impostazione predefinita, questo pacchetto nidificato viene generato come dipendenza, ma viene scambiato mediante la mappatura dei componenti.

Creare un file di mappatura

Il plug-in Relay per Android Studio fornisce una scorciatoia per creare file di mappatura dei componenti.

Per creare un file di mappatura:

1. In Android Studio, fai clic con il pulsante destro del mouse sul pacchetto UI text_field, quindi seleziona Genera file di mappatura.

2. Viene visualizzata una finestra di dialogo del file di mappatura. Inserisci le seguenti opzioni:

• In Target componibile, seleziona Utilizza componibile esistente e inserisci com.google.relay.example.reflect.ui.components.ReflectTextField.
• In File generato, seleziona Genera implementazione e deseleziona Genera anteprima di composizione

3. Fai clic su Genera file di mappatura. Verrà generato il seguente file di mapping:

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generateImplementation": true,
  "generatePreviews": false,
}

I file di mappatura dei componenti identificano una destinazione e un pacchetto della classe Compose, nonché una raccolta facoltativa di oggetti fieldMapping. Queste mappature dei campi ti consentono di trasformare i parametri del pacchetto nei parametri Compose previsti. In questo caso, le API sono identiche, quindi devi specificare solo la classe di destinazione.

4. Ricrea il progetto.
5. Nel file trackersettings/ TrackerSettings.kt, trova la funzione componibile TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() generata e nota che include un componente ReflectTextField generato.

TrackerSettings.kt (generato)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.fillMaxWidth(1.0f).requiredHeight(56.0.dp)
    )
}

6. Ricrea il progetto. Ora puoi interagire con i campi delle impostazioni del tracker. La schermata di modifica è completa.

Nota: per ulteriori informazioni sulla mappatura dei componenti di inoltro, consulta la sezione Mappatura di componenti al codice esistente.

8. Temi di Map to Compose

Per impostazione predefinita, Relay genera valori letterali per colori e tipografia. Questo garantisce l'accuratezza della traduzione, ma impedisce ai componenti di utilizzare il sistema di tematizzazione di Compose. Questo è evidente quando visualizzi la tua app in modalità Buio:

Il componente di navigazione giornaliera è quasi invisibile e i colori sono errati. Per risolvere il problema, utilizza la funzionalità di mappatura degli stili in Relay per collegare gli stili Figma ai token del tema Scrivi tema nel codice generato. Ciò aumenta la coerenza visiva tra i componenti di Relay e Material Design 3 e consente il supporto della modalità Buio.

Creare un file di mappatura degli stili

1. In Android Studio, vai alla directory src/main/ui-package-resources e crea una nuova directory denominata style-mappings. In questa directory, crea un file figma_styles.json contenente il seguente codice:

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

I file di mappatura dei temi sono strutturati con due oggetti di primo livello: figma e compose. All'interno di questi oggetti, le definizioni di colore e tipo sono collegate tra i due ambienti tramite token intermedi. In questo modo è possibile mappare più stili Figma a una singola voce del tema Compose, il che è utile quando supporti temi chiari e scuri.

2. Esamina il file di mappatura, soprattutto il modo in cui rimappa le proprietà tipografiche da Figma a ciò che si aspetta Compose.

Nota: per ulteriori informazioni sulla mappatura dello stile di inoltro, consulta la sezione Mappatura degli stili al tema Compose.

Reimporta pacchetti UI

Dopo aver creato un file di mappatura, devi reimportare tutti i pacchetti dell'interfaccia utente nel progetto perché tutti i valori di stile Figma sono stati eliminati al momento dell'importazione iniziale, poiché non è stato fornito un file di mappatura.

Per reimportare i pacchetti UI, segui questi passaggi:

1. In Android Studio, fai clic su File > Nuovo > Importare pacchetti UI. Viene visualizzata la finestra di dialogo Importa pacchetti UI.
2. Nella casella di testo dell'URL di origine di Figma, inserisci l'URL del file di origine di Figma.
3. Seleziona la casella di controllo Traduci gli stili di Figma in Componi tema.
4. Seleziona Importa configurazione personalizzata. Fai clic sull'icona della cartella, quindi seleziona il file appena creato: src/main/ui-package-resources/style-mappings/figma_styles.json.
5. Fai clic su Avanti. Verrà visualizzata un'anteprima dei pacchetti UI del file.
6. Fai clic su Crea. I pacchetti vengono importati nel progetto.

7. Ricrea il progetto e apri il file switch/Switch.kt per visualizzare il codice generato.

Switch.kt (generato)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}

8. Nota che il parametro backgroundColor è impostato sul campo MaterialTheme.colorScheme.surfaceVariant nell'oggetto Scrivi tema.
9. Esegui il progetto e attiva la modalità Buio nell'emulatore. Il tema è stato applicato correttamente e i bug visivi sono stati corretti.

9. Complimenti

Complimenti! Hai imparato a integrare Relay nelle tue app Compose.

Scopri di più

• Panoramica dell'inoltro, configurazione e documentazione
• Tutorial di base sull'inoltro
• Tutorial avanzato sull'inoltro
• Iscriviti alla newsletter di Relay