Mobilentwicklung: UI-Toolkit Jetpack Compose vergrößert die Touch-Zone

Das Toolkit mit deklarativem Ansatz setzt in Version 1.1 Material-Design-Richtlinien für barrierefreie UIs um und cached Vektorgrafikobjekte.

In Pocket speichern vorlesen Druckansicht

(Bild: Google)

Lesezeit: 3 Min.

Ein halbes Jahr nach dem ersten stabilen Release von Jetpack Compose ist nun Version 1.1 des UI-Toolkits erschienen. Sie passt Touch-Elemente automatisch passend zu den Vorgaben für Barrierefreiheit aus den Material-Design-Richtlinien an. Außerdem soll ein Cache für Vektorgrafikobjekte die Performance von Anwendungen verbessern.

Google hat Jetpack Compose Ende Juli 2021 in der stabilen Version 1.0 veröffentlicht. Das UI-Toolkit für Android verfolgt einen deklarativen Ansatz und setzt auf die Programmiersprache Kotlin sowie ein reaktives Programmiermodell. Sogenannte Composable Functions definieren die einzelnen Bedienelemente – oder Teile davon. Mit @Composable dekorierte Funktionen lassen sich ineinander verschachteln, um letztlich die Oberfläche zu erzeugen. Der Code beschreibt das grundlegende Aussehen der Oberfläche, und unter der Haube kümmert sich das Toolkit um die Umsetzung in der Baumstruktur des UI und um das Aktualisieren der Inhalte.

Das von Google vorangetriebene Material Design bietet einige Richtlinien für die barrierefreie Bedienung von Oberflächen. Dazu gehört, dass Touch-Elemente mindestens 48 x 48 Density-Independent Pixels (dp) umfassen sollen. dp ist eine Größeneinheit in Android, die einen Pixel auf einem Bildschirm mit einer mittleren Auflösung als Grundlage hat. 48 dp entsprechen laut den Angaben in den Designrichtlinien etwa 9 Millimetern.

Die Größenvorgabe bezieht sich lediglich auf den Eingabebereich, und das grafische Element darf durchaus kleiner sein. Jetpack Compose setzt neuerdings die Mindestvorgaben um und vergrößert automatisch Elemente, die mit kleineren Bereichen definiert sind.

Jetpack Compose 1.1 vergrößert unter anderem für Radio Buttons die Abstände, wenn die Größen nicht den Vorgaben aus Material Design entsprechen. Links ist die Umsetzung in Compose 1.0 zu sehen und rechts in Version 1.1.

(Bild: Google)

Falls die Neuerung zu Problemen bei bestimmten Layouts führt, lässt sich als Hintertür die Einstellung LocalMinimumTouchTargetEnforcement auf false setzen.

Eine weitere grundlegende Neuerung ist der Cache für Vektorgrafikobjekte. Die painterResource-API cached neuerdings die Instanzen von ImageVector-Objekten, die mit einer Resource-ID und einem Theme verbunden sind. Die APIs für den Umgang mit Vektoren rememberVectorPainter, VectorProperty, VectorConfig und RenderVectorGroup, die bisher als experimentell galten, erreichen in Compose 1.1 einen stabilen Stand.

Dasselbe gilt für die Animations-APIs EnterTransition, ExitTransition und einige Teile der API zu AnimatedVisibility. Für Animationen gibt es zudem eine zunächst als experimentell gekennzeichnete Ergänzung: AnimatedContent lässt sich neuerdings im Zusammenspiel mit rememberSaveable speichern und wiederherstellen. Ebenfalls als experimentell gekennzeichnet ist die neue API BringIntoView, die Elternelemente auffordert zu scrollen, um ein Element in den sichtbaren Bereich zu bringen.

Weitere Neuerungen lassen sich dem Google-Developers-Blog entnehmen. Jetpack Compose 1.1 benötigt das aktuelle Kotlin 1.6.10, das im Dezember als Bugfix-Release für Kotlin 1.6 erschienen ist. In der Jetpack-Dokumentation findet sich eine Kompatibilitätstabelle für die passenden Kotlin-Releases zu Compose. Das UI-Toolkit zielt inzwischen auch auf die Smartwatch: Vor Kurzem hat Google mit Glance ein Framework zum Erstellen von Kacheln für Wear OS mit Jetpack Compose veröffentlicht.

(rme)