Schnelleinstieg

Um die Entwicklung mit Compose optimal zu gestalten, laden Sie die App Android Studio verfügbar. Er enthält viele intelligente Editorfunktionen, z. B. neue Projektvorlagen und die Möglichkeit, sich die Compose-Benutzeroberfläche und ‑Animationen sofort in der Vorschau anzusehen.

Android Studio herunterladen

Folgen Sie dieser Anleitung, um ein neues App-Projekt zu erstellen, Erstellen Sie für ein vorhandenes App-Projekt oder importieren Sie eine in Compose geschriebene Beispiel-App.

Neue App mit Unterstützung für Compose erstellen

Wenn Sie ein neues Projekt starten möchten, das standardmäßig Compose unterstützt, bietet Android Studio verschiedene Projektvorlagen, die Ihnen den Einstieg erleichtern. So erstellen Sie ein neues Projekt, in dem Compose richtig eingerichtet ist:

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

Jetzt können Sie mit der Entwicklung einer App mit Jetpack Compose beginnen. Um Ihnen zu helfen, um zu erfahren, was Sie mit dem Toolkit machen können, testen Sie das Jetpack- Anleitung zum Schreiben einer Nachricht.

„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:

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

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

Fügen Sie abschließend die Compose-BOM und die erforderlichen Compose-Bibliotheksabhängigkeiten aus dem folgenden Block zu Ihren Abhängigkeiten hinzu:

Cool

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.09.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.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // 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.09.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.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // 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 ausprobieren, indem Sie die Jetpack Compose-Beispiel-Apps auf GitHub testen. So importieren Sie ein Beispiel-App-Projekt aus Android Studio:

  1. Wenn Sie sich im Fenster Welcome to Android Studio (Willkommen bei Android Studio) befinden, wählen Sie Import an Android-Codebeispiel Wenn Sie bereits ein Android Studio-Projekt geöffnet haben, wählen Sie in der Menüleiste File > New > Import Sample aus.
  2. Geben Sie in der Suchleiste oben im Assistenten Beispiele ansehen „compose“ verwenden.
  3. Wählen Sie aus den Suchergebnissen eine der Jetpack Compose-Beispiel-Apps aus und Klicken Sie auf Weiter.
  4. Ändern Sie entweder den Namen der Anwendung und den Projektspeicherort oder behalten Sie das Feld Standardwerten.
  5. Klicken Sie auf Fertig.

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

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