Kanonische Widget-Layouts

Entwickeln Sie effektive Widget-Layouts, indem Sie zuerst Ihre Kerninhalte festlegen. Ihr Layout bestimmt, wie Informationen und interaktive Elemente in Ihrem Widget angeordnet sind. Android bietet mehrere vorgefertigte Layouts für Symbolleisten-, Text-, Listen- und Raster-Widgets, um diesen Prozess zu vereinfachen.

Text

Text-Layouts eignen sich ideal für die Anzeige prägnanter Informationen. Sie können die visuelle Attraktivität Ihres Widgets verbessern, indem Sie optional ein Bild neben dem Text einfügen.

Nur Text

Ideal für Titel, Statusaktualisierungen, kurze Beschreibungen oder jedes Szenario in dem eine einzelne Textzeile die Nachricht effektiv vermittelt.

Text und Bild

Fügen Sie ein Bild hinzu, um die visuelle Wirkung zu erhöhen. Weitere Informationen finden Sie unter Breakpoints , um zu erfahren, wie Sie dieses Layout an verschiedene Bildschirmgrößen anpassen.

Symbolleisten

Mit Symbolleisten-Layouts können Sie Nutzern in einem flexiblen Layout, das sich an verschiedene Widget-Größen anpasst, schnellen Zugriff auf häufig verwendete Aufgaben in Ihrer App ermöglichen.

Suchleiste

Ein Layout für die Suchleiste wurde bewusst so gestaltet, dass der Fokus auf der Suche als primäre Aktion in der Symbolleiste liegt. Zusätzliche praktische Schaltflächen können schnellen Zugriff auf häufig verwendete Funktionen ermöglichen.

Symbolleiste

In Symbolleisten wird das App-Branding gefolgt von Schaltflächen für die am häufigsten verwendeten Aufgaben Sie eignen sich ideal für umschaltbare Einstellungen oder Aufgabenlinks. Beim Ändern der Größe können weniger häufig verwendete Optionen zugunsten häufigerer Aktionen ausgeblendet werden. Verwenden Sie Breakpoints , um bei Bedarf eine neue Schaltfläche mit einer Mindestgröße von 48 dp hinzuzufügen.

Listen

Verwenden Sie Listen-Layouts, um mehrere Elemente in einem übersichtlichen, leicht zu überfliegenden Format zu organisieren. Das ist ideal für Schlagzeilen, To-do-Listen oder Nachrichten. Organisieren Sie Inhalte in einer strukturierten, leicht zu überfliegenden Liste. Je nach Ihren Inhaltsanforderungen können Sie zwischen einer Darstellung mit oder ohne Container wählen.

Liste mit Text und Bild

Listen mit Text und Bild, die leicht zu überfliegen sind, eignen sich perfekt für die Präsentation mehrerer Inhaltstypen wie Schlagzeilen, Playlists mit Albumcovern oder Nachrichten.

Checkliste

Das Checklisten-Layout eignet sich perfekt für die Anzeige von Aufgaben und bietet klare Tippziele mit denen Nutzer Elemente schnell als erledigt markieren können.

Aktionsliste

Mit Aktionslisten können Sie intuitive Steuerelemente gruppieren. Visuelle Ein-/Aus Status bieten sofortiges Feedback zum Status von Elementen.

Bild ohne Rand

Dieses Layout eignet sich ideal für die Präsentation von Bildern ohne Rand auf Android 17 und höher. Es verwendet Snap-Scrolling, um sicherzustellen, dass jedes untergeordnete Element perfekt an die Höhe des Widget-Containers angepasst ist.

Raster

Präsentieren Sie Bilder in einem kompakten, flexiblen, visuell ansprechenden Raster mit optionalen Labels. Verwenden Sie Spalten und Zeilen, die sich an verschiedene Bildschirmgrößen anpassen.

Nur Bild

Erstellen Sie visuell ansprechende, scrollbare Bildergalerien mit Rastern, die nur Bilder enthalten. Zeilen und Spalten passen sich automatisch an verschiedene Bildschirmgrößen an, um eine optimale Präsentation zu gewährleisten.

Bild und Text

Sie können auch Textlabels und Beschreibungen einfügen, um den Inhalt Ihres Bildrasters mit zusätzlichem Kontext und Informationen zu versehen.

Codebeispiele

In der folgenden Tabelle wird jedes kanonische Layout seiner entsprechenden Jetpack Glance-Implementierung im GitHub-Repository für Android-Plattformbeispiele zugeordnet.

Kanonisches Layout Referenzdateien Anleitung
Listenlayout für Aktionen
  • Verarbeiten Sie Aktionen für Listenelemente mit Glance-Aktions-Callbacks und sorgen Sie für korrekte Statusaktualisierungen.
Listenlayout für Checkliste
  • Implementieren Sie das Umschalten des Kontrollkästchenstatus mit Aktionsparametern oder -Callbacks, um Sammlungen zu aktualisieren.
  • Verwenden Sie Glance-Aktions-Callbacks wie `actionRunCallback`, `ActionCallback(actionParametersOf(...))` oder `actionStartActivity(...)` für die `onClick`-Parameter des Widgets, um Klickereignisse wie das Tippen auf ein Kontrollkästchen zu verarbeiten.
Layout für expressive Symbolleiste
  • Vermeiden Sie `ColorProvider`-Importfehler: Importieren Sie `androidx.glance.unit.ColorProvider` und verwenden Sie `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Verwenden Sie `GlanceModifier.background(Color)` direkt für einfarbige Hintergrundfarben anstelle von `ColorProvider`.
Layout für Bildraster
  • Verwenden Sie einfarbige Farben (`GlanceModifier.background`) oder lokale Drawables für Bildelemente, es sei denn, eine Bibliothek zum Laden von Bildern ist konfiguriert oder erforderlich.
Listenlayout mit Text und Bild
  • Gängige Anwendungsfälle: Newsfeeds, Artikellisten, Trainingsverläufe, Nachrichtenfeeds und vertikale Listen mit Thumbnails.
  • Achten Sie auf ein ausgewogenes Verhältnis zwischen der Höhe der Listenzeile und dem Text, wenn Sie Thumbnails mit primärem/sekundärem Text kombinieren.
Layout für langen Text
  • Wenn Sie `Dp`-Werte multiplizieren, z. B. `2 * padding`, importieren Sie `androidx.compose.ui.unit.times`.
  • Beachten Sie die Größenregeln: Verwenden Sie Dimensionen aus `dimens.xml` für das Padding und die Typografieskalierung.
Layout für Suchleiste
  • Vermeiden Sie `ColorProvider`-Importfehler: Importieren Sie `androidx.glance.unit.ColorProvider` und verwenden Sie `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Verwenden Sie `GlanceModifier.background(Color)` direkt für einfarbige Hintergrundfarben anstelle von `ColorProvider`.
Layout für Bild ohne Rand / Snap-Scrolling
  • Legen Sie für das Snap-Scrolling `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` für `LazyColumn` fest.
  • Wenn Sie Snap-Scrolling implementieren, sind Glance 1.3.0-alpha02 oder höher, SDK 37 (Baklava) oder höher und Android-Gradle-Plug-in (AGP) 9.1.0 oder höher erforderlich.
  • Legen Sie in der Widget-Provider-Klasse `override val sizeMode: SizeMode = SizeMode.Exact` fest.
Layout für Standardsymbolleiste
  • Informationen zur Vermeidung von `ColorProvider`-Importfehlern finden Sie unter Fehlerbehebung. Verwenden Sie `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Verwenden Sie `GlanceModifier.background(Color)` direkt für einfarbige Hintergrundfarben anstelle von `ColorProvider`.
Layout für Text mit Bild
  • Beachten Sie die Regeln für die Größe von responsiven Layouts, um Text und Bild je nach den verfügbaren Widget-Dimensionen nebeneinander oder übereinander anzuordnen.