Ein besserer Weg zur Erstellung von Android-Ansichten mit JetPackCompose

Ein bisschen Geschichte

Die Benutzer interagieren mit mobilen Applications über verschiedene Bildschirme, die in der Regel aus mehreren Ansichten bestehen. Die Art und Weise, wie Entwickler mit diesen Benutzerinteraktionen umgehen, hat sich während der Lebensdauer der Android-Plattform durch die Verwendung mehrerer Muster stark verändert. In den ersten Tagen verwendeten die Entwickler das Model-View-Controller-Muster, dann das Model-View-Presenter-Muster (oder Model-View-Intent). Schließlich gingen wir zu dem von Google empfohlenen Model-View-ViewModel-Muster über. Der "View Manager" hat sich weiterentwickelt (Controller/Presenter/ViewModel), aber der "View"-Teil selbst hat sich nicht so sehr verändert. Die wichtigste Änderung war die Verwendung von Fragmenten als Bausteine für die Benutzeroberfläche anstelle von Aktivitäten wie in den frühen Tagen.

Während dieser ganzen Zeit haben wir hauptsächlich XML verwendet, um Layouts für die Anwendungsansichten zu definieren. Natürlich könnten wir diese Ansichten auch nur mit Code definieren, aber dieser Ansatz hat seine Nachteile. In der Regel haben Applikationen nur wenige komplexe, dynamische Ansichten, die im Code definiert sind, aber die meisten Anwendungslayouts werden auch heute noch in XML-Dateien definiert.

In der Zwischenzeit wurde die Sprache Kotin eingeführt und hatte diese coole Funktion, die es ermöglichte, Ansichten mit einer benutzerdefinierten Kotin-DSL zu definieren. Diese Funktion war ein interessantes Konzept, aber es hat nie genug Aufmerksamkeit von der Android-Entwicklergemeinschaft gewonnen. Es hatte seine Probleme, aber die größten waren die fehlende Unterstützung für fortgeschrittene Anwendungsfälle und die fehlende offizielle Unterstützung durch Android Studio.

Warum JetPack Compose

Vor einiger Zeit hat Google beschlossen, die Entwicklung von Android-Applikationen zu vereinheitlichen. Als ein Teil des JetPack Suite hat Google viele Aspekte der Erstellung von Android-Anwendungen vereinheitlicht. Von der Navigation über den Datenbankzugriff bis hin zu Hintergrundaufgaben und vielem mehr. Darüber hinaus hat Google eine solide Grundlage geschaffen, die es Entwicklern ermöglicht, Best Practices zu befolgen und Standardcode zu reduzieren. Als Teil dieser Familie kommt das JetPack Compose - eine neue Art des Umgangs mit UI. JetPack Compose nutzt Kotlin und eine benutzerdefinierte DSL-Sprache, um Bildschirmlayouts zu konfigurieren, Themen zu definieren, den Zustand der Ansicht zu verwalten und UI-Animationen hinzuzufügen. All dies wird über einen deklarativen Ansatz erreicht, der bereits in ReactNative, Flutter und iOS-Apps weit verbreitet ist.

JetPack Compose in der Praxis

Wir haben ein wenig Hintergrundwissen, also lassen Sie uns jetzt einen kurzen Blick darauf werfen, wie wir JetPack Compose verwenden können und was wir mit diesem Toolkit tun können. Zuallererst müssen wir Android Studio Arctic Fox 2020.3.1 (oder neuer) verwenden. Dann müssen wir ein neues Android-Projekt erstellen (Fenster Projektvorlage auswählen, leere Compose-Aktivität auswählen und auf Weiter klicken).

Eine ausführliche Anleitung finden Sie unter hier.

Öffnen Sie MainActivity und beachten Sie, dass Activity die ComponentActivity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // … view
    }
}

Anstatt XML Dateien zur Definition von Views zu verwenden, werden wir Views in der setContent Lambda (benutzerdefinierte Methode in Kotlin) definieren, die ein Hauptbaustein für die JetPack Compose DSL ist:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // … view
        }
    }
}

Anstatt XML-Tags zu verwenden, um Ansichten zu definieren, werden wir die benutzerdefinierten Layouts und Ansichten verwenden, die von JetPack Compose bereitgestellt werden - Column, Row, Box, etc:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                Text("Alfred Sisley")
                Text("3 minutes ago")
              }
        }
    }

    @Preview
    @Composable
    fun SampleView() {
        
    }
}

Der obige Code erstellt eine einzelne Spalte mit "zwei Zeilen" (jede Zeile enthält eine einzelne Ansicht mit dem Text).

Wir werden in Kürze lernen, wie man die Vorschau erstellt.

Jede Komponente kann ihre Ansichtshierarchie definieren, um die unkomplizierte Erstellung komplexerer Ansichten zu ermöglichen. Unser View-Code kann in "Composable"-Komponenten extrahiert werden, indem eine Methode mit der Annotation "Composable" erstellt wird:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Diese Methoden (kommentiert mit Zusammensetzbar Annotation) bieten grundlegende Bausteine für die Applications UI. Um die Vorschau in Android Studio sehen zu können, sollten wir eine Methode mit der Annotation Preview versehen und die App erstellen:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Preview
    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Wir können auch Änderungen an den Eigenschaften einzelner Elemente vornehmen. Ändern wir die Hintergrundfarben für jede Zeile des Textes:

@Preview
@Composable
fun SampleView() {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text("Apple Juice")
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("100 ml")
        }
    }
}

Wir können diesen Ansichten auch Parameter hinzufügen, um Saftnamen und Volumen dynamisch zu gestalten:

@Composable
fun SampleView(name: String, volume: Int) {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text(name)
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("$volume ml")
        }
    }
}

Leider können wir die parametrisierten Ansichten nicht in der Vorschau anzeigen, so dass wir eine weitere Ansicht erstellen müssen, um die Vorschau zu aktivieren. Jetzt SampleViewPreview ist mit der Annotation Preview versehen und verwendet die zuvor definierte SampleView:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleViewPreview()
        }
    }

    @Preview
    @Composable
    fun SampleViewPreview() {
        SampleView("Orange Juice", 50)
    }

    @Composable
    fun SampleView(name: String, volume: Int) {
        Column {
            Box(
                Modifier.background(Color.Green)
            ) {
                Text(name)
            }
            Box(
                Modifier.background(Color.Blue)
            ) {
                Text("$volume ml")
            }
        }
    }
}

Bei JetPack Compose dreht sich alles um Komposition, so dass wir problemlos mehr als eine Instanz unserer SampleView verwenden können:

@Preview
@Composable
fun SampleViewPreview() {
    Column {
        SampleView("Orange Juice", 50)
        SampleView("Mango Juice", 100)
    }
}

Zusammenfassung

JetPack Compose ist einfach zu bedienen und hat großes Potenzial. Sie können es verwenden, um moderne, interaktive und dynamische Benutzeroberflächen zu erstellen. Sie können es sogar verwenden, um Desktop-UI für die Apps zu erstellen (noch Alpha). Der einzige Nachteil ist, dass JetPack Compose noch nicht stabil ist (Stand: Juni 2021), aber das wird sich bald ändern, und es wird höchstwahrscheinlich ein neuer Standard für die Android UI werden. Das Erlernen von JetPack Compose erfordert ein wenig Umdenken, aber da die UI immer dynamischer wird, wird dieser State-Drive-Ansatz das Leben eines jeden Entwicklers einfacher machen.

Links

• JetPack Compose

• Proben komponieren

• JetBrains Compose-Beispiele