1. Avant de commencer
Relay est un kit d'outils qui permet aux équipes de concevoir des composants d'interface utilisateur (UI) sous Figma et de les utiliser directement dans les projets Jetpack Compose. Il élimine les spécifications de conception compliquées et les cycles de contrôle qualité fastidieux. Les équipes peuvent ainsi fournir rapidement de remarquables UI Android.
Dans cet atelier de programmation, vous allez apprendre à intégrer les packages UI de Relay au processus de développement de Compose. Il se concentre sur les techniques d'intégration (et non sur le workflow de bout en bout). Pour en savoir plus sur le workflow général de Relay, consultez le tutoriel de base sur Relay.
Conditions préalables
- Vous disposez d'une expérience de base avec Compose. Si vous ne l'avez pas déjà fait, suivez l'atelier de programmation Principes de base de Jetpack Compose.
- Connaissance pratique de la syntaxe Kotlin
Points abordés
- Importer des packages UI.
- Intégrer les packages UI à l'architecture de navigation et de données.
- Encapsuler les packages UI avec la logique du contrôleur.
- Mapper les styles Figma dans votre thème Compose.
- Remplacer les packages UI par les composables du code généré.
Objectifs de l'atelier
- Une conception d'application réaliste sur la base de packages fournis par un concepteur. Il s'agit d'une application de suivi quotidien appelée Reflect qui valorise la pleine conscience et les bonnes habitudes. Elle comporte une collection de différents indicateurs, ainsi que l'UI permettant de les ajouter et de les gérer. L'application se présente comme suit :
Ce dont vous aurez besoin
- La dernière version d'Android Studio.
- Un compte Figma sans frais et un jeton d'accès personnel.
2. Configuration
Obtenir le code
Pour obtenir le code de cet atelier de programmation, effectuez l'une des opérations suivantes :
- Clonez le dépôt
relay-codelabsdepuis GitHub :
$ git clone https://github.com/googlecodelabs/relay-codelabs
- Accédez au dépôt
relay-codelabssur GitHub, sélectionnez la branche de votre choix, cliquez sur Code > Download zip (Code > Télécharger le ZIP) et décompressez le fichier ZIP téléchargé.
Dans les deux cas, la branche main comporte le code de démarrage et la branche end comporte le code de solution.
Installer le plug-in Relay for Android Studio
Si vous ne disposez pas encore du plug-in Relay for Android Studio, procédez comme suit :
- Dans Android Studio, cliquez sur Settings > Plugins (Paramètres > Plug-ins).
- Dans la zone de texte, saisissez
Relay for Android Studio. - Dans l'extension qui apparaît dans les résultats de recherche, cliquez sur Install (Installer).
- Si la boîte de dialogue Third-party plugins privacy note (Avis de confidentialité sur les plug-ins tiers) s'affiche, cliquez sur Accept (Accepter).
- Cliquez sur OK > Restart (OK > Redémarrer).
- Si la boîte de dialogue Confirm exit (Confirmer la sortie) s'affiche, cliquez sur Exit (Quitter).
Connecter Android Studio à Figma
Relay récupère les packages UI avec l'API Figma. Pour l'utiliser, vous devez disposer d'un compte Figma sans frais et d'un jeton d'accès personnel. C'est pourquoi ils figurent dans la section Ce dont vous aurez besoin.
Si vous n'avez jamais connecté Android Studio à Figma, procédez comme suit :
- Dans votre compte Figma, cliquez sur l'icône de votre profil en haut de la page et sélectionnez Settings (Paramètres).
- Dans la section Personal access tokens (Jetons d'accès personnels), décrivez le jeton dans la zone de texte, puis appuyez sur
Enter(oureturnavec macOS). Le jeton est généré. - Cliquez sur Copy this token (Copier ce jeton).
- Dans Android Studio, sélectionnez Tools > Relay Settings (Outils > Paramètres Relay). La boîte de dialogue Relay settings (Paramètres Relay) s'affiche.
- Dans la zone de texte Figma Access Token (Jeton d'accès Figma), coller le jeton accès, puis cliquez sur OK. Votre environnement est configuré.
3. Examiner la conception de l'application
Pour l'application Reflect, nous avons demandé un graphiste de nous aider à définir les couleurs, la typographie, la mise en page et le comportement de l'application. Nous avons créé ces conceptions en accord avec les conventions Material Design 3 de sorte que l'application fonctionne parfaitement avec les composants et les thèmes Material.
Examiner l'écran d'accueil
L'écran d'accueil affiche une liste d'indicateurs définis par l'utilisateur. Il fournit également les affordances pour modifier le jour actif et créer d'autres indicateurs.
Dans Figma, le graphiste a décomposé l'écran en plusieurs composants, a défini les API correspondantes et les a mis en package avec le plug-in Relay for Figma. Une fois les packages de composants définis, vous pouvez les importer dans votre projet Android Studio.
Examiner l'écran "Add/Edit" (Ajouter/Modifier)
L'écran "Add/Edit" (Ajouter/Modifier) permet aux utilisateurs d'ajouter ou de modifier des indicateurs. L'affichage varie légèrement en fonction du type d'indicateur.
De même, cet écran se décompose en plusieurs composants (en package).
Examiner le thème
Les couleurs et la typographie de cette conception sont implémentées sous la forme de styles Figma basés sur le nom des jetons Material Design 3. L'interopérabilité avec les thèmes Compose et les composants Material est ainsi améliorée.
4. Importer des packages UI
Obtenir le lien vers la source Figma
Pour Importer des packages UI dans votre projet, vous devez importer la source de conception sur Figma.
Pour obtenir le lien vers la source Figma, procédez comme suit :
- Dans Figma, cliquez sur Import file (Importer un fichier), puis sélectionnez le fichier
ReflectDesign.figqui se trouve dans le dossier du projet de l'atelier de programmation. - Effectuez un clic droit sur ce fichier, puis sélectionnez Copy link (Copier le lien). Vous en aurez besoin dans la section suivante.
Importer des packages UI dans le projet
- Dans Android Studio, ouvrez le projet
./CompleteAppCodelab. - Cliquez sur File > New > Import UI Packages (Fichier > Nouveau > Importer des packages UI). La boîte de dialogue Import UI Packages (Importer des packages UI) s'affiche.
- Dans la zone de texte Figma source URL (URL de la source Figma), collez l'URL que vous avez copié à la section précédente.
- Dans la zone de texte App theme (Thème d'application), saisissez
com.google.relay.example.reflect.ui.theme.ReflectTheme. Cela garantit que les aperçus générés utilisent le thème personnalisé. - Cliquez sur Next (Suivant). Un aperçu des packages UI du fichier apparaît.
- Cliquez sur Create (Créer). Les packages sont importés dans le projet.
- Accédez à l'onglet Project (Projet) et cliquez sur la flèche de développement
en regard du dossier ui-packages.
- Cliquez sur la flèche de développement en regard de l'un des dossiers du package. Notez qu'il comporte un fichier source
JSONet des dépendances d'asset. - Ouvrez le fichier source
JSON. Le module Relay affiche un aperçu du package et de ses API.
Créer et générer le code
- En haut d'Android Studio, cliquez sur
Make project (Créer le projet). Le code généré pour chaque package est ajouté au fichier java/com.google.relay.example.reflect. Les composables générés comportent l'ensemble des informations sur la mise en page et les styles de la conception Figma. - Si nécessaire, cliquez sur Split (Partager) pour afficher les volets de code et d'aperçu l'un à côté de l'autre.
- Ouvrez le fichier
range/Range.kt. Notez que les aperçus Compose ont été créés pour chaque variante de composant.
5. Intégrer les composants
Dans cette section, examinez de plus près le code généré pour l'indicateur Switch (Bouton bascule).
- Dans Android Studio, ouvrez le fichier
com/google/relay/example/reflect/switch/Switch.kt.
Switch.kt (généré)
/**
* This composable was generated from the switch UI Package.
* Generated code; don't edit directly.
*/
@Composable
fun Switch(
modifier: Modifier = Modifier,
isChecked: Boolean = false,
isPressed: Boolean = false,
emoji: String = "",
title: String = ""
) {
TopLevel(modifier = modifier) {
if (isChecked) {
ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
}
if (isPressed) {
State(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
}
TopLevelSynth {
Label(modifier = Modifier.rowWeight(1.0f)) {
Emoji(emoji = emoji)
Title(
title = title,
modifier = Modifier.rowWeight(1.0f)
)
}
if (isChecked) {
Checkmark {
Vector(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f))
}
}
}
}
}
- Notez ce qui suit :
- L'ensemble des informations sur la mise en page et les styles de la conception Figma ont été générées.
- Les sous-composants se divisent en composables distincts.
- Les aperçus des composables sont générés pour chaque variante de conception.
- Les couleurs et la typographie sont encodées en dur. Vous corrigerez cela plus tard.
Insérer un indicateur
- Dans Android Studio, ouvrez le fichier
java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Il comporte les données et la logique d'interaction des indicateurs d'habitude. Ce composant extrait actuellement des données brutes du modèle d'indicateur.
- Importez le package
com.google.relay.example.reflect.switch.Switchdans le fichier. - Créez un bloc
whenqui varie en fonction du champtrackerData.tracker.type. - Dans le corps du bloc
when, appelez la fonctionSwitch()Composablelorsque le type estTrackerType.BOOLEAN.
Le code doit se présenter comme suit :
TrackerControl.kt
when (trackerData.tracker.type) {
TrackerType.BOOLEAN ->
Switch(
title = trackerData.tracker.name,
emoji = trackerData.tracker.emoji
)
else ->
Text(trackerData.tracker.toString())
}
- Recompilez le projet. La page d'accueil restitue maintenant l'indicateur Switch (Bouton bascule) tel qu'il est conçu avec LiveData.
6. Ajouter l'état et l'interaction
Les packages UI sont sans état. Le rendu correspond simplement aux paramètres transmis. Les applications réelles ont besoin d'états et d'interactions. Les composables générés peuvent transmettre les gestionnaires d'interactions (comme n'importe quel paramètre). Mais où conserver les états que gèrent ces gestionnaires ? Comment éviter de transmettre le même gestionnaire à chaque instance ? Comment extraire les compositions de packages sous la forme de composables réutilisables ? Dans ces cas, nous recommandons d'encapsuler les packages générés dans une fonction Composable personnalisée.
Encapsuler les packages UI dans une fonction Composable de contrôleur.
Encapsuler les packages UI dans une fonction Composable de contrôleur permet de personnaliser la présentation ou la logique métier, et de gérer l'état local, le cas échéant. Les graphistes peuvent modifier le package UI d'origine dans Figma sans que vous deviez mettre à jour le code du wrapper.
Pour créer un contrôleur dédié à l'indicateur Switch (Bouton bascule), procédez comme suit :
- Dans Android Studio, ouvrez le fichier
java/com/google/relay/example/reflect/ui/components/SwitchControl.kt. - Dans la fonction
SwitchControl()Composable, transmettez les paramètres suivants :
trackerData: un objetTrackerDatamodifier: un objet "decorator"onLongClick: un rappel d'interaction qui permet d'appuyer de manière prolongée sur un indicateur pour le modifier ou le supprimer
modifier
- Transmettez un modificateur
combinedClickableà la fonctionSwitch()pour gérer les clics et les appuis de manière prolongée. - Transmettez les valeurs de l'objet
TrackerDataà la fonctionSwitch(), y compris la méthodeisToggled().
La fonction SwitchControl() finalisée ressemble à l'extrait de code suivant :
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
.height(64.dp)
.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)
}
- Dans le fichier
TrackerControl.kt, supprimez l'importationSwitchet remplacez la fonctionSwitch()par un appel de la fonctionSwitchControl(). - Ajoutez les cas pour les constantes d'énumérateur
TrackerType.RANGEetTrackerType.COUNT.
Le bloc when finalisé ressemble à l'extrait de code suivant :
SwitchControl.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 },
)
}
- Recompilez le projet. Vous pouvez maintenant afficher les indicateurs et interagir avec. L'écran d'accueil est finalisé.
7. Mapper les composants existants
Relay permet aux développeurs de personnaliser un code généré en remplaçant les packages UI par des composables existants. C'est un excellent moyen d'extraire des composants clé en main ou même des systèmes de conception personnalisés dans votre code.
Mapper un champ de texte
L'image ci-dessous correspond à la conception du Switch Tracker Editor dans la boîte de dialogueAdd/edit tracker (Ajouter/Modifier l'indicateur) :
Le graphiste a utilisé un ReflectTextField dans la conception, pour lequel il existe déjà une implémentation dans le code basée sur les champs de texte Material Design 3. Figma n'accepte pas les champs de texte en mode natif. Ainsi, le code par défaut généré par Relay ressemble seulement à la conception (il ne s'agit pas d'une commande fonctionnelle).
Pour remplacer l'implémentation réelle de cet élément, vous avez besoin de deux choses : un package UI avec champs de texte et un fichier de mappage. Heureusement, le graphiste a déjà mis en package les composants du système de conception dans Figma et intégré à sa conception un composant "button" pour Tracker Editor. Par défaut, le package imbriqué est généré sous la forme d'une dépendance du package "settings bar" que vous transférez à l'aide du mappage de composants.
Créer un fichier de mappage
Le plug-in Relay for Android Studio fournit un raccourci pour créer un fichier de mappage de composants.
Pour créer un fichier de mappage, Procédez comme suit :
- Dans Android Studio, effectuez un clic droit sur le package UI
text_field, puis sélectionnez Generate mapping file (Générer le fichier de mappage).
- Dans le fichier, saisissez le code suivant :
text_field.json
{
"target": "ReflectTextField",
"package": "com.google.relay.example.reflect.ui.components",
"generatePreviews": false
}
Les fichiers de mappage de composants identifient une cible de classe Compose et un package, ainsi qu'une collection d'objets fieldMapping en option. Le mappage de champs permet de convertir les paramètres du package en paramètres Compose attendus. Dans ce cas, les API sont identiques. Il vous suffit donc de spécifier la classe de la cible.
- Recompilez le projet.
- Dans le fichier
trackersettings/TrackerSettings.kt, identifiez la fonction composableTitleFieldStyleFilledStateEnabledTextConfigurationsInputText()générée et notez qu'elle comprend un composantReflectTextFieldgénéré.
TrackerSettings.kt (généré)
@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.requiredHeight(56.0.dp)
)
}
8. Mapper avec les thèmes Compose
Par défaut, Relay génère des valeurs littérales pour les couleurs et la typographie. Même si cela garantit la qualité des traductions, les composants ne peuvent pas utiliser le système de thématisation Compose. L'effet est manifeste lorsque vous affichez l'application en mode sombre :
Le composant de navigation "day" est quasiment invisible et les couleurs sont inadaptées. Pour résoudre ce problème, utilisez la fonctionnalité de mappage des styles de Relay pour associer les styles Figma aux jetons de thème Compose du code généré. Cela permet d'assurer la cohérence visuelle entre les composants Relay et Material Design 3, et d'accepter le mode sombre.
Créer un fichier de mappage de styles
- Dans Android Studio, accédez au dossier
src/main/ui-package-resources/style-mappingset créez un fichierfigma_styles.jsoncomportant le code suivant :
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"
}
}
}
}
Les fichiers de mappage de thèmes sont structurés avec deux objets de niveau supérieur : figma et compose. Dans ces objets, les couleurs et les définitions de type de chaque environnement sont associées par des jetons intermédiaires. Cela permet de mapper plusieurs styles Figma dans une même entrée de thème Compose. Cela est particulièrement utile lorsque vous acceptez les thèmes clairs et les thèmes sombres.
- Examinez le fichier de mappage et la façon dont il remappe les propriétés de typographie de Figma en fonction des attentes de Compose.
Réimporter les packages UI
Une fois le fichier de mappage créé, vous devez réimporter l'ensemble des packages UI dans votre projet. En effet, les valeurs des styles Figma ont toutes été supprimées lors du premier import (aucun fichier de mappage n'avait été fourni).
Pour réimporter les packages UI, procédez comme suit :
- Dans Android Studio, sélectionnez File > New > Import UI Packages (Fichier > Nouveau > Importer des packages UI). La boîte de dialogue Import UI Packages (Importer des packages UI) s'affiche.
- Dans la zone de texte "Figma source URL" (URL de la source Figma), indiquez l'URL du fichier de la source Figma.
- Cochez la case Translate Figma styles to Compose theme (Convertir les styles Figma en thème Compose).
- Cliquez sur Next (Suivant). Un aperçu des packages UI du fichier apparaît.
- Cliquez sur Create (Créer). Les packages sont importés dans le projet.
- Recompilez le projet, puis ouvrez le fichier
switch/Switch.ktpour afficher le code généré.
Switch.kt (généré)
@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)
)
}
- Notez la définition du paramètre
backgroundColordans le champMaterialTheme.colorScheme.surfaceVariantde l'objet de thèmes Compose. - Dans le volet d'aperçu, faites passer l'application en mode sombre. Le thème s'applique correctement et les bugs visuels ont été corrigés.
9. Félicitations
Félicitations ! Vous avez appris à intégrer Relay à vos applications Compose !