Raster und Einheiten

Dichteunabhängige Pixel (dp) und skalierbare Pixel (sp) sind unerlässlich für die Erstellung von Layouts und die Darstellung von Schriftarten, die einheitlich auf die verschiedenen Bildschirmdichten, Größenklassen, Formfaktoren und Seitenverhältnissen von Android-Geräten reagieren.

Takeaways

  • Wenn Sie ein Grundlinienraster verwenden, halten Sie sich an die Maße 4 und 8.
  • Geben Sie Spezifikationen in dp und sp statt in Pixeln an.
  • Bitmap-/Rastergrafiken für alle Buckets exportieren.
  • Entwerfen Sie Ihre Designs responsiv und berücksichtigen Sie dabei verschiedene Größenklassen, Auflösungen und Seitenverhältnisse.
  • Dichte-unabhängige Pixel (dp): dichteunabhängige Pixel sind flexible Einheiten, die skaliert werden, um auf jedem Bildschirm einheitliche Abmessungen zu haben. Sie basieren auf der physischen Dichte des Bildschirms. Diese Einheiten beziehen sich auf einen Bildschirm mit 160 dpi (Punkten pro Zoll), auf dem 1 dp ungefähr 1 Pixel entspricht.
  • Skalierbare Pixel (sp): Skalierbare Pixel haben die gleiche Funktion wie „dp“, jedoch für Schriftarten. Der Standardwert von „sp“ ist mit dem Standardwert für „dp“ identisch. Das Android-System berechnet die tatsächlich zu verwendende Schriftgröße anhand des Geräts und der Nutzereinstellungen, die in der App „Einstellungen“ auf dem Android-Gerät festgelegt sind.
Abbildung 1:dp im Vergleich zu sp angeben

Der Hauptunterschied zwischen diesen Maßeinheiten besteht darin, dass bei skalierbaren Pixeln die Schriftarteinstellungen eines Nutzers beibehalten werden. Nutzende mit größeren Texteinstellungen für Barrierefreiheit sehen die Schriftgrößen Weitere Informationen zum Ändern der Schriftgröße

Android verwendet diese Einheiten für die Skalierung und Übersetzung für unterschiedliche Geräte und Auflösungen.

Dichte-Buckets

Displays mit hoher Punktdichte haben mehr Pixel pro Zoll als solche mit niedriger Dichte. Daher erscheinen UI-Elemente mit denselben Pixelmaßen auf Bildschirmen mit niedriger Dichte größer und auf Bildschirmen mit hoher Dichte kleiner. Aus diesem Grund sollten Messwerte nicht in Pixeln angegeben werden.

Android gruppiert Bildschirmdichtebereiche in „Buckets“ und verwendet diese, um die optimalen Assets auf deinem Gerät bereitzustellen. Die am häufigsten verwendeten Dichte-Buckets sind mdpi, hdpi, xhdpi, xxhdpi und xxxhdpi. nodpi und anydpi beziehen sich auf einen Bucket, der nicht nach Geräteauflösung skaliert wird und in der Regel für Vektor-Drawables verwendet wird. Sie entsprechen jeweils einer Ressourcendatei deiner App.

Abbildung 2:Party-Cantaloupe in der jeweiligen Dichte

So berechnen Sie dp:

dp = (Breite in Pixeln * 160) / Bildschirmdichte

Raster

Grundlinienraster

Die Verwendung eines darunterliegenden Rasters sorgt für einheitliche Abstände und einheitliche Ausrichtungen auf der Benutzeroberfläche. Die Android-UI verwendet ein 8-dp-Raster für Layout, Komponenten und Abstände.

Video 1:Ein 8-dp-Raster, in dem ein Schritt von 8 dp hervorgehoben ist

Kleinere Elemente wie Symbole, Schrift und einige Elemente innerhalb von Komponenten werden am besten an einem 4-dp-Raster ausgerichtet.

Abbildung 3:8-dp-Raster sind für die meisten UI-Elemente ideal, während ein 4-dp-Raster für kleinere Elemente wie Symbole besser geeignet ist.

Spaltenraster

Mit Spalten wird eine Rasterstruktur erstellt, um einem Layout eine vertikale Definition zu geben, indem der Inhalt innerhalb des Textbereichs unterteilt wird. Die Inhalte werden in den Bildschirmbereichen platziert, die Spalten enthalten. Richte dich an einem darunter liegenden Raster aus, um den Inhalt auszurichten, sollte aber eine flexible Größe beibehalten. In Layout-Grundlagen können Sie sich mit den Grundlagen zum Einrichten eines Spaltenrasters und zum Anwenden von Inhalten vertraut machen.

Abbildung 4:Vierspaltiges Raster

Weitere Informationen zum Erstellen flexibler Layouts für verschiedene Formfaktoren finden Sie auf der Seite Kanonische Layouts von Material 3.

Größenklassen

Fenstergrößenklassen sind ein Satz von Haltepunkten für den Darstellungsbereich, mit denen Sie responsive und adaptive Anwendungslayouts entwerfen, entwickeln und testen können. Android teilt die Fenstergrößenklassen in drei Klassen auf: „Compact“, „Medium“ und „Maximiert“. Weitere Informationen finden Sie unter Fenstergrößenklassen.

Seitenverhältnisse

Das Seitenverhältnis ist das Verhältnis zwischen der Breite und Höhe eines Elements. Seitenverhältnisse werden als Breite:Höhe geschrieben.

Verwende ein konsistentes Seitenverhältnis für Elemente wie Bilder, Oberflächen und Bildschirmgröße, um ein konsistentes Layout zu erhalten.

Die folgenden Seitenverhältnisse werden für die Verwendung in der gesamten Benutzeroberfläche empfohlen:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3