Jetzt binden wir das in Figma erstellte UI-Paket in die
Android Studio-Projekt Um das UI-Paket zu integrieren, kopieren Sie die Freigabe-URL, die
den wir im vorherigen Abschnitt
im Importassistenten von Android Studio erstellt haben.
Doppelklicken Sie auf die Datei, um sie zu entpacken, wodurch ein Ordner namens
HelloFigma Verschiebe sie in den Basisordner...
Kehren Sie zu Android Studio zurück. Wählen Sie Datei > Öffnen, zeigen Sie mir den Weg nach Hause.
Wählen Sie HelloFigma aus und klicken Sie auf Open (Öffnen).
Wenn Sie das Projekt öffnen, werden Sie möglicherweise von Android Studio gefragt, ob Sie dem
Projekt arbeiten. Klicken Sie auf Trust Project (Projekt vertrauen).
Wählen Sie in Android Studio File > Neu > UI-Pakete importieren...
Fügen Sie im Dialogfeld „Import UI Packages“ (UI-Pakete importieren) die URL Ihrer Figma-Datei ein und klicken Sie auf
Weiter.
Warten Sie, bis die Datei heruntergeladen wurde. Nach dem Download
wird eine Vorschau angezeigt. Klicken Sie auf Erstellen.
Dem Projekt wurden neue Dateien hinzugefügt. Diese sollten
zur Versionsverwaltung im Rahmen Ihres Projekts verpflichtet. In der Android-Ansicht von
sehen Sie Folgendes:
app/ui-packages/hello_card/*
Alle Quell-Assets, die zur Beschreibung der Komponente im Code erforderlich sind. Diese
-Dateien werden für die Codegenerierung im Build-Schritt verwendet.
app/ui-packages/hello_card/hello_card.json
Die JSON-Datei mit der Definition der Komponente (einschließlich
dessen Layout und andere Eigenschaften).
app/ui-packages/hello_card/fonts/*
Alle Schriftartdateien, die zur Unterstützung der Komponente in Jetpack Compose erforderlich sind.
app/ui-packages/hello_card/*.png oder *.jpeg
Alle Bild-Assets, die zur Unterstützung der Komponente erforderlich sind
app/ui-packages/hello_card/VERSION.txt
Die Version des Relay for Android Studio-Plug-ins, das zum Importieren der Benutzeroberfläche verwendet wurde
Paket.
app/ui-packages/hello_card/config.json
Das für die Vorschau verwendete Design.
Erstellen und Code generieren
Klicken Sie auf
um Ihr Projekt aufzubauen.
Klicken Sie auf den Tab Build, um das Build-Ergebnis anzusehen.
<ph type="x-smartling-placeholder"></ph>
Der generierte Code wird jetzt Ihrem Projekt hinzugefügt. Da dieser Code generiert wurde,
Es sollte nicht Teil Ihres Projekts
zur Versionsverwaltung gehören. Im
In der Android-Ansicht Ihres Projekts können Sie sich Folgendes ansehen:
app/java (generated)/com/example/hellofigma/hellocard
Jetpack Compose-Code und Schriftarten wurden generiert.
app/java (generated)/com/google/relay/compose
Gemeinsamer Laufzeitcode, der in allen UI-Paketen verwendet wird.
„app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt“ öffnen.
Dies ist die generierte Jetpack Compose-Funktion für die Figma-Komponente. Ich
die Komponente auch in der Vorschau anzeigen.
Die Layout-, Asset- und Stilinformationen werden jetzt von Figma übertragen.
zu programmieren.
Im Code wird die in Figma hinzugefügte Zusammenfassung jetzt in einen Kommentar oben übersetzt.
die generierte zusammensetzbare Funktion.
/**
* Hello Card component used to display the image and the title content
*
* This composable was generated from the UI package ‘ hello_card’
* Generated code; do not edit directly
*/
@Composable
fun HelloCard(modifier: Modifier = Modifier) {...
Komponente &integrieren App ausführen
Jetzt binden wir die Komponente in die Hauptaktivität ein.
In app/java/com/example/hellofigma/MainActivity.kt dem Import hinzufügen
-Abschnitt oben:
import com.example.hellofigma.hellocard.HelloCard
Ändern Sie weiter unten in derselben Datei den folgenden Code in der
Klasse MainActivity:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HelloFigmaTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
// Greeting("Android") // Delete this line
HelloCard() // Add this line
}
}
}
}
}
Ändern Sie weiter unten in derselben Datei in der Vorschau der zusammensetzbaren Funktion eine Zeile:
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
HelloFigmaTheme {
HelloCard() // Change this line
}
}
Achten Sie darauf, dass in der Symbolleiste ein Gerät ausgewählt ist.
Führen Sie das Projekt aus, indem Sie in der Symbolleiste auf ▶ klicken.
Der Emulator wird gestartet, das Projekt wird erstellt und Ihre App wird gestartet.
Glückwunsch! Sie haben Ihr erstes Figma-Modell
Komponente in eine Jetpack Compose-App!
Da Sie nun über ein funktionierendes End-to-End-Beispiel verfügen, sehen wir uns nun an, wie Sie die
Design neu generieren und den Code neu generieren.
Empfehlungen für dich
Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.