Raster und Einheiten

Dichteunabhängige Pixel (dp) und skalierbare Pixel (sp) sind unerlässlich, um Layouts zu erstellen und Schriftarten zu präsentieren, die einheitlich auf die Vielzahl von Bildschirmdichten, Größenklassen, Formfaktoren und Seitenverhältnissen reagieren, die Android-Geräte ausmachen.

Fazit

  • Wenn Sie ein Baseline-Raster verwenden, halten Sie sich an die Maße 4 und 8.
  • Geben Sie die technischen Daten in dp und sp an, nicht in Pixeln.
  • Bitmap-/Rastergrafiken für alle Bucket exportieren
  • Entwerfen Sie mit einer responsiven Denkweise und berücksichtigen Sie dabei verschiedene Größenklassen, Auflösungen und Seitenverhältnisse.
  • Dichteausschlagsfreie Pixel (dp): Dichteunabhängige Pixel sind flexible Einheiten, die auf jedem Bildschirm skaliert werden, um einheitliche Abmessungen zu haben. Sie basieren auf der physischen Dichte des Bildschirms. Diese Einheiten beziehen sich auf einen Bildschirm mit 160 dpi (Dots per Inch), 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 eines sp entspricht dem Standardwert für ein dp. Das Android-System berechnet die tatsächlich zu verwendende Schriftgröße basierend auf dem Gerät und den Einstellungen des Nutzers in den Einstellungen seines Android-Geräts.
Abbildung 1: Schreibweise von dp und sp

Der Hauptunterschied zwischen diesen Maßeinheiten besteht darin, dass skalierbare Pixel die Schrifteinstellungen eines Nutzers beibehalten. Nutzer, die größere Texteinstellungen für die Barrierefreiheit festgelegt haben, sehen Schriftgrößen, die ihren Einstellungen entsprechen. Informationen zum Ändern der Schriftgröße

Android verwendet diese Einheiten, um Inhalte für verschiedene Geräte und Auflösungen zu skalieren und zu übersetzen.

Dichte-Buckets

Displays mit hoher Pixeldichte haben mehr Pixel pro Zoll als Displays mit niedriger Pixeldichte. Daher erscheinen UI-Elemente mit denselben Pixelabmessungen auf Bildschirmen mit niedriger Pixeldichte größer und auf Bildschirmen mit hoher Pixeldichte kleiner. Daher sollten Sie die Abmessungen nicht in Pixeln angeben.

Android gruppiert Bereiche mit unterschiedlichen Bildschirmdichten in „Buckets“ und verwendet diese, um die optimalen Assets auf Ihrem 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 je nach Geräteauflösung skaliert wird und in der Regel für Vektorgrafiken verwendet wird. Sie entsprechen jeweils einer Ressourcendatei Ihrer App.

mdpi hat eine Dichte von x1, hdpi eine Dichte von x1,5, xhdpi eine Dichte von x2, xxhdpi eine Dichte von x3 und xxxhdpi eine Dichte von x4.
Abbildung 2: Kantalupen in verschiedenen Dichten

So berechnen Sie dp:

dp = (Breite in Pixeln * 160) ÷ Bildschirmdichte

Raster

Referenz-Raster

Wenn Sie mit einem zugrunde liegenden Raster arbeiten, können Sie für eine einheitliche Anordnung und Abstände in Ihrer Benutzeroberfläche sorgen. Die Android-Benutzeroberfläche verwendet ein Raster mit 8 dp für Layout, Komponenten und Abstände.

Video 1:Ein Raster mit 8 dp, das 8 dp-Schritte hervorhebt

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

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

Spaltenraster

Spalten bilden ein Raster, um ein Layout vertikal zu definieren, indem Inhalte im Inhaltsbereich unterteilt werden. Inhalte werden in den Bereichen des Bildschirms platziert, die Spalten enthalten. Richten Sie die Inhalte an einem zugrunde liegenden Raster aus, aber behalten Sie eine flexible Größe bei. Grundlagen des Layouts

Abbildung 4:Raster mit vier Spalten

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

Größenklassen

Fenstergrößenklassen sind eine Reihe von subjektiven Ansichtsbereichs-Breakpoints, mit denen Sie responsive und adaptive Anwendungslayouts entwerfen, entwickeln und testen können. Android unterteilt Fenstergrößen in drei Klassen: Kompakt, Mittel und Maximiert. Weitere Informationen zu 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.

Verwenden Sie für Elemente wie Bilder, Oberflächen und Bildschirmgröße ein einheitliches Seitenverhältnis, um für Einheitlichkeit im Layout zu sorgen.

Für die gesamte Benutzeroberfläche werden die folgenden Seitenverhältnisse empfohlen:

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