Dichteunabhängige Pixel (dp) und skalierbare Pixel (sp) sind unerlässlich, um Layouts zu erstellen und Schriftarten zu präsentieren, die einheitlich auf die große Bandbreite an Bildschirmdichten, Größenklassen, Formfaktoren und Seitenverhältnissen reagieren, die Android-Geräte ausmachen.
Fazit
- Wenn Sie ein Grundlinienraster verwenden, halten Sie sich an Maße von 4 und 8.
- Geben Sie Spezifikationen in dp und sp an, nicht in Pixeln.
- Bitmap- (Raster-)Grafiken für alle Buckets exportieren.
- Berücksichtigen Sie beim Design verschiedene Größenklassen, Auflösungen und Seitenverhältnisse.
- Dichteunabhängige Pixel (dp): Dichteunabhängige Pixel sind flexible Einheiten, die so skaliert werden, dass sie auf jedem Bildschirm einheitliche Abmessungen haben. Sie basieren auf der physischen Dichte des Bildschirms. Diese Einheiten beziehen sich auf einen Bildschirm mit 160 DPI (Punkte pro Zoll), auf dem 1 dp ungefähr 1 px entspricht.
- Skalierbare Pixel (sp): Skalierbare Pixel haben dieselbe Funktion wie „dp“, aber für Schriftarten. Der Standardwert für „sp“ ist derselbe wie der Standardwert für „dp“. Das Android-System berechnet die tatsächliche Schriftgröße, die verwendet werden soll, basierend auf dem Gerät und den Einstellungen des Nutzers.
Der Hauptunterschied zwischen diesen Maßeinheiten besteht darin, dass skalierbare Pixel die Schriftarteneinstellungen eines Nutzers beibehalten. Nutzer, die größere Texteinstellungen für die Bedienungshilfe verwenden, sehen Schriftgrößen, die ihren Einstellungen entsprechen. Schriftgröße in Compose ändern
Android verwendet diese Einheiten, um die Skalierung und Übersetzung für die verschiedenen Geräte und Auflösungen zu ermöglichen.
Dichte-Buckets
Bildschirme mit hoher Dichte haben mehr Pixel pro Zoll als Bildschirme mit niedriger Dichte. Daher erscheinen UI-Elemente mit denselben Pixelabmessungen auf Bildschirmen mit niedriger Dichte größer und auf Bildschirmen mit hoher Dichte kleiner. Aus diesem Grund sollten Sie keine Maße in Pixeln angeben.
Unter Android werden Bildschirmdichten in „Buckets“ gruppiert, die verwendet werden, um die optimalen Assets für Ihr Gerät bereitzustellen. Die am häufigsten verwendeten Dichtebereiche sind mdpi, hdpi, xhdpi, xxhdpi und xxxhdpi. nodpi und anydpi beziehen sich auf einen Bereich, der nicht an die Geräteauflösung angepasst wird und in der Regel für Vektordrawables verwendet wird. Jeder Bereich entspricht einer Ressourcendatei Ihrer App.
So berechnen Sie „dp“:
dp = (Breite in Pixel × 160) / Bildschirmdichte
Grundlinienraster
Wenn Sie ein zugrunde liegendes Raster verwenden, können Sie in Ihrer Benutzeroberfläche einheitliche Abstände und Ausrichtungen schaffen. Die Android-Benutzeroberfläche verwendet ein 8-dp-Raster für Layout, Komponenten und Abstände.
Kleinere Elemente wie Symbole, Text und einige Elemente innerhalb von Komponenten sollten am besten an einem 4-dp-Raster ausgerichtet werden.
Layoutraster
Rastersysteme sind das Fundament jedes Layouts. Berücksichtigen Sie die Hierarchie, Menge und sogar die Botschaft der Inhalte.
Hierarchisches Raster
Ein hierarchisches Raster wird unter Berücksichtigung der Hierarchie oder Wichtigkeit der Inhalte erstellt. Stellen Sie sich das Layout einer Zeitung vor: Eine durchgehende Titelseite nimmt den Großteil des Layouts ein, während in einer kleineren Spalte frühere Artikel angezeigt werden.
Bei der Anpassung an verschiedene Bildschirmgrößen können Zellen in einem hierarchischen Layout neu angeordnet, in der Größe angepasst und ein- oder ausgeblendet werden.
Modulares Raster
Ein modulares Raster besteht aus einheitlichen Spalten und Zeilen, die ein rechteckiges Rastersystem bilden, an dem Inhalte ausgerichtet werden. Modulare Grids eignen sich gut für Inhalte mit ähnlicher Wichtigkeit und Größe, z. B. eine Kartengalerie.
Ein adaptives modulares Raster kann mehr Rasterzellen hinzufügen. Inhalte können an verschiedenen Rasterzellen ausgerichtet oder umgebrochen werden. Rasterzellen können über verschiedene Größen hinweg konsistent bleiben oder je nach Bedarf der Inhalte ihre Größe ändern.
Spaltenraster
Spalten bilden eine Rasterstruktur, um einem Layout eine vertikale Definition zu geben, indem sie Inhalte im Textbereich unterteilen. Inhalte werden in den Bereichen des Bildschirms platziert, die Spalten enthalten. Am zugrunde liegenden Raster ausrichten, um Inhalte auszurichten, aber flexible Größen beibehalten.
Die Grundlagen zum Einrichten eines Spaltenrasters und zum Anwenden von Inhalten finden Sie unter Layout-Grundlagen. Das Spaltensystem kann verschiedene Formfaktoren berücksichtigen, indem die Spaltengrößen und die Anzahl der Spalten je nach Bildschirmgröße an bestimmten Stellen angepasst werden. Gleichzeitig können Inhalte skaliert werden.
Größenklassen
Fenstergrößenklassen sind eine Reihe von Breakpoints für den Darstellungsbereich, die Ihnen beim Entwerfen, Entwickeln und Testen responsiver und adaptiver Anwendungslayouts helfen. Android unterteilt Fenstergrößenklassen in drei Kategorien: „Kompakt“, „Mittel“ und „Erweitert“. Weitere Informationen zu Fenstergrößenklassen
Seitenverhältnisse
Das Seitenverhältnis ist das Verhältnis zwischen der Breite und der Höhe eines Elements. Seitenverhältnisse werden als „Breite:Höhe“ angegeben.
Verwenden Sie für Elemente wie Bilder, Oberflächen und Bildschirmgröße ein einheitliches Seitenverhältnis, um das Layout konsistent zu halten.
Die folgenden Seitenverhältnisse werden für die Verwendung in Ihrer Benutzeroberfläche empfohlen:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3