Jetpack Compose für Kotlin: Vollständiger Leitfaden mit Beispielen

Was ist Jetpack Compose und warum wird es benötigt?

Jetpack Compose ist ein modernes Toolkit zur Erstellung von Benutzeroberflächen (UI) für Android, entwickelt von Google. Im Gegensatz zum traditionellen Ansatz mit XML-Markup und View-System verwendet Compose einen deklarativen Ansatz. Das bedeutet, Sie beschreiben, wie die UI bei jedem Datenzustand aussehen soll, anstatt eine Abfolge von Schritten zu deren Änderung zu beschreiben.

Die Hauptvorteile von Jetpack Compose:

\n
• Deklarativität: Sie beschreiben die UI als Funktion des Zustands. Wenn sich der Zustand ändert, zeichnet Compose automatisch nur die Teile der UI neu, die sich geändert haben.
\n
• Weniger Code: Im Vergleich zu XML + View ist der Code in Compose in der Regel kürzer und lesbarer.
\n
• Intuitivität: Es wird die Sprache Kotlin verwendet, was den Code für Android-Entwickler natürlicher macht.
\n
• Leistung: Compose ist für die Arbeit mit neuen Android-Architekturen optimiert und minimiert Neuzeichnungen.
\n
• Kompatibilität: Compose kann schrittweise in bestehende Projekte integriert werden, indem es zusammen mit dem traditionellen View verwendet wird.
\n

Jetpack Compose ist nicht nur eine Bibliothek, sondern ein ganzes Ökosystem, das Werkzeuge für die Arbeit mit Animationen, Navigation, Tests und vielem mehr umfasst. Es ist die Zukunft der Android-Entwicklung, und Google empfiehlt aktiv die Umstellung darauf.

Installation von Jetpack Compose

Da Jetpack Compose eine Bibliothek für Android ist, wird sie nicht über pip (Python) oder npm (JavaScript) installiert. Stattdessen wird sie einem Android-Projekt über das Gradle-Build-System hinzugefügt. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Projekteinrichtung in Android Studio

Erstellen Sie ein neues Android-Projekt und wählen Sie die Vorlage "Empty Compose Activity". Android Studio konfiguriert automatisch alle erforderlichen Abhängigkeiten.

2. Manuelle Einrichtung (falls das Projekt bereits existiert)

Öffnen Sie die Datei build.gradle.kts (auf Projektebene) und stellen Sie sicher, dass im Block plugins Folgendes enthalten ist:

plugins {\n    id("com.android.application") version "8.2.0" apply false\n    id("org.jetbrains.kotlin.android") version "1.9.20" apply false\n}

Öffnen Sie dann die Datei build.gradle.kts (auf Modulebene, normalerweise app) und fügen Sie Folgendes hinzu:

plugins {\n    id("com.android.application")\n    id("org.jetbrains.kotlin.android")\n}\n\nandroid {\n    namespace = "com.example.myapp"\n    compileSdk = 34\n\n    defaultConfig {\n        applicationId = "com.example.myapp"\n        minSdk = 24\n        targetSdk = 34\n        versionCode = 1\n        versionName = "1.0"\n    }\n\n    buildFeatures {\n        compose = true\n    }\n\n    composeOptions {\n        kotlinCompilerExtensionVersion = "1.5.5"\n    }\n\n    kotlinOptions {\n        jvmTarget = "17"\n    }\n}\n\ndependencies {\n    implementation(platform("androidx.compose:compose-bom:2024.01.00"))\n    implementation("androidx.compose.ui:ui")\n    implementation("androidx.compose.ui:ui-graphics")\n    implementation("androidx.compose.ui:ui-tooling-preview")\n    implementation("androidx.compose.material3:material3")\n    implementation("androidx.activity:activity-compose:1.8.2")\n    debugImplementation("androidx.compose.ui:ui-tooling")\n    debugImplementation("androidx.compose.ui:ui-test-manifest")\n}

Nach der Gradle-Synchronisierung können Sie mit der Verwendung von Jetpack Compose beginnen.

Schnellstart mit einem Codebeispiel

Der einfachste Weg, um zu beginnen, ist die Erstellung eines Bildschirms mit dem Text "Hello, World!". Rufen Sie dazu in Ihrer Activity (oder an einem anderen Ort, an dem Sie Compose verwenden) die Funktion setContent auf:

import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.