Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
Teil I Grundlagen
1 Android – eine offene, mobile Plattform
2 Hallo Android!
3 Von der Idee zur Veröffentlichung
Teil II Elementare Anwendungsbausteine
4 Wichtige Grundbausteine von Apps
5 Benutzeroberflächen
6 Multitasking
Teil III Gerätefunktionen nutzen
7 Telefonieren und surfen
8 Sensoren, GPS und Bluetooth
Teil IV Dateien und Datenbanken
9 Dateien lesen, schreiben und drucken
10 Datenbanken
Teil V Multimedia und Produktivität
11 Multimedia
12 Kontakte und Organizer
A Einführung in Kotlin
B Jetpack Compose
C Häufig benötigte Codebausteine
D Literaturverzeichnis
E Die Begleitmaterialien
Stichwortverzeichnis

Ihre Meinung?
Spacer
<< zurück
Android 11 von Thomas Künneth
Das Praxisbuch für App-Entwickler
Buch: Android 11

Android 11
Pfeil B Jetpack Compose
Pfeil B.1 Deklaratives Programmiermodell
Pfeil B.1.1 Imperative Ansätze
Pfeil B.1.2 Besser deklarativ
Pfeil B.2 Zustand und Ereignisse
Pfeil B.2.1 remember {}
Pfeil B.2.2 Auf Benutzereingaben reagieren
Pfeil B.2.3 Voransichten von Composables anzeigen
Pfeil B.3 Integration in Projekte
Pfeil B.3.1 Nur ab Kotlin 1.4
Pfeil B.3.2 Modulspezifische »build.gradle«-Datei
Pfeil B.4 Zusammenfassung
 
Zum Seitenanfang

B.2    Zustand und Ereignisse Zur vorigen ÜberschriftZur nächsten Überschrift

Composable Functions lassen sich einer von zwei Gruppen zuordnen. Sie sind entweder zustandslos oder zustandsbehaftet. SecondPage(), GreetingText() und MyButton() halten keine eigenen Zustände. Das bedeutet: Alle relevanten veränderlichen Informationen werden von außen zugeführt. ContentPage() und FirstPage() hingegen werden nicht alle Daten als Parameter übergeben. Sie erinnern sich an bestimmte Werte. Wie Composables Zustände speichern und wieder darauf zugreifen, zeige ich Ihnen im folgenden Abschnitt.

 
Zum Seitenanfang

B.2.1    remember {} Zur vorigen ÜberschriftZur nächsten Überschrift

Die Zeile val firstPage = remember { mutableStateOf(true) } in ContentView() weist der lokalen Variable firstPage das Ergebnis des Funktionsaufrufs remember() – eine Toplevel-Funktion im Paket androidx.compose.runtime – zu. Der übergebene Lambda-Ausdruck wird nur beim ersten Mal ausgeführt. Alle weiteren Aufrufe liefern dessen Ergebnis zurück. Das ist sehr praktisch, weil Sie auf diese Weise einen Wert speichern und später wieder darauf zugreifen können. Damit Sie bei Bedarf den Lambda-Ausdruck erneut ausführen können, gibt es remember mit verschiedenen Signaturen.

Mit mutableStateOf() können sich Composables veränderliche Werte merken. Diese Toplevel-Funktion gehört ebenfalls zum Paket androidx.compose.runtime. Sie liefert eine MutableState-Instanz, die mit dem übergebenen Wert initialisiert wurde. Auf die gespeicherten Werte greifen Sie über die Eigenschaft value zu. Schreibzugriffe führen dazu, dass von der Änderung betroffene Teile der Benutzeroberfläche neu zusammengebaut werden. Mein Beispiel speichert die drei Werte firstPage, name und enabled. Ist Ihnen aufgefallen, dass ich nie die MutableState-Instanzen selbst an andere Composables weiterreiche, sondern nur die Werte? Sie sollten bei Composables niemals Zustände weiterreichen. Im Idealfall braucht ein Composable gar keinen. Falls doch, speichert es ihn mit remember selbst.

 
Zum Seitenanfang

B.2.2    Auf Benutzereingaben reagieren Zur vorigen ÜberschriftZur nächsten Überschrift

Sicher ist Ihnen aufgefallen, dass ich MyButton(), SecondPage() und FirstPage() Lambdas übergebe, die in der Funktion nur aufgerufen werden. Die Philosophie von Jetpack Compose in diesem Zusammenhang ist, (nicht nur) im Hinblick auf eine möglichst häufige Wiederverwendung composable functions so dumm wie möglich zu halten. Bildlich gesprochen wandern Benutzeraktionen in der Hierarchie Ihrer Oberfläche so lange nach oben, bis sich jemand dafür zuständig fühlt. Im Sinne einer inversion of control geben Sie den auszuführenden Code dem Composable einfach mit.

Eine Ausnahme von dieser Regel hatte ich ja schon angesprochen. Wenn ein Composable ein Ereignis allgemeingültig intern verarbeiten kann, darf es das natürlich. Denken Sie an einen Schieberegler, unter dem der aktuelle Wert als Text angezeigt wird. Klar, nach einer Bewegung des Reglers muss der Wert nach außen kommuniziert werden. Gleichzeitig ist aber das Anzeigen des Textes innerhalb der Funktion wünschenswert und sinnvoll. Wie Sie so etwas in Jetpack Compose realisieren, ist in Listing B.3 zu sehen. Mit SliderView { println(it) } zeigen Sie das Composable an (Abbildung B.2).

Da wir unter dem Slider einen Text ausgeben möchten, habe ich beides wieder in eine Column gepackt. Sie nimmt die gesamte zur Verfügung stehende Breite ein (fillMaxWidth()) und hat standardmäßig an allen Seiten einen 16 geräteunabhängige Pixel großen Rand (padding(16.dp)). Dieser kann bei Bedarf durch Übergabe eines eigenen Modifiers geändert werden. Der Wertebereich des Sliders wird mit valueRange festgelegt. Den aktuellen Wert speichert die lokale Variable position. Durch by entfällt der explizite Zugriff über .value. onValueChange wird beim Schieben des Sliderknopfs aufgerufen. Meine Implementierung ändert dann den angezeigten Text und ruft den als Parameter onValueChange übergebenen Callback auf.

@Composable
fun SliderView(modifier: Modifier = Modifier.padding(16.dp),
onValueChange: (Float) -> Unit) {
var position by remember { mutableStateOf(4f) }
Column(
modifier = modifier.fillMaxWidth(),
) {
Slider(
value = position,
valueRange = 0f..10f,
onValueChange = {
position = it
onValueChange(it)
})
Text(
text = position.toInt().toString(),
modifier = Modifier.fillMaxWidth(),
style = TextStyle(fontSize = TextUnit.Companion.Sp(32)),
textAlign = TextAlign.Center
)
}
}

Listing B.3    Einen Slider mit Jetpack Compose erstellen

Das Composable Text() wird mit text = position.toInt().toString() parametriert. Da position eine MutableState-Instanz als Wert enthält, führen Änderungen am Wert zu einer Neukomposition.

Ein Slider mit Text in Jetpack Compose

Abbildung B.2    Ein Slider mit Text in Jetpack Compose

Um ein Composable in Aktion zu sehen, müssen Sie keine App starten. Ein paar Annotationen genügen. Wie diese verwendet werden, zeige ich Ihnen im folgenden Abschnitt.

 
Zum Seitenanfang

B.2.3    Voransichten von Composables anzeigen Zur vorigen ÜberschriftZur nächsten Überschrift

Sicher ist Ihnen in Listing B.2 folgendes Quelltextfragment aufgefallen:

@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
ContentView {}
}
}

Listing B.4    Voransicht eines Composables erstellen

Wenn Sie im Editorfenster auf Split oder Design klicken, sehen Sie in etwa die in Abbildung B.3 gezeigte Vorschau. Damit eine composable function in diesem Bereich erscheint, muss sie keinen bestimmten Namen haben. Wichtig ist nur, dass sie mit @Preview versehen ist.

Voransicht des Composables »DefaultPreview()«

Abbildung B.3    Voransicht des Composables »DefaultPreview()«

Die Annotation erlaubt eine Reihe von Parametern. Beispielsweise können Sie mit name den anzuzeigenden Namen setzen. Mit group = " ... " lassen sich Composables zu Gruppen zusammenfassen. Zwischen diesen können Sie mit einer Dropdownliste umschalten. showDecoration = true zeigt das Composable in einer Activity. Auch die Statusleiste des Systems ist dann am oberen Rand zu sehen.

[+]  Tipp

Sie können in der Ansicht Split ein Composable anklicken. Der Cursor im Editor springt dann in die korrespondierende Zeile im Quelltext.

inline image wechselt in den interaktiven Modus. Damit können Sie die Bedienung Ihrer composable function ausprobieren. inline image bringt sie auf ein echtes Gerät oder den Emulator.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
Zur Rheinwerk-Konferenz für Kotlin
 Buchempfehlungen
Zum Rheinwerk-Shop: Kotlin

Kotlin


Zum Rheinwerk-Shop: Praxisbuch Usability und UX

Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Flutter und Dart

Flutter und Dart


Zum Rheinwerk-Shop: App-Design

App-Design


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2023
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern