Android Academy · Lektion

Was ist Jetpack Compose?

Verstehen Sie deklarative Benutzeroberflächen in Android.

Lektion 1 von 413 Schritte

Was ist Jetpack Compose? ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Jetpack Compose?

Jetpack Compose ist das moderne Toolkit von Android zum Erstellen nativer UIs. Statt XML-Layoutdateien zu schreiben, beschreiben Sie Ihre UI direkt im Kotlin-Code.

Compose ist deklarativ: Sie geben an, wie der Bildschirm für einen bestimmten Zustand aussehen soll, und Compose ermittelt selbst, wie er gezeichnet und aktualisiert wird.

Der bisherige Ansatz: XML-Views

Traditionell bestand ein Android-Bildschirm aus zwei Teilen:

  • Eine XML-Layout-Datei, die die Widgets beschreibt.
  • Kotlin-/Java-Code, der diese Views mit findViewById findet und verändert.

XML und Code synchron zu halten, war mühsam und fehleranfällig.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Imperativ vs. deklarativ

Bei XML-Views schreiben Sie imperativen Code: Sie greifen auf eine View zu und ändern sie anschließend Schritt für Schritt.

Mit Compose schreiben Sie deklarativen Code: Sie beschreiben das Endergebnis als Funktion Ihrer Daten. Wenn sich Daten ändern, zeichnet Compose automatisch das Notwendige neu.

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Composable-Funktionen

Der Grundbaustein von Compose ist die Composable-Funktion: eine normale Kotlin-Funktion, die mit @Composable annotiert ist und UI ausgibt.

Composables können andere Composables aufrufen, sodass Sie Bildschirme aus kleinen, wiederverwendbaren Teilen erstellen können.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Kein findViewById

In Compose gibt es kein findViewById und keine View-IDs. Die UI ist der Funktionsaufruf. Um anderen Text anzuzeigen, übergeben Sie einfach ein anderes Argument und lassen Compose die UI neu zusammensetzen.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

UI als Funktion des Zustands

Eine zentrale Idee lautet: UI = f(state). Der Bildschirm ist die Ausgabe Ihrer Composables für den aktuellen Zustand. Ändern Sie den Zustand, erzeugt dieselbe Funktion eine neue UI.

Dadurch werden UIs vorhersehbarer und leichter verständlich.

Alles ist Kotlin

Da Composables Kotlin-Funktionen sind, können Sie Schleifen, Bedingungen und Variablen zum Erstellen der UI verwenden. Eine spezielle Templatesprache ist nicht erforderlich.

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

Weniger Boilerplate

Compose beseitigt große Mengen an Verbindungscode. Es gibt keine XML-Inflation, keine Adapter für einfache Listen und keine manuelle Verbindung zwischen Layout und Logik.

Das Ergebnis: weniger Dateien und weniger Fehler.

Mit Views interoperabel

Sie müssen nicht die gesamte App neu schreiben. Compose interagiert mit dem alten View-System. Sie können Compose in einen vorhandenen XML-Bildschirm einbetten oder eine View in Compose einbetten.

So können Teams schrittweise migrieren.

Was Sie benötigen

Für die Verwendung von Compose benötigen Sie:

  • Eine aktuelle Version von Android Studio.
  • Die Compose-Abhängigkeiten in Ihrer Gradle-Datei.
  • Eine Activity, die setContent { } aufruft, um Composables aufzunehmen.

Ein winziger Bildschirm

Hier sehen Sie einen vollständigen, minimalen Compose-Bildschirm. setContent bildet die Brücke von der Android-Activity zur Compose-Welt.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

Kurze Überprüfung

Was beschreibt Jetpack Compose am besten?

Rückblick

Sie haben gelernt, dass Jetpack Compose ein deklaratives, Kotlin-orientiertes UI-Toolkit ist. Die wichtigsten Ideen:

  • Die UI wird aus @Composable-Funktionen aufgebaut.
  • Kein XML und kein findViewById.
  • UI = f(state) — ändern Sie den Zustand, zeichnet Compose die UI neu.
Kostenlos starten

Lerne Kotlin mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse
36
Lektionen
152

Häufig gestellte Fragen

Ist die Lektion „Was ist Jetpack Compose?“ kostenlos?

Ja — der vollständige Text von „Was ist Jetpack Compose?“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Was ist Jetpack Compose?“?

Verstehen Sie deklarative Benutzeroberflächen in Android. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Was ist Jetpack Compose?“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Was ist Jetpack Compose?
  2. Ihr erstes Composable
  3. Text, Bild und Button
  4. Previews und Hot Reload
← Zurück zu Android Academy