App-Widgets – Übersicht

Widgets sind ein wesentlicher Aspekt der Anpassung des Startbildschirms. Ihnen fällt ein, „auf einen Blick“ Ansichten der wichtigsten Daten und Funktionen einer App die direkt auf dem Startbildschirm der Nutzenden zugänglich sind. Nutzer dürfen Widgets verschieben auf dem Startbildschirm und, falls dies unterstützt wird, die Größe anpassen, die gewünschte Menge an Informationen im Widget auswählen.

In dieser Dokumentation werden die verschiedenen Widgets vorgestellt, die Sie erstellen und Designprinzipien zu befolgen. Informationen zum Erstellen eines App-Widgets mit den Remote View APIs und XML-Layouts finden Sie unter Einfaches Widget erstellen. Bis ein Widget mit der Kotlin- und der Compose-API zu erstellen, siehe Jetpack Glance:

Widget-Typen

Überlegen Sie sich bei der Planung Ihres Widgets, welche Art von Widget Sie erstellen möchten. Widgets fallen in der Regel in eine der folgenden Kategorien:

Informations-Widgets

Beispiel für ein Wetter-Widget, in dem Tokio überwiegend angezeigt wird
            bewölkt bei 14 Grad und die prognostizierte Temperatur beginnt um
            16:00 bis 19:00 Uhr
Abbildung 1: Ein Informations-Widget einer Wetter-App.

Informations-Widgets zeigen in der Regel wichtige Informationen an und verfolgen, wie dass sich diese Informationen im Laufe der Zeit ändern. Beispiele für Informations-Widgets: Wetter Widgets, Uhr-Widgets oder Widgets für die Verfolgung von Sportergebnissen. Wenn Sie auf Informations-Widgets tippen, wird in der Regel die zugehörige App gestartet und eine Detailansicht der Widget-Informationen geöffnet.

Sammlungs-Widgets

Sammlungs-Widgets sind auf die Anzeige mehrerer Elemente desselben Typs spezialisiert, z. B. eine Sammlung von Bildern aus einer Galerie-App, eine Sammlung von Artikeln aus einer Nachrichten-App oder eine Sammlung von E-Mails oder Nachrichten von einer Kommunikations-App. Sammlungs-Widgets können vertikal scrollen.

Sammlungs-Widgets sind in der Regel auf folgende Anwendungsfälle ausgerichtet:

  • Durchstöbern Sie die Sammlung.
  • Ein Element der Sammlung wird in der zugehörigen Detailansicht geöffnet.
  • Interagieren mit Elementen, z. B. sie als erledigt kennzeichnen – mit Unterstützung für zusammengesetzte Schaltflächen in Android 12 (API-Level 31).

Widgets steuern

Ein Widget für eine App
namens „LED-Liste“, Ein/Aus-Schaltfläche wird angezeigt
            mit der Bezeichnung "Schlafzimmer", „Küche“ und „Wohnzimmer“. mit den ersten beiden
            Ausgeschaltete Schalter
Abbildung 4: Beispiel für ein Steuerelement-Widget.

Der Hauptzweck eines Steuerelement-Widgets besteht darin, häufig verwendete Funktionen anzuzeigen, dass Nutzer sie vom Startbildschirm aus auslösen können, ohne die Man kann sie sich als Fernbedienungen für eine App vorstellen. Ein Beispiel für eine Das Steuerungs-Widget ist ein Smart-Home-Steuerungs-Widget, mit dem Nutzer das Licht in ihrem Zuhause einschalten können. ein- oder ausschalten.

Durch die Interaktion mit einem Steuerelement-Widget wird möglicherweise eine zugehörige Detailansicht im Das hängt davon ab, ob die Funktion des Steuerelement-Widgets Daten ausgibt, etwa bei einem Such-Widget.

Hybrid-Widgets

Eine allgemeine Musik-App mit Schaltflächen für Daumen
             „Zurück“, „Wiedergabe/Pause“, „Vorwärts“ und „Mag ich“. Künstler und
            Titel sind als "Interpret" aufgeführt. und „Beispielmusik“. .
Abbildung 5: Beispiel für ein Musik-App-Widget.

Einige Widgets stehen zwar für einen der oben genannten Typen, – Informationen, Sammlung oder Kontrolle –, sind viele Widgets Hybride, die Elemente verschiedener Typen kombinieren. Beispiel: Ein Musikplayer Widget ist in erster Linie ein Steuerelement-Widget, zeigt dem Nutzer aber auch, wie ein Informations-Widget.

Bei der Planung deines Widgets solltest du ein Design basierend auf einem der Basistypen entwerfen und Elemente hinzufügen. anderer Typen bei Bedarf.

Widgets in Google Assistant einbinden

Google Assistant kann auf Sprachbefehle von Nutzern hin beliebige Widgets anzeigen. Sie können Ihre Widgets so konfigurieren, dass App-Kampagnen Aktionen, mit denen Nutzer Du erhältst Schnellinfos und interaktive Apps auf Assistant-Oberflächen wie Android und Android Automatisch Weitere Informationen zur Widget-Ausführung für Assistant findest du unter App Actions integrieren mit Android Widgets.

Widget-Einschränkungen

Widgets können als „Mini-Apps“ verstanden werden, gibt es bestimmte Einschränkungen die Sie kennen sollten, bevor Sie Ihr Widget entwerfen.

Touch-Gesten

Da sich Widgets auf dem Startbildschirm befinden, müssen sie mit den Widgets Navigation, die dort eingerichtet ist. Dadurch wird die Unterstützung von Touch-Gesten eingeschränkt, in einem Widget im Vergleich zu einer Vollbild-App verfügbar sind. Apps können Nutzern Horizontal zwischen Bildschirmen navigieren, diese Geste wird auf dem Startbildschirm bereits ausgeführt. um zwischen den Startbildschirmen zu wechseln.

Die einzigen für Widgets verfügbaren Touch-Gesten sind das Berühren und das vertikale Wischen.

Elemente

Aufgrund der Einschränkungen von Gesten für Widgets sind einige UI-Bausteine die eingeschränkte Touch-Gesten verwenden, sind für Widgets nicht verfügbar. Eine vollständige Liste unterstützter Bausteine und weitere Informationen zu Layouteinschränkungen, Siehe Widget-Layout erstellen und Flexibles Widget bereitstellen Layouts.

Designrichtlinien

Widget-Inhalte

Widgets sind eine großartige Möglichkeit, Nutzer durch "Werbung" auf Ihre App aufmerksam zu machen. neue und die in Ihrer App verfügbar sind.

Wie bei den Teasern auf der Titelseite einer Zeitung werden Widgets App-Informationen bündeln und eine Verbindung zu detaillierteren Details herstellen in der App. Das Widget soll die Information während die ist das „Mahlzeit“. Sicherstellen, dass in Ihrer App mehr Details zu einer Information angezeigt werden als das, was im Widget angezeigt wird.

Neben den reinen Informationsinhalten können Sie in Ihrem Widget Navigationslinks zu häufig verwendeten Bereichen Ihrer App einfügen. So können Nutzer Aufgaben schneller erledigen und die App wird auf dem Startbildschirm funktional erweitert.

Gute Kandidaten für Navigationslinks in Widgets sind:

  • Generative Funktionen:Das sind die Funktionen, mit denen Nutzer erstellen können. neue Inhalte für eine App zu erstellen, z. B. zum Erstellen eines neuen Dokuments oder einer neuen Nachricht.

  • App auf oberster Ebene öffnen: Wenn Nutzer auf ein Informationselement tippen, gelangen sie in der Regel zu einem Detailbildschirm auf niedrigerer Ebene. Der Zugriff auf die der App bietet mehr Flexibilität bei der Navigation und eine spezielle App-Verknüpfung ersetzen, über die Nutzer sonst zum App auf dem Startbildschirm. App-Symbol für diese Funktion verwenden kann Ihrem Widget auch eine klare Identität geben, wenn die Daten, die Anzeige nicht eindeutig ist.

Größe des Widgets anpassen

Standard-Widget von Google Uhr
Abbildung 6: Standard-Uhr-Widget von Google.

Berühren und Wenn Sie ein Widget mit anpassbarer Größe gedrückt halten und es dann loslassen, wird das Widget Modus zum Ändern der Größe. Mithilfe der Ziehpunkte oder der Ecken des Widgets können Nutzer ihre bevorzugte Größe.

Durch Ändern der Größe können Nutzer die Höhe und Breite eines Widgets im des Platzierungsrasters auf dem Startbildschirm. Sie können festlegen, ob Ihr Widget frei skalierbar ist oder nur horizontal oder vertikal geändert werden kann. Sie müssen die Größenänderung nicht unterstützen, wenn Ihr Widget von Natur aus eine feste Größe hat.

Die Möglichkeit, die Größe von Widgets durch Nutzer anzupassen, hat wichtige Vorteile:

  • Sie können genau festlegen, wie viele Informationen in den einzelnen Widgets angezeigt werden sollen.
  • Sie können das Layout von Widgets und Verknüpfungen auf ihrem Startbildschirm besser beeinflussen Steuerfeldern.

Planen Sie eine Strategie zum Ändern der Größe des Widgets entsprechend dem Typ des Widgets, das Sie erstellen. Listen- oder rasterbasierte Sammlungs-Widgets da die Größe des Widgets den vertikalen Scrollbereich vergrößert oder verkleinert. Unabhängig von der Größe des Widgets kann der Nutzer weiterhin durch alle Informationen Elemente sichtbar sind.

Informations-Widgets erfordern mehr praktische Planung, da sie scrollbar ist und der gesamte Inhalt in eine bestimmte Größe passen muss. Sie müssen dynamisch Passen Sie den Inhalt und das Layout Ihres Widgets an die Größe an, die der Nutzer über das Vorgang zum Ändern der Größe.

Im folgenden Beispiel kann der Nutzer die Größe eines Wetter-Widgets auf drei erhalten Sie umfassendere Informationen zum Wetter am aktuellen Standort, wird das Widget größer.

Beispiel für ein Wetter-Widget in der kleinsten 3x2-Rastergröße
            Standortname (Tokio), Temperatur (14 °) und Symbol für
            teilweise bewölkt
Abbildung 7: Beispiel für ein Wetter-Widget in einem 3 × 2-Raster in der Größe „Klein“.


Beispiel für ein Wetter-Widget in der Größe „mittel“ (5 × 2) mit der gesamten Benutzeroberfläche des Rasters 3 × 2 sowie dem Label „überwiegend bewölkt“ und den prognostizierten Temperaturen von 16:00 bis 19:00 Uhr
Abbildung 8: Beispiel für ein Wetter-Widget in einem 5x2-Raster "mittel" Größe.


Beispiel für ein Wetter-Widget in der Größe 5 x 4 (Large) einschließlich der gesamten Benutzeroberfläche
            3x2- und 5x2-Rastergrößen sowie eine Wetterprognose
            von Dienstag bis Freitag
Abbildung 9: Beispiel für ein Wetter-Widget im 5 × 4-Raster in der Größe „Large“ (Groß).

Legen Sie für jede Widget-Größe fest, wie viele App-Informationen angezeigt werden sollen. Konzentrieren Sie sich bei kleineren Formaten auf die wesentlichen Informationen und fügen Sie wenn das Widget horizontal und vertikal wächst.

Hinweise zum Layout

Es ist verlockend, Ihre Widgets anhand der Abmessungen des Placement-Rasters eines Geräts zu layouten, mit dem Sie entwickeln. Dies kann ein guter Anfang Näherungswert liefern, beachten Sie jedoch die folgenden Punkte:

  • Wenn Sie Ihre Strategie zur Größeänderung von Widgets auf „Größengruppen“ statt auf variable Rasterabmessungen ausrichten, erzielen Sie die zuverlässigsten Ergebnisse.
  • Die Anzahl, die Größe und der Abstand von Zellen können von Gerät zu Gerät stark variieren. . Daher ist es sehr wichtig, dass Ihr Widget flexibel ist und mehr oder weniger Platz als erwartet einnehmen kann.
  • Wenn der Nutzer die Größe eines Widgets ändert, antwortet das System mit einem dp-Größenbereich in die Ihr Widget neu zeichnen kann.
  • Ab Android 12 können Sie detailliertere Größenangaben machen und flexiblere Layouts verwenden. Dazu gehören:

Widget-Konfiguration nach Nutzern

Manchmal müssen die Nutzenden das Widget erst einrichten, bevor es nützlich werden kann. Stellen Sie sich ein E-Mail-Widget vor, bei dem Nutzende vor dem Hochladen den E-Mail-Ordner auswählen müssen, kann der Posteingang oder ein Widget für statische Fotos angezeigt werden, dem Nutzer ein Bild aus der Galerie, das angezeigt werden soll. Android-Widgets zeigen ihre direkt nachdem der Nutzer das Widget auf dem Startbildschirm abgelegt hat.

Checkliste für das Widget-Design

  • Konzentriere dich auf kleine Abschnitte der Informationen auf deinem Widget. Maximieren Informationen in Ihrer App.
  • Wähle den passenden Widget-Typ für deine Zwecke aus.
  • Planen Sie, wie sich der Inhalt Ihres Widgets an verschiedene Größen anpassen soll.
  • Das Layout des Widgets ist unabhängig von Ausrichtung und Gerät. kann das Layout dehnt und verkleinert werden.
  • Überlegen Sie, ob für Ihr Widget eine zusätzliche Konfiguration erforderlich ist.