AndroidJPC

Jetpack Compose: Android UI Development

Von am 18.01.2023

In den letzten Jahren hat sich die Android Entwicklung stark verändert. Vor einiger Zeit wurde Jetpack Compose vorgestellt, ein modernes UI-Framework für Android-Entwickler*innen. Ähnlich wie React oder Flutter verwendet es eine deklarative Programmierung, bei der die UI als Funktion der App-Daten beschrieben wird, anstatt durch imperatives Setzen von Eigenschaften und Handhaben von Ereignissen wie in traditionellen Android-UI-Frameworks. Dadurch wird die Entwicklung von Benutzeroberflächen einfacher und ist leichter zu lesen. Außerdem ist es verständlicher, was die UI tut und wie sie sich auf die Daten der App auswirkt.

Vor Jetpack Compose wurden Interfaces in Android mit XML Files entwickelt. Diese wurden verwendet, um die Struktur der UI zu beschreiben. Die Funktionalität der UI wurde dann mit Java oder Kotlin implementiert. Die Layouts wurden in XML beschrieben und der Code greift darauf zu, um die Eigenschaften der UI-Elemente zu setzen und Ereignisse zu behandeln.

Dieser Ansatz bringt einige Nachteile mit sich z.B. ist der Code, der die UI beschreibt, schwierig zu verstehen und zu debuggen. Außerdem ist es sehr aufwendig dynamische Elemente zu erstellen. Jetpack Compose hat versucht diese Probleme zu lösen und ermöglicht es Entwickler*innen, Benutzeroberflächen einfacher, lesbarer und fehleranfälliger zu erstellen.

Das Konzept von Composition und Recomposition

Composition in Jetpack Compose bezieht sich darauf, wie UI-Elemente zusammengesetzt werden, um die gesamte Benutzeroberfläche einer App zu erstellen. Es ermöglicht Entwickler*innen, einfache UI-Elemente wie Text, Bilder und Buttons zu verwenden, um komplexere UI-Strukturen wie Listen, Karten und Formulare zu erstellen. Diese einfacheren Elemente werden als Composable Functions bezeichnet.

Recomposition bezieht sich auf die Fähigkeit von Jetpack Compose, diese UIs automatisch neu zu erstellen, wenn sich die Daten, die sie darstellen, ändern. Das bedeutet, dass das Framework die Anzeige automatisch aktualisiert, wenn sich die Daten ändern, anstatt dass der Entwickler*innen manuell diesen Vorgang schreiben muss.

Das Konzept der Composition und Recomposition in Jetpack Compose erleichtert die Erstellung von Benutzeroberflächen und die Steuerung von Zuständen und Anzeigeaktualisierungen, da Entwickler*innen sich auf das Beschreiben dessen konzentrieren können, was sie anzeigen möchten, anstatt sich mit der Logik zu beschäftigen, wie es angezeigt werden soll. Dadurch wird die Entwicklung von Benutzeroberflächen schneller und einfacher, da Entwickler*innen weniger Code schreiben und weniger Fehler machen müssen, um dieselben Ergebnisse zu erzielen.

Beispiel einer Komponente

Der folgende Code-Block beschreibt eine Composable Funktion, mit der ein Raster von Filmen aufgerufen werden können. In der Funktion selbst wird eine weitere selbstdefinierte Composable Funktion, MoviePosterCard(), aufgerufen. Dort wird definiert, wie ein Film im Raster dargestellt wird und die Daten aus Files außerhalb der UI-Files übergeben. Auch LazyVerticalGrid ist eine Composable Funktion, die aber bereits vordefiniert wurde und mit verschiedenen Parameter personalisiert werden kann.

@Composable
fun MoviesGridScreen(
    movies: List<Movie>,
    navController: NavController,
    modifier: Modifier = Modifier
) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(150.dp),
        modifier = modifier.fillMaxWidth(),
        contentPadding = PaddingValues(2.dp)
    ) {
        items(items = movies, key = { movie -> movie.id }) { movie ->
            MoviePosterCard(
                movie,
                navController
            )
        }
    }
}

Vorteile und Nachteile von Jetpack Compose

Auf der Seite von Android zu Jetpack Compose werden folgende Vorteile gelistet:

+ Code: Der Code für das UI ist einfach aufgebaut und somit besser zu verwenden, da es keine Verlinkungen zu XML Files mehr gibt. Dadurch ist der Code nicht nur lesbarer geworden sondern wird auch schneller ausgeführt.

+ Intuitiv: Dadurch das Komponenten mit Composable Funktionen aufgerufen werden, funktioniert auch die Auto-Vervollständigung sehr gut. Zusätzlich werden einfache Fehler direkt von Android Studio gelöst.

– Aktualität: Jetpack Compose ist noch nicht fertig entwickelt und einige Features können erst in Alpha-Versionen oder mit speziellen Deklarationen verwendet werden.

– Dokumentation: Die Dokumentation von Android im allgemeinen ist meiner Meinung nach eher gewöhnungsbedürftig. Es dauert eine Zeit, bis man sich damit zurecht findet und alle notwendigen Informationen findet. Dadurch, dass es noch Alpha-Versionen gibt, gibt es auch einige Lücken in der Dokumentation.

Auch wenn Jetpack Compose noch in der Entwicklung ist, merkt man bereits, dass dieses Toolkit einige Verbesserungen mit sich bringt.


Quellen

https://developer.android.com/jetpack/compose

https://www.geeksforgeeks.org/basics-of-jetpack-compose-in-android/

https://medium.com/androiddevelopers/understanding-jetpack-compose-part-1-of-2-ca316fe39050

The comments are closed.