Entwickler können den Codegenerierungsprozess anpassen, indem sie anstelle des generierten Codes eine Zuordnung zwischen einem UI-Paket und einer vorhandenen Codekomponente bereitstellen. Dies ist vorteilhaft, wenn die vorhandene Implementierung Funktionen hat, die mit dem generierten Code nicht realisiert werden können, z. B. Animationen oder komplexes Verhalten (z. B. ein Drop-down-Menü).
Entwickler legen mithilfe einer Zuordnungsdatei fest, wie Komponenten zugeordnet werden sollen. Eine Zuordnungsdatei teilt dem Codegenerator mindestens mit, wie die zusammensetzbare Zielfunktion zu erreichen ist, damit der richtige Clientcode erstellt werden kann.
Hier ein Beispiel:
In Figma erstellt ein Designer eine Kartenkomponente, die eine Instanz einer Play Bar-Komponente enthält, packt beide Komponenten und sendet sie an einen Entwickler.
Wenn der Entwickler die UI-Pakete aus Figma importiert, werden in ui-packages
zwei Verzeichnisse erstellt: card
und play_bar
. Beim Erstellen des Projekts werden zwei zusammensetzbare Funktionen erstellt: Card
und PlayBar
. Da Card eine Play Bar-Instanz in Figma enthält, enthält die zusammensetzbare Funktion Card
im Code in der Regel einen Aufruf der zusammensetzbaren Funktion PlayBar
.
Designer und Entwickler möchten jedoch, dass Card
stattdessen eine vorhandene zusammensetzbare Funktion (MyExistingPlaybar
) verwendet, deren Funktionen in Figma schwer zu beschreiben sind. Also fügt der Entwickler eine Zuordnungsdatei mit dem Namen play_bar.json
hinzu, die das play_bar
-UI-Paket MyExistingPlaybar
zuordnet:
{
"target": "MyExistingPlaybar",
"package": "com.example.myApp"
}
Wenn der Entwickler das Projekt jetzt erstellt, ruft Card
MyExistingPlaybar
statt PlayBar
auf. Beachten Sie, dass MyExistingPlaybar
dieselben Parameter wie PlayBar
haben muss. Es kann jedoch einige Unterschiede geben, wie unten unter Weitere Anweisungen beschrieben.
Zuordnungsdatei
In Ihren Android Studio-Projekten werden Zuordnungsdateien unter ui-package-resources/mappings
neben dem Ordner ui-packages
hinzugefügt. Relay sucht während des Builds nach Zuordnungsdateien.
Zuordnungsdatei generieren
Relay kann eine Zuordnungsdatei für jedes importierte UI-Paket generieren. Gehen Sie dazu so vor:
Klicken Sie mit der rechten Maustaste auf den Paketordner oder eine Datei im Zielordner
ui-package
. Wählen Sie Zuordnungsdatei generieren aus.Konfigurieren Sie im Dialogfeld die folgenden Optionen:
Dateispeicherort:Hier legen Sie den Speicherort der generierten Zuordnungsdatei fest.
Zielzusammensetzbare Funktion:Damit wird die benutzerdefinierte zusammensetzbare Funktion festgelegt, die anstelle der generierten zusammensetzbaren Funktion verwendet wird. Sie haben die Möglichkeit, eine vorhandene zusammensetzbare Funktion zu verwenden oder über das Dialogfeld eine neue zu erstellen. Beim Erstellen einer neuen zusammensetzbaren Funktion wird eine zusammensetzbare Funktion mit denselben Parametern erstellt, die im UI-Paket definiert sind.
- Generierte Datei:Hiermit werden die Optionen
generateImplementation
undgeneratePreview
in der Zuordnungsdatei festgelegt. Weitere Informationen finden Sie unten im Abschnitt Dateiinhalt zuordnen.
Klicken Sie auf Zuordnungsdatei generieren. Im Ordner
ui-package-resources/mapping
wird eine neue Zuordnungsdatei mit den angegebenen Konfigurationen erstellt.
Sie können das Dialogfeld Zuordnungsdatei generieren auch über die Benutzeroberfläche des Relay-Paketmoduls öffnen. Gehen Sie dazu so vor:
Klicken Sie im Zielordner
ui-package
auf eine Datei für ein UI-Paket.Wenn das Fenster mit dem Relay-Tool nicht automatisch geöffnet wird, klicken Sie auf das Relay-Symbol.
Klicken Sie unter Paketoptionen auf die Schaltfläche Zuordnungsdatei generieren.
Name der Zuordnungsdatei
Der Name einer bestimmten Zuordnungsdatei muss mit dem Namen des UI-Paketordners für die Komponente übereinstimmen, die sie ersetzt. Daher ordnet play_bar.json
das UI-Paket im Ordner ui-packages/mappings
einer vorhandenen Codekomponente zu.
Dateiinhalt zuordnen
Die Zuordnungsdatei enthält die folgenden Attribute:
target (erforderlich): Der Name Ihrer benutzerdefinierten zusammensetzbaren Funktion. Standardmäßig ist dies der Name der Funktion, die durch generierten Code erstellt wird.
"target" : "CustomComposableName"
package (erforderlich): Der Name des Pakets, in dem sich Ihre benutzerdefinierte zusammensetzbare Funktion befindet. Standardmäßig ist dies das Paket der Funktion, das durch den generierten Code erstellt wurde.
"package" : "com.example.podcastapp.ui.components"
generateImplementation: (Optional) true oder false. Bei „true“ wird trotzdem eine Implementierung dieses UI-Pakets in der generierten Codedatei erstellt. Bei „false“ wird die Implementierung nicht erstellt. Dieser Wert ist standardmäßig auf „true“ gesetzt.
"generateImplementation" : true
generatePreviews: (Optional) „true“ oder „false“. Bei „true“ wird in der generierten Codedatei eine Vorschau der zugeordneten benutzerdefinierten Komponente erstellt. Bei „false“ wird keine Vorschau erstellt. Dieser Wert ist standardmäßig auf „true“ gesetzt.
"generatePreviews" : true
Zugeordnete Varianten
Wenn eine Figma-Komponente Varianten hat, enthält die generierte zusammensetzbare Funktion enum-Parameter, mit denen die Variante codiert wird (wie in der Anleitung Designvarianten verarbeiten beschrieben). Wenn Sie eine Figma-Komponente mit Varianten vorhandenem Code zuordnen möchten, muss sie einer zusammensetzbaren Funktion zugeordnet werden, die dieselben Parameter wie die generierte zusammensetzbare Funktion hat. Für eine Figma-Komponente namens Chip mit einer Variante, deren Attribut ChipType ist, sieht die von Chip generierte zusammensetzbare Signatur beispielsweise so aus:
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipType: ChipType = ChipType.Red,
chipText: String
) { ... }
Wenn die Figma-Chipkomponente einer vorhandenen zusammensetzbaren Funktion (MyChip
) zugeordnet werden soll, muss die Signatur für MyChip
dieselbe Signatur wie die generierte zusammensetzbare Funktion haben (sofern keine zusätzlichen Anweisungen angegeben sind).
Das deutet konzeptionell darauf hin, dass die vorhandene Codekomponente dieselben Designvarianten wie die Figma-Komponente haben kann.
Zusätzliche Anweisungen
Wenn die zusammensetzbare Funktion, auf die Sie abzielen möchten, beispielsweise die folgende Signatur hat:
@Composable
fun MyChip(
modifier: Modifier = Modifier,
chipType: ChipType = ChipType.Red,
description: String // instead of chipText
) { ... }
Sie können der Zuordnungsdatei einen fieldMappings
-Block hinzufügen, der sich auf die Zuordnung der Parameter auswirkt. In diesem Fall enthält er eine Zuordnung vom Parameter chipText
im Chip
zum Parameter description
in MyChip
.
{
"target": "MyChip",
"package": "com.example.myApp",
"fieldMappings": [
{
"type": "parameter",
"source": "chipText",
"target": "description"
}
]
}
Zu den Typen für den fieldMappings
-Block gehören:
parameter
: Ordnet einem Codeparameter ein UI-Paketfeld zu.source
: Name des Parameters, wie im UI-Paket angegeben.target
: Name des Parameters, wie in der Zielcodekomponente angegeben.
lambda
: Ordnet einer Inhalts-Lambda ein UI-Paketfeld zu.source
: Name des Parameters, wie im UI-Paket angegeben.target
: Name des Parameters, wie in der Zielcodekomponente angegeben.
modifier
: Ordnet einer modifier-Methode ein UI-Package-Feld zu.source
: Name des Parameters, wie im UI-Paket angegeben.method
: Methode für das Modifikatorobjekt, das in generiertem Code aufgerufen werden sollparameter
: Name des Parameters innerhalb der angegebenen Modifikatormethode.library
: Der qualifizierte Paketname, der importiert werden soll, um auf die Modifikatormethode zuzugreifen.scope
: Einer von zwei Werten, der den Umfang des Modifizierers angibt:any
: Der Modifikator kann in jedem Empfängerbereich verwendet werden.relay
: Der Modifikator muss im Empfängerbereich desRelayContainer
-Objekts von Relay verwendet werden.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist * Unterstützung für unterschiedliche Bildschirmgrößen * Verschachtelte Paketinstanzen * Releases