Einstieg in UI-Erstellung mit Compose

Vorbemerkungen

Falls der vorige Termin weiter zurück liegt:

• Kurze Wiederholung und Fragen klären
• Falls nötig ein neues Projekt erstellen: TodosAndroid
• → Projekt im Terminal mit git versionieren

Zur Erinnerung: Wir wollen schrittweise eine einfache Todo-App erstellen, die die Grundlagen der Android-Entwicklung mit Kotlin und Jetpack Compose vermittelt. Dabei gehen wir wie folgt vor (und werden auch bei den anderen Frameworks so vorgehen):

MainActivity auf das Minimum reduzieren

Die UI-Entwicklung in Android erfolgt mit (Jetpack) Compose. Mit Compose steht ein modernes UI-Toolkit für die deklarative Erstellung von Benutzeroberflächen bereit. Einzelne UI-Elemente werden als sogenannte Composable-Funktionen definiert, die meist nur „Composables“ genannt werden.

Wir reduzieren den Code in MainActivity zunächst auf das Minimum, damit wir den Code und die Prinzipien von Compose Schritt für Schritt kennenlernen können.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello World")
        }
    }
}

Die weiteren Funktionen können gelöscht werden und wir zeigen, wie die Import-Anweisungen mit Alt+Enter aufgeräumt werden können.

Bei Bedarf können wir die einzelnen Bestandteile besprechen:

• Eine Activity ist eine Klasse, die eine Benutzeroberfläche für eine App bereitstellt.
• MainActivity ist die Launcher-Activity, die beim Start der App ausgeführt und angezeigt wird, da dies so im AndroidManifest.xml definiert ist.
• onCreate ist eine Funktion, die beim Start der Activity automatisch vom Android-System ausgeführt wird (ähnlich wie die main-Methode in Java-Programmen).
• setContent startet eine Compose-Composition für die Activity und setzt die übergebene Composable-Lambda als Wurzel des UI-Baums.
• mit { … } wird ein Lambda-Ausdruck definiert, der das UI beschreibt, d.h. setContent erhält eine Funktion als Parameter. Diese Syntax wird trailing lambda genannt und ist in Kotlin sehr verbreitet.
• das trailing lambda könnte auch so geschrieben werden:
  setContent(content = { Text("Hello World") })
  Die kürzere Schreibweise mit { … } ist aber üblicher und leichter lesbar (insbesondere wenn wir mehrere Composables hierarchisch verschachteln).
• Text ist eine vordefiniert Composable-Funktion aus der Compose-API, die einen Text darstellt.
• Wir werden weitere vordefinierte Composables kennenlernen und auch eigene Composables erstellen.

In der Preview- bzw. Design-Ansicht ist jetzt nichts zu sehen, aber die App sollte bei Ausführung im Emulator oder Handy „Hello World“ anzeigen.

Todo als Composable-Funktion

Wir wollen eine einfache Todo-App erstellen. Dazu erstellen wir eine Composable-Funktion Todo, die einen Text anzeigt:

@Composable
fun Todo(text: String) {
    Text(text)
}

Dazu müssen wir auch die entsprechenden Imports hinzufügen (dies kann Android Studio für uns automatisch erledigen):

import androidx.compose.runtime.Composable

In onCreate ersetzen wir Text in setContent mit einem Aufruf der neuen Composable-Funktion Todo:

setContent {
    Todo("Einkaufen")
}

Tipp: Mit Code -> Reformat Code bzw. Code -> Reformat File… kann bestimmter Kotlin-Code bzw. die ganze Datei formatiert werden.

Preview vs. Emulator

Unterschied zwischen Preview und Emulator kurz erklären:

• Preview: Vorschau im Android Studio, zeigt das UI in der IDE
• Emulator: Simuliert ein echtes Gerät, zeigt das UI in einer virtuellen Umgebung

Composables mit @Preview sind ein nützliches Feature von Compose, um das UI während der Programmierung visuell in einer Vorschau darzustellen. Wir testen die App immer direkt im Emulator.

Dennoch könnten Previews mittelfristig für Teams nützlich sein, die Apps mit Compose entwickeln. Mehr zu Previews in Compose: https://developer.android.com/develop/ui/compose/tooling/previews 

Abhängigkeiten für Compose aktualisieren

In libs.versions.toml lassen sich die Abhängigkeiten für Compose aktualisieren, damit wir die neuesten Features und Bugfixes nutzen können. Versionen, die aktualisiert werden können, sind in der Datei gelb markiert. Mit Alt+Enter können die neuen Versionen automatisch eingesetzt werden.

Mit der sogenannten „Compose-BOM“ (Bill of Materials) halten wir im Android-Projekt alle Compose-Artefakte konsistent, ohne jede Lib einzeln zu versionieren. Wir versionieren nur die BOM; die eigentlichen Artefakte bekommen keine eigene Versionsangabe.

Mehr dazu: https://developer.android.com/develop/ui/compose/bom 

Zusammenfassung zu Composables

Composable-Funktionen oder kurz Composables sind Funktionen, die mit @Composable annotiert sind. Sie sind die Bausteine für die UI-Elemente und können von anderen Composables aufgerufen werden. Ein Composable hat keinen Rückgabewert und wird häufig in PascalCase benannt (Namensteile werden groß geschrieben). Für bestimmte UI-Elemente wie z.B. Text gibt es vordefinierte Composables. Später werden wir auch vordefinierte Layout-Funktionen wie z.B. Column oder Row verwenden.

Weiterführendes Material

Tutorial, Sample-Apps, Docs und Quick Guides zu Compose im „Core Area“ zu UIs in den Android Developer Docs: https://developer.android.com/develop/ui