Gestenverwaltung: Edge to Edge. Teil 1

Hallo allerseits. Speziell für Studenten eines Fortgeschrittenenkurses in Android-Entwicklung haben sie eine Übersetzung eines interessanten Artikels vorbereitet.

---

Dies ist der erste Artikel in ihrer Gesture Management-Reihe. Weitere Artikel finden Sie hier .

Android Q hat einen neuen Navigationsmodus für das System hinzugefügt, der es dem Benutzer ermöglicht, zum vorherigen Bildschirm zurückzukehren, zum Hauptbildschirm zurückzukehren und den Assistenten mit Gesten zu starten.


Demonstration neuer Gesten in Android Q

Mit dem Übergang zu einem Gestensteuerungssystemmodell gewannen Anwendungen mehr Platz auf dem Bildschirm. Dies ermöglichte es Anwendungen, eine umfassendere Benutzererfahrung bereitzustellen.

Auf den meisten Geräten können Benutzer den Navigationsmodus nach ihrem Geschmack auswählen. Der vorhandene Navigationsmodus mit drei Tasten (bestehend aus den Tasten "Zurück", "Startseite" und "Letzte") bleibt jedoch erhalten. Diese Maßnahme ist für alle Geräte ab Version Q erforderlich.

Weitere Informationen zu den Recherchen und Lösungen, die im Konzept der Gestensteuerung enthalten sind, finden Sie in diesem Artikel in den Produktmanagern der Android-System-Benutzeroberfläche.

Dieser Artikel ist der erste einer kleinen Serie, in der es darum geht, wie Entwickler Gestensteuerung in ihren Anwendungen bereitstellen können. In der Reihe werden wir folgende Themen behandeln:

1. Kante an Kante: Ermöglichen Sie Ihrer Anwendung, den gesamten Bildschirm auszufüllen.
2. Verarbeitung visueller Überlagerungen der Systembenutzeroberfläche.
3. Der Umgang mit Anwendungsgesten kollidiert mit Systemgesten.
4. Gemeinsame Szenarien und Möglichkeiten zu ihrer Unterstützung.

Beginnen wir damit, wie Apps von Rand zu Rand des Bildschirms reichen können.

Kante an Kante

Ich benutze den Begriff "Kante an Kante", um Anwendungen zu beschreiben, deren Fenster auf den Vollbildmodus erweitert werden kann, um einen immersiveren Effekt zu erzielen. Standardmäßig befinden sich Anwendungen unter der Statusleiste (Statusleiste) und über der Navigationsleiste (Navigationsleiste) (zusammen werden sie als Systemleisten bezeichnet).

Anwendungen gehen von Kante zu Kante über System-Panels hinaus. Dadurch bleibt der Inhalt Ihrer Anwendung im Rampenlicht, um eine gute Benutzererfahrung zu erzielen.

In der Praxis bedeutet dies, dass der Ersteller der Anwendung zwei Dinge beachten muss:

Verwenden des Navigationsleistenbereichs

Die erste und wichtigste Überlegung zur Unterstützung der Gestensteuerung ist die Bearbeitung der Position hinter der Navigationsleiste. Da die Größe und Relevanz der Navigationsleiste abgenommen hat, wird dringend empfohlen, Anwendungen hinter der Navigationsleiste zu platzieren, wenn Sie mit Android Q + arbeiten, um eine überzeugendere und modernere Benutzeroberfläche zu erstellen.

Beim Start auf Geräten mit Android Pie und niedriger wird die Position hinter der Navigationsleiste als optional betrachtet und es bleibt dem Ersteller der Anwendung überlassen, ob dies sinnvoll ist. Nahezu alle erforderlichen APIs sind jedoch bis API 21 abwärtskompatibel (oder AndroidX übernimmt die Unterschiede von selbst). Daher ist der zusätzliche Arbeitsaufwand für die Unterstützung von Geräten vor der Q-Version minimal. Benutzer von Geräten bis zur Q-Generation können ebenfalls ein umfassendes Erlebnis genießen. Nur die Minimierung der erforderlichen Arbeiten und Tests wird als optional betrachtet.

Verwenden des Statusleistenbereichs

Zweitens achten Sie auf den oberen Teil des Bildschirms - die Statusleiste. Jetzt ist es sinnvoll, Bereiche der Statusleiste zu verwenden, wenn Ihr Inhalt oder Layout dies erfordert. Was meinen wir damit? Ein Beispiel für ein Layout, das möglicherweise die Statusleiste enthält, ist ein Breitbild. Für Entwickler bedeutet dies die Verwendung von AppBarLayout , das sich am oberen Bildschirmrand befindet und dort befestigt ist.


Beispielanwendung mit einem Vollbild in der Statusleiste

Wenn die Benutzeroberfläche aus einer Liste von Elementen mit einer festen Position in der Symbolleiste oben besteht, ist es möglicherweise sinnlos, den Statusleistenbereich zu verwenden. Für die Navigationsleiste gelten dieselben Regeln: Sie müssen nicht auf Geräten vor Android Q verwendet werden.

Implementierung

Es gibt drei Schlüsselschritte bei der Implementierung von Rand zu Rand Bereichen.

1. Anforderung zur Anzeige im Vollbildmodus

Der erste Schritt besteht darin, dem System mitzuteilen, dass unsere Anwendung auf den Systembedienfeldern (entlang der Y-Achse) platziert werden soll. Die API, die wir dafür verwenden, ist setSystemUiVisibility () für eine Ansicht mit mehreren Flags. Fahnen, die uns interessieren, sehen so aus:

view.systemUiVisibility = // Tells the system that the window wishes the content to // be laid out at the most extreme scenario. See the docs for // more information on the specifics View.SYSTEM_UI_FLAG_LAYOUT_STABLE or // Tells the system that the window wishes the content to // be laid out as if the navigation bar was hidden View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 

Danach befinden sich unsere view im Vollbildmodus in der Navigationsleiste.


Jetzt befindet sich unsere Anwendung im Vollbildmodus in der Navigationsleiste

1. Ändern Sie die Farben der Systemanzeige

Da sich unsere Anwendung jetzt im Vollbildmodus befindet, müssen wir die Farben der Systemanzeige ändern, damit wir den dahinter liegenden Inhalt sehen können.

Android Q

Beim Start unter Android Q besteht unsere einzige Aufgabe darin, das Systemfenster transparent zu machen.

 <!-- values-v29/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> @android:color/transparent </item> <!-- Optional, if drawing behind the status bar too --> <item name="android:statusBarColor"> @android:color/transparent </item> </style> 

In Android Q ist das System nun in allen Navigationsmodi für die Verarbeitung des gesamten visuellen Schutzes des Inhalts des Systemfensters (Uhrzeit, Symbole, Drag & Drop-Verarbeitung usw.) verantwortlich. Das heißt, wir müssen nicht mehr darüber nachdenken. In der Praxis bedeutet dies, dass das System eines von zwei Dingen ausführt:

Dynamische Farbanpassung

Der Inhalt der Systemanzeige ändert die Farbe in Abhängigkeit von dem dahinter befindlichen Inhalt. Befindet sich das Panel also über einem hellen Bereich, ändert sich seine Farbe zu dunkel. Umgekehrt ändert sich die Farbe in hell, wenn der Inhalt dunkel ist. Dies nennen wir dynamische Farbanpassung.


Dynamische Farbanpassung in Android Q

Lichtdurchlässiges Netz

Alternativ kann das System ein durchsichtiges Gitter (Scrim) hinter den Systemtafeln verwenden. Bitte beachten Sie, dass dies nur funktioniert, wenn Sie in Ihrer Anwendung targetSdkVersion 29 deklariert targetSdkVersion 29 . Wenn Ihre Anwendung auf SDK 28 oder niedriger abzielt, wird das Raster nicht automatisch angezeigt und Sie erhalten eine transparente Navigationsleiste.


Vom System im Steuerungsmodus für Android Q bereitgestelltes Raster

Diese beiden Aktionen werden ausgeführt, damit der Benutzer immer den Inhalt der Systemanzeige sehen kann. Welche Option das System auswählt, hängt von mehreren Faktoren ab. Das Raster wird verwendet, wenn:

• Einer der Tastenmodi ist aktiviert (2 oder 3 Tasten);
• Im Gestensteuerungsmodus hat der Hersteller selbst entschieden, die dynamische Farbanpassung zu deaktivieren. Ein möglicher Grund kann die mangelnde Leistung der Vorrichtung zur Verarbeitung der Farbanpassung sein.

Ein Beispiel, wie ein Bildschirm mit Gestensteuerung verwendet werden kann

In allen anderen Fällen wird die dynamische Farbanpassung verwendet. Die aufgeführten Gründe sind nur zu diesem Zeitpunkt relevant, in Zukunft kann sich alles ändern.

Deaktivieren des Systembedienfeldschutzes in Q

Wenn Sie nicht möchten, dass das System den Inhalt automatisch schützt, können Sie diese Option deaktivieren, indem Sie android:enforceNavigationBarContrast und / oder android:enforceStatusBarContrast auf false .

Android Pie und darunter

Wenn Sie sich für das Edge-to-Edge-Konzept und für Geräte bis Version Q entscheiden, müssen Sie die durchscheinenden Farben des Systemfensters so einstellen, dass der Inhaltsschutz verwendet wird. Ein schwarzes Netz mit 70% Deckkraft ist ein guter Schritt, um ein Thema mit dunklen Systembedienfeldern zu erstellen.

 <!-- values/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> #B3FFFFFF </item> </style> <!-- values-night/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> #B3000000 </item> </style> 

Je nach Inhalt, der sich dahinter befindet, müssen Sie möglicherweise die Transparenz des oberen und unteren Bereichs anpassen. Für helle Themen können Sie eine helle durchscheinende Farbe festlegen (z. B. # B3FFFFFF).


Ein Beispiel, das beide Raster in dunklen und hellen Themen zeigt

1. Visuelle Konflikte

Nachdem Sie diese Schritte ausgeführt haben, haben Sie möglicherweise festgestellt, dass sich einige Ihrer Ansichten jetzt hinter Systemanzeigen befinden. Unser dritter und letzter Schritt ist die Verarbeitung von visuellen Overlays, die wir in den folgenden Artikeln behandeln werden.

Das ist alles. Wir laden alle Leser zu einem praktischen Webinar zum Testen der Android-Benutzeroberfläche ein .