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.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-1-dp-and-sp.png?authuser=9&hl=de)
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.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-2-density-buckets.png?authuser=9&hl=de)
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.
Kleinere Elemente wie Symbole, Schrift und einige Elemente innerhalb von Komponenten werden am besten an einem 4-dp-Raster ausgerichtet.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-3-baseline-grids.png?authuser=9&hl=de)
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.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-4-column-grid.png?authuser=9&hl=de)
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