Diese Seite wurde von der Cloud Translation API übersetzt.

Schnelleinstieg

Laden Sie Android Studio herunter und installieren Sie es, um die Entwicklung mit Compose optimal zu nutzen. Sie enthält viele intelligente Editor-Funktionen, z. B. neue Projektvorlagen und die Möglichkeit, sich sofort eine Vorschau der Editor-UI und der Animationen anzeigen zu lassen.

Android Studio herunterladen

Folgen Sie dieser Anleitung, um ein neues Projekt in der App „Compose“ zu erstellen, die Funktion „Compose“ für ein vorhandenes App-Projekt einzurichten oder eine in Compose geschriebene Beispiel-App zu importieren.

Neue App erstellen, die „Compose“ unterstützt

Wenn Sie ein neues Projekt starten möchten, das standardmäßig die Funktion „Schreiben“ unterstützt, bietet Android Studio verschiedene Projektvorlagen, die Ihnen den Einstieg erleichtern. Gehen Sie so vor, um ein neues Projekt zu erstellen, bei dem die Funktion „Compose“ korrekt eingerichtet ist:

Klicken Sie im Fenster Welcome to Android Studio (Willkommen bei Android Studio) auf Start a new Android Studio project (Neues Android Studio-Projekt starten). Wenn bereits ein Android Studio-Projekt geöffnet ist, wählen Sie in der Menüleiste File > New > New Project aus.
Wählen Sie im Fenster Projektvorlage auswählen die Option Leere Aktivität aus und klicken Sie auf Weiter.
Führen Sie im Fenster Projekt konfigurieren die folgenden Schritte aus:
1. Legen Sie Name, Paketname und Speicherort wie gewohnt fest. Im Drop-down-Menü Sprache ist nur Kotlin verfügbar, da Jetpack Compose nur mit Klassen funktioniert, die in Kotlin geschrieben wurden.
2. Wählen Sie im Drop-down-Menü Mindest-API-Level das API-Level 21 oder höher aus.
Klicken Sie auf Fertig.

Jetzt können Sie mit der Entwicklung einer App mit Jetpack Compose beginnen. Das Jetpack Compose-Tutorial soll Ihnen den Einstieg erleichtern und Ihnen zeigen, was Sie mit dem Toolkit machen können.

„Compose“ für eine vorhandene App einrichten

Konfigurieren Sie zuerst den Compose-Compiler mit dem Compose-Compiler-Gradle-Plug-in.

Füge dann der Datei build.gradle deiner App die folgende Definition hinzu:

Cool

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Wenn Sie das Flag compose im Android-Block BuildFeatures auf true setzen, wird die Schreibfunktion in Android Studio aktiviert.

Fügen Sie schließlich die Compose-BOM und die benötigten Abhängigkeiten der Compose-Bibliothek aus dem folgenden Block zu Ihren Abhängigkeiten hinzu:

Cool

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.0'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.0")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Beispiel-Apps für Jetpack Compose testen

Am schnellsten können Sie die Funktionen von Jetpack Compose mit Jetpack Compose-Beispielanwendungen testen, die auf GitHub gehostet werden. So importieren Sie ein Beispiel-App-Projekt aus Android Studio:

Wenn Sie sich im Fenster Willkommen bei Android Studio befinden, wählen Sie Android-Codebeispiel importieren aus. Wenn bereits ein Android Studio-Projekt geöffnet ist, wählen Sie in der Menüleiste File > New > Import Sample (Datei > Neu > Beispiel importieren) aus.
Geben Sie in der Suchleiste oben im Assistenten Beispiele durchsuchen "compose" ein.
Wählen Sie aus den Suchergebnissen eine Jetpack Compose-Beispielanwendung aus und klicken Sie auf Next (Weiter).
Ändern Sie entweder den Anwendungsnamen und den Projektspeicherort oder behalten Sie die Standardwerte bei.
Klicken Sie auf Fertig.

Android Studio lädt die Beispiel-App unter den von Ihnen angegebenen Pfad herunter und öffnet das Projekt. Sie können dann MainActivity.kt in jedem der Beispiele überprüfen, um Jetpack Compose APIs wie Überblendungsanimationen, benutzerdefinierte Komponenten, Typografie und helle und dunkle Farben in der IDE-Vorschau zu sehen.

Informationen zur Verwendung von Jetpack Compose für Wear OS finden Sie unter Jetpack Compose unter Wear OS einrichten.

Empfehlungen für dich

Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
Navigation mit der Funktion „Schreiben“
Layout von „Compose“ testen
Reagiere auf Konzentration