Um die Entwicklung mit Compose optimal zu gestalten, laden Sie die App Android Studio verfügbar. Es enthält viele intelligente Editor-Funktionen, z. B. neue Projekt- Vorlagen und die Möglichkeit, sofort eine Vorschau der Editor-Benutzeroberfläche und der Animationen anzuzeigen.
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 erstellen, die „Compose“ unterstützt
Wenn Sie ein neues Projekt starten möchten, das standardmäßig die Funktion „Schreiben“ unterstützt, Android Studio enthält verschiedene Projektvorlagen, die Ihnen den Einstieg erleichtern. Bis Erstellen Sie ein neues Projekt, bei dem die Funktion „Compose“ korrekt eingerichtet ist, gehen Sie so vor:
- Wenn Sie sich im Fenster Welcome to Android Studio (Willkommen bei Android Studio) befinden, klicken Sie auf Start a new Android Studio-Projekt Wenn Sie bereits ein Android Studio-Projekt geöffnet haben , wählen Sie Datei > Neu > New Project (Neues Projekt) aus.
- Klicken Sie im Fenster Projektvorlage auswählen auf Leeren. Aktivität und klicken Sie auf Weiter.
- Führen Sie im Fenster Projekt konfigurieren die folgenden Schritte aus:
<ph type="x-smartling-placeholder">
- </ph>
- 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
- 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. 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 zunächst den Compose-Compiler mithilfe der Funktion Composer 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
}
}
Das Flag compose
in Android BuildFeatures
auf true
setzen
aktiviert die Schreibfunktion in Android Studio.
Fügen Sie schließlich die Compose-BOM und die Teilmenge der Abhängigkeiten der Compose-Bibliothek hinzu müssen Sie Ihre Abhängigkeiten aus dem folgenden Block auswählen:
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 testen, auf GitHub gehostete Jetpack Compose-Beispielanwendungen ausprobieren. So importieren Sie ein Beispiel-App-Projekt aus Android Studio erstellen möchten, gehen Sie so vor:
- 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 Datei > Neu > Import Sample (Beispiel importieren) aus.
- Geben Sie in der Suchleiste oben im Assistenten Beispiele ansehen „compose“ verwenden.
- Wählen Sie aus den Suchergebnissen eine der Jetpack Compose-Beispiel-Apps aus und Klicken Sie auf Weiter.
- Ändern Sie entweder den Namen der Anwendung und den Projektspeicherort oder behalten Sie das Feld Standardwerten.
- 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.
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