Diese Seite wurde von der Cloud Translation API übersetzt.

Komponenten vorhandenem Code zuordnen

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.

Übersichtsdiagramm für die
zugeordneten Komponenten

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 in der Projektansicht

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.
Hinweis :Die zusammensetzbare Funktion des Ziels muss mit einem Großbuchstaben beginnen.
- Generierte Datei:Hiermit werden die Optionen generateImplementation und generatePreview 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.

Hinweis: Wenn für das ausgewählte UI-Paket eine Zuordnungsdatei vorhanden ist, wird stattdessen ein Link zum Öffnen der Datei angezeigt.

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.

Hinweis: Dieser Zuordnungstyp befindet sich in der Entwicklung, insbesondere für die Handhabung von Empfängerbereichen.
- source: Name des Parameters, wie im UI-Paket angegeben.
- method: Methode für das Modifikatorobjekt, das in generiertem Code aufgerufen werden soll
- parameter: 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 des RelayContainer-Objekts von Relay verwendet werden.

Empfehlungen für dich

Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist * Adaptive Layouts erstellen * Verschachtelte Paketinstanzen * Releases