Android-Systemleisten

Die Statusleiste und die Navigationsleiste werden zusammen als Systemleisten bezeichnet. Sie zeigen wichtige Informationen wie den Batteriestand, die Uhrzeit und und eine direkte Geräteinteraktion von überall aus ermöglichen.

Es ist wichtig, die Bedeutung der Systembalken zu berücksichtigen, Sie entwerfen UI für Interaktionen mit dem Android-Betriebssystem, Eingabemethoden oder anderen Gerätefunktionen. Die Systemleisten befinden sich in den meisten Ebenen ganz oben, berücksichtigt wird.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 1:Bilder hinter Systemleisten

Fazit

  • Fügen Sie Systemleisten in Ihre Designs ein, um sichere UI-Bereiche zu berücksichtigen, Interaktionen, Eingabemethoden, Display-Aussparungen und andere Gerätefunktionen. Wenn Sie die Systemleisten auf der obersten Ebene platzieren, werden sie berücksichtigt.

  • Empfohlen: Systemleisten transparent machen und Ihre App im Vollbildmodus darstellen und setzt die Benutzeroberfläche unter den Balken fort.

  • Wenn Sie nicht beide Balken als transparent festlegen können, achten Sie darauf, der Hauptfarbe Ihrer App entspricht. Passen Sie zum Beispiel die Farbe der Navigationsleiste durch die Farbe der Touch-Gestenleiste und die obere Statusleiste. color durch die Textfarbe.

    <ph type="x-smartling-placeholder">
    </ph>
    Abbildung 2:Darauf achten, dass die Farben der Systemleiste mit der Textfarbe Ihrer App übereinstimmen

  • Fügen Sie keine Tippgesten oder Ziehziele unter Gesten-Einsätze hinzu. diese Konflikt mit Edge-to-Edge- und Gestensteuerung.

    <ph type="x-smartling-placeholder">
    </ph>
    Abbildung 3:Eingefügte Systemgesten. Platzieren von Fingertipps vermeiden Ziele in diesen Bereichen

Inhalte hinter den Systemleisten ziehen

Dank der randlosen Funktion kann Android die Benutzeroberfläche unter den Systemleisten ein noch umfassenderes Erlebnis. Wir empfehlen die Verwendung von Rand-zu-Rand-Elementen, da die Navigationsleiste transparent ist eine häufige Anforderung von Nutzenden. (Weitere Informationen zur Edge-to-Edge-Unterstützung bieten.

Eine App kann Überschneidungen bei Inhalten beheben, indem sie auf Einsätze reagiert. Einfügungen beschreiben wie viel der Inhalt Ihrer App aufgefüllt werden muss, damit er sich nicht mit Elemente der Android OS-Benutzeroberfläche wie die Navigationsleiste oder Statusleiste oder mit physische Gerätefunktionen wie Display-Aussparungen

Beachten Sie die folgenden Arten von Einfügungen, wenn Sie Designs für Edge-to-Edge-Nutzung entwickeln Cases:

  • Einfügungen von Systemleisten gelten für Benutzeroberflächen, die sowohl antippbar sind als auch durch die Systemleisten visuell verdeckt werden.
  • Einfügungen zu Touch-Gesten auf Systemebene gelten für Navigationsbereiche, die vom System verwendet werden. die Vorrang vor deiner App haben.

Statusleiste

Auf Android-Geräten enthält die Statusleiste Benachrichtigungssymbole und Systemsymbole. Die Nutzer interagiert mit der Statusleiste, indem er sie nach unten zieht, um auf die Benachrichtigung zuzugreifen. Farbton.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 4:Über der oberen App-Leiste hervorgehobener Bereich in der Statusleiste

Die Statusleiste kann je nach Kontext, Tageszeit, Einstellungen oder Designs des Nutzers und andere Parameter. Sie können auch die wie in den folgenden Beispielen dargestellt.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 5:Statusleiste im hellen und dunklen Design

Achte darauf, dass sich deine App-Inhalte jetzt über den gesamten Bildschirm erstrecken erforderlich. Verwenden Sie transparente Systemleisten mit randlosem Inhalt, wie in den folgenden Beispiel.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 6: Transparente Balken mit dem Edge-to-Edge-Funktion, mit der du deine Inhalte optimal präsentieren kannst indem sie möglichst viel Bildschirmfläche ausnutzen.


<ph type="x-smartling-placeholder">
</ph>
Abbildung 7:Stile der Systemleisten, um deine Inhalte zu optimieren oder dem Design deiner App Branding. Behalten Sie die Standardattribute der Systemleisten nicht bei.

Wenn eine Benachrichtigung eingeht, wird normalerweise ein Symbol in der Statusleiste angezeigt. Dieses signalisiert dem Nutzer, dass auf der Benachrichtigungsleiste etwas zu sehen ist. Dabei kann es sich um das App-Symbol oder -Symbol handeln, das den Kanal repräsentiert. Weitere Informationen finden Sie unter Benachrichtigungsdesign:

<ph type="x-smartling-placeholder">
</ph>
Abbildung 8:Benachrichtigungssymbol in der Statusleiste

Stil der Statusleiste festlegen

Den Hintergrund der Statusleiste als Teil Ihres App-Designs mit einer benutzerdefinierten Farbe gestalten Stil auswählen, Transparenz und Deckkraft festlegen.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

Wenn Sie die Hintergrundfarbe manuell festlegen, können Sie optional den Stil für einen optimalen Kontrast hell oder dunkel festlegen.

Aussparungen und Statusleiste anzeigen

Bei einigen Geräten ist eine Display-Aussparung ein Bereich, der in das Display hineinreicht. um Platz für die nach vorne gerichteten Sensoren zu schaffen. Kann das Aussehen beeinträchtigen von Statusleisten angezeigt. Die Display-Aussparungen können je nach Hersteller variieren.

Weitere Informationen zur Unterstützung von Display-Aussparungen

<ph type="x-smartling-placeholder">
</ph>
Abbildung 9:Beispiele für Display-Aussparungen

Unter Android können Nutzer die Navigation mit den Steuerelementen „Zurück“, „Startbildschirm“ und „Übersicht“ steuern:

  • Mit „Zurück“ kehren Sie direkt zur vorherigen Ansicht zurück.
  • Der Startbildschirm wird aus der App zum Startbildschirm des Geräts gewechselt.
  • In der Übersicht wird angezeigt, welche Apps geöffnet sind und vor Kurzem geöffnet wurden.

Nutzer können aus verschiedenen Konfigurationen für die Navigationsleiste wählen, einschließlich Touch-Gesten Navigation (empfohlen) und Bedienung über drei Schaltflächen.

Bedienung über Gesten

Seit der Einführung in Android 10 (API-Level 29) wird die Bedienung über Gesten empfohlen. die Art der Navigation, obwohl Sie die Einstellungen des Nutzers nicht überschreiben können. Touch-Geste verwendet die Navigation keine Schaltflächen für „Zurück“, „Startseite“ und „Übersicht“. Stattdessen wird ein Ziehpunkt mit einer einzigen Bewegung. Nutzer interagieren durch Wischen von links oder am rechten Bildschirmrand, um vor- und zurückzugehen, und von unten nach oben, um weiter zu gehen. . Wenn Sie nach oben wischen und halten, wird die Übersicht geöffnet.

Die Bedienung über Gesten ist ein besser skalierbares Navigationsmuster für Mobilgeräte und größere Bildschirme. Berücksichtigen Sie für eine optimale Nutzererfahrung Gestensteuerung durch:

  • Edge-to-Edge-Inhalte unterstützen
  • Fügen Sie unter Gestensteuerung keine Interaktionen oder Berührungszielbereiche hinzu.

Weitere Informationen zur Implementierung der Bedienung über Gesten

<ph type="x-smartling-placeholder">
</ph>
Abbildung 10:Navigationsleiste mit Gesten-Ziehpunkt

Bedienung über 3 Schaltflächen

Die Bedienung über drei Schaltflächen umfasst drei Schaltflächen: „Zurück“, „Startseite“ und „Übersicht“.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 11:Navigationsleiste mit drei Schaltflächen

Andere Variationen der Navigationsleiste

Je nach Android-Version und Gerät können andere Navigationsleistenkonfigurationen für Ihre Nutzer verfügbar sein. Die Bedienung über 2 Schaltflächen bietet zum Beispiel zwei für „Startbildschirm“ und „Zurück“.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 12:Navigationsleiste mit zwei Schaltflächen

Navigationsstil festlegen

Das folgende Beispiel zeigt, wie ein Navigationsstil implementiert wird.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

Android übernimmt den gesamten visuellen Schutz der Benutzeroberfläche durch Touch-Gesten im Navigationsmodus oder den Schaltflächenmodi.

  • Bedienung über Gesten: Das System wendet die dynamische Farbanpassung in Damit ändert sich die Farbe der Systemleisten je nach Inhalt hinter ihnen. Im folgenden Beispiel ist der Ziehpunkt in der Navigationsleiste eine dunkle Farbe, wenn sie über hellem Inhalt platziert wird, und umgekehrt.

    <ph type="x-smartling-placeholder">
    </ph>
    Abbildung 13:Dynamische Farbanpassung

  • Schaltflächenmodi: Das System wendet ein durchscheinendes Gitter hinter dem System an. (für API-Ebene 29 oder höher) oder eine transparente Systemleiste (für API-Ebene) 28 oder niedriger).

    <ph type="x-smartling-placeholder">
    </ph>
    Abbildung 14:Dynamische Farbanpassung mit Systemleisten die Farbe je nach Inhalt ändern

Tastatur und Navigation

<ph type="x-smartling-placeholder">
</ph>
Abbildung 15:Bildschirmtastatur mit Navigationsleisten

Jeder Navigationstyp reagiert angemessen auf die Bildschirmtastatur, Aktionen wie Schließen oder Ändern der Tastaturtyp. Für einen reibungslosen Wechsel der Tastatur Übergang, der den Übergang der App mit dem Schieben der Tastatur synchronisiert vom unteren Bildschirmrand nach oben und unten, WindowInsetsAnimationCompat

Immersiver Modus

<ph type="x-smartling-placeholder">
</ph>
Abbildung 16:Immersiver Modus im Vollbildmodus auf einem Mobilgerät im Querformat

Du kannst Systemleisten ausblenden, wenn du den Vollbildmodus benötigst, z. B. wenn sich der Nutzer einen Film ansieht. Der Nutzer sollte weiterhin Systemleisten und Benutzeroberfläche einblenden, um mit den Systemsteuerungen zu navigieren oder mit ihnen zu interagieren. Erfahren Sie mehr über die Designentwicklung für den Vollbildmodus oder darüber, wie Sie die Systemleisten für den immersiven Modus ausblenden.