Android-Apps spielen eine wichtige Rolle bei der Neugestaltung moderner Computer auf großen Bildschirmen. Aber allein mit der mobilen App auf einem Chromebook User Experience zu verbessern.
Auf dieser Seite werden einige Möglichkeiten beschrieben, wie Sie die Nutzererfahrung individuell anpassen können. für Laptop- und Convertible-Formfaktoren. Weitere Informationen finden Sie in der umfassende Liste mit Tests, um mehr darüber zu erfahren, wie Sie Ihre App Kompatibilität auf diesen Geräten.
Unterstützung für Mehrfenstermodus im freien Format nutzen
Die Implementierung von Android-Apps unter ChromeOS umfasst einen einfachen Mehrfenstermodus Support. Anstatt immer den gesamten Bildschirm einzunehmen, rendert Apps unter ChromeOS in Container mit kostenlosen Fenstern umwandeln, die sich eher für diese Geräte eignen.
Nutzer können die Größe des Fensters, das Ihre Android-App enthält, ändern, wie in Abbildung 1 gezeigt. Damit Ihre Freiform-Fenster reibungslos angepasst und Nutzer erhalten diese Informationen in den Richtlinien unter Fensterverwaltung.
![](https://developer.android.google.cn/static/images/topic/arc/resizable.png?authuser=9&hl=de)
Abbildung 1: Ein App-Fenster mit anpassbarer Größe
Mit den folgenden Tipps können Sie die Nutzerfreundlichkeit Ihrer App unter ChromeOS verbessern Best Practices:
- Behandeln Sie den Aktivitätslebenszyklus korrekt in und achte darauf, dass du auch dann die Benutzeroberfläche aktualisierst, wenn deine App nicht der ganz oben im Fokus.
- Achten Sie darauf, dass das Layout Ihrer App immer dann angepasst wird, wenn der Nutzer die Größe des Fensters ändert.
- Passen Sie die Anfangsabmessungen des App-Fensters an, indem Sie die Startgröße.
- Beachten Sie, dass die Ausrichtung der Root-Aktivität der App auf alle Fenster auswirkt.
Farbe der oberen Leiste anpassen
ChromeOS verwendet das App-Design, um die obere Leiste, die über der App angezeigt wird, farbig zu markieren.
was angezeigt wird, wenn Nutzende die Fenstersteuerelemente und die Schaltfläche „Zurück“ gedrückt halten. Um
für ChromeOS optimiert und angepasst aussehen,
colorPrimary
und nach Möglichkeit
colorPrimaryDark
Werte im Design Ihrer App fest.
Mit colorPrimaryDark
wird die obere Leiste eingefärbt. Wenn nur
colorPrimary
definiert, ChromeOS verwendet eine dunklere Version davon in
in der oberen Leiste. Weitere Informationen finden Sie unter Stile und Designs.
Unterstützung von Tastatur, Touchpad und Maus
Alle Chromebooks haben eine physische Tastatur und ein Touchpad, manche auch ein Touchscreen verwenden. Einige Geräte lassen sich von einem Laptop in ein Tablet umwandeln.
Unterstützen Sie in Ihren Apps für ChromeOS die Eingabe über Maus, Touchpad und Tastatur sodass die App auch ohne Touchscreen genutzt werden kann. Viele Apps unterstützen bereits Maus- und ein Trackpad ohne zusätzlichen Aufwand. Es ist jedoch am besten, die die für die Maus angemessen sind, und zwischen Maus- und Touchbedienung.
Achten Sie auf Folgendes:
- Alle Ziele sind mit der Maus anklickbar.
- Alle scrollbaren Touchoberflächen, die bei Mausradereignissen gescrollt werden können, wie in Abbildung 2.
- Mouseover-Zustände werden mit Bedacht implementiert, um die Erkennung der Benutzeroberfläche, ohne den Nutzer zu überfordern (siehe Abbildung 3).
![](https://developer.android.google.cn/static/images/topic/arc/scroll_on_mousewheel.png?authuser=9&hl=de)
Abbildung 2: Scrollen mit Mausrad
![](https://developer.android.google.cn/static/images/topic/arc/hover_states.png?authuser=9&hl=de)
Abbildung 3: Mouseover-Zustände der Schaltfläche
Gegebenenfalls musst du zwischen Maus und Berührung unterscheiden. Für zum Beispiel durch Tippen & kann durch Halten eines Elements eine Benutzeroberfläche mit Mehrfachauswahl ausgelöst werden, während kann ein Rechtsklick auf dasselbe Element stattdessen ein Optionsmenü auslösen.
Benutzerdefinierte Cursor
App anpassen Mauscursors, die zeigen, welches Element der Benutzeroberfläche die Nutzenden
mit denen Sie interagieren können und wie. Sie können die zu verwendende PointerIcon
festlegen
Wenn Nutzer mit einer Ansicht interagieren, indem sie die Methode setPointerIcon()
aufrufen.
Zeigen Sie in Ihren Apps Folgendes an:
- I-Balken-Zeiger für Text
- Ziehpunkte an anpassbaren Ebenenkanten
- Zeiger für Inhalte, die geschwenkt oder gezogen werden können durch Klicken und Ziehen
- Rotierende Ladesymbole
Die Klasse PointerIcon
stellt Konstanten bereit, die Sie
zum Implementieren benutzerdefinierter Cursors verwendet werden kann.
Tastenkombinationen und Navigation
Da jedes Chromebook über eine physische Tastatur verfügt, können Sie produktiver arbeiten können. Wenn Ihre App beispielsweise können Sie mit Strg + P ein Druckdialogfeld öffnen.
Auf ähnliche Weise lassen sich alle wichtigen UI-Elemente mithilfe der Tab-Navigation verarbeiten. Dies ist besonders wichtig für die Barrierefreiheit. Um die Standards für Barrierefreiheit zu erfüllen, Alle UI-Oberflächen müssen offensichtliche und barrierefreie wie in den folgenden Abbildungen dargestellt:
![](https://developer.android.google.cn/static/images/topic/arc/transversal_tabbing.png?authuser=9&hl=de)
Abbildung 4: Transversale Tabulatortaste.
![](https://developer.android.google.cn/static/images/topic/arc/hover_controls.png?authuser=9&hl=de)
Abbildung 5: Eine Wischgeste wird durch ein Steuerelement ersetzt, das angezeigt wird, wenn der Mauszeiger darauf bewegt wird.
Implementieren Sie Alternativen zur Tastatur oder Maus für Core Funktionen, die bei Berührungsspezifischen Interaktionen wie Berührungen und Hold-Aktionen Wischbewegungen oder andere Multi-Touch-Gesten. Eine Beispiellösung besteht darin, Schaltflächen, die auf einer Oberfläche erscheinen, wenn der Mauszeiger darauf bewegt wird.
Weitere Informationen zur Unterstützung von Tastatur, Touchpad und Maus findest du unter <ph type="x-smartling-placeholder"></ph> Eingabekompatibilität auf großen Bildschirmen.
Nutzereingabe weiter verbessern
Beachten Sie Folgendes, um eine Desktop-Funktionalität für Ihre App zu erreichen: Produktivitätsorientierte Eingaben.
Kontextmenüs
Kontextmenüs von Android, die Nutzer zusätzlich zu App-Funktionen durch einen Mausklick oder das Touchpad oder durch Berührung & Touchscreen gedrückt halten:
![](https://developer.android.google.cn/static/images/topic/arc/contextual_menu.png?authuser=9&hl=de)
Abbildung 6: Ein Kontextmenü, das durch einen Rechtsklick angezeigt wird.
Drag-and-Drop
Wenn Sie Drag-and-drop-Interaktionen wie in der folgenden Abbildung erstellen, effiziente, intuitive Produktivität Funktionalität zu Ihrer App hinzufügen. Weitere Informationen finden Sie unter Drag-and-drop.
![](https://developer.android.google.cn/static/images/topic/arc/drag_and_drop.png?authuser=9&hl=de)
Abbildung 7: Drag-and-drop in einer Dateistruktur-Oberfläche
Eingabestift-Unterstützung
Für Apps zum Zeichnen und zum Erstellen von Notizen ist die Unterstützung des Eingabestifts sehr wichtig. Verbesserte Unterstützung für Chromebooks und Tablets mit Eingabestift durch die Implementierung von Interaktionen die auf die Nutzung des Eingabestifts zugeschnitten sind.
Berücksichtigen Sie mögliche Abweichungen. verschiedenen Eingabestift-Hardware verwenden. Einen Überblick über die Eingabestift-APIs siehe Eingabekompatibilität auf großen Bildschirmen.
Layouts responsiv machen
Nutzen Sie den verfügbaren Platz auf dem Bildschirm Ihrer App unabhängig von in der Ansicht angezeigt werden (Vollbild, Hochformat, Querformat oder Fenster). Einige Beispiele für eine gute Speichernutzung umfassen Folgendes:
- Architektur der Display-App
- Beschränken Sie Textlänge und Bildgröße auf eine maximale Breite.
- Nutzen Sie den Platz in der Symbolleiste der App besser.
- Bessere Platzierung von UI-Angeboten durch Anpassung der App an die Mausnutzung der „Mag ich“-Nutzung.
- Größe von Videos und Bildern optimieren, maximale Breite festlegen und Höhe für alle Medien und maximiert die Lesbarkeit und Lesbarkeit.
- Implementieren Sie ein responsives Spaltensystem. Weitere Informationen finden Sie unter Responsive Layoutraster verwenden können.
- Passen Sie bei Bedarf mithilfe des Spaltensystems die Größe der Benutzeroberfläche an und ändern Sie sie. Öffnen Sie nach Möglichkeit keine neuen Fenster.
- Entfernen oder reduzieren Sie die Bedeutung von Komponenten mit horizontalem Scrollen.
- Vermeiden Sie eine modale Vollbild-Benutzeroberfläche. Verwenden Sie eine Inline-Benutzeroberfläche wie Fortschrittsanzeigen und für alle nicht kritischen Aktionen.
- Verbesserte UI-Komponenten wie Uhrzeit- und Datumsauswahl, Textfelder und Menüs, die für Maus, Tastatur und größere Bildschirme entwickelt wurden.
- Direktbearbeitung, zusätzliche Spalten oder eine modale Benutzeroberfläche anstelle einer neuen Aktivität verwenden für eine kleine bis mittlere Bearbeitungsfunktion.
- Unverankerte Aktionsschaltflächen (UAS) entfernen oder ändern, um die Tastatur zu verbessern Navigation. Standardmäßig erscheint eine UAS an letzter Stelle in der Transversale Tabbing-Funktion. Reihenfolge. Er sollte stattdessen an erster Stelle stehen, da es sich um die primäre Aktion handelt. durch ein anderes, höheres Angebot ersetzen.
![](https://developer.android.google.cn/static/images/topic/arc/responsive_layout.png?authuser=9&hl=de)
Abbildung 8: Simulationen eines responsiven Layouts auf einem Smartphone und einem Desktop-Bildschirm
Navigationsmuster ändern
Die Schaltfläche „Zurück“ auf Systemebene ist ein Muster, von den Handheld-Wurzeln von Android, die in Desktop-Kontext zu verwenden.
Da Ihre App zunehmend an eine Laptop-Umgebung angepasst wird, sollten Sie sich zu einem Navigationsmuster bewegen, durch das die Zurück-Schaltfläche weniger hervorgehoben wird. Lassen Sie die eigenen Verlaufs-Stack durch Bereitstellung von In-App-Back-ups oder anderen Escape-Routen wie Schließen- oder Abbrechen-Schaltflächen Teil der Benutzeroberfläche für den großen Bildschirm.
Sie können festlegen, ob für Ihre App eine Zurück-Schaltfläche in ihrem Fenster angezeigt wird, indem Sie
das Festlegen einer Einstellung
<activity>
Tag. Bei der Einstellung true
wird
Schaltfläche „Zurück“:
<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />
Probleme mit Vorschaubildern der Kamera beheben
Kameraprobleme können auftreten, wenn die App nur im Hochformat ausgeführt werden kann aber er führt sie im Querformat aus. In diesem Fall wird die Vorschau oder der wird möglicherweise falsch gedreht.
Der Kompatibilitätsmodus bestimmt, wie das System Ereignisse wie Ausrichtungsänderungen in ChromeOS So lassen sich Probleme vermeiden, wenn die Kamera in der falschen Ausrichtungsmodus festlegen. Wenn Sie den Kompatibilitätsmodus aktivieren möchten, müssen Sie die folgenden Kriterien erfüllen:
- Nehmen Sie mindestens Android 7.0 (API-Level 24) vor. Die SDK-Mindestebene kann niedriger sein.
- Die Größe der App anpassen.
Geräteeinstellungen verwalten
Beachten Sie die folgenden Geräteeinstellungen für Apps, die unter ChromeOS ausgeführt werden.
Lautstärke ändern
ChromeOS-Geräte sind Geräte mit fester Lautstärke: Apps, die Ton abspielen, haben einen eigenen Lautstärkeregler. Befolgen Sie die Richtlinien für In Arbeit mit Geräten mit festem Volumen.
Bildschirmhelligkeit ändern
Sie können die Gerätehelligkeit unter ChromeOS nicht anpassen. Aufrufe der
system settings
und
WindowManager.LayoutParams
werden ignoriert.
Zusätzliche Lernmaterialien
Weitere Informationen zur Optimierung von Android-Apps für Chromebooks findest du in der folgenden Ressourcen:
- Lesen Sie die <ph type="x-smartling-placeholder"></ph> Beitrag zur Bereitstellung Ihrer Android-App auf Chromebooks in der Android-Entwicklerdokumentation Blog.
- Android-Apps ansehen für Chromebooks und Geräte mit großem Bildschirm von der Google I/O 2017