Verwenden Sie eine Scrollansicht für Seiten, die mehr Informationen enthalten, als auf den Bildschirm passen, oder die längere und intensivere Interaktionen erfordern.
Voreingestellte Komponenten für scrollbare Layouts
Dialogfeld mit Schaltflächen unten
Dialogfeld mit Schaltflächen unten
Dialogfeld mit zwei Schaltflächen unten
Beispiele für benutzerdefinierte Scrolllayouts
Bei scrollenden App-Bildschirmen sind Sie nicht auf die festgelegten Komponenten beschränkt, sondern können Elemente kombinieren, um das gewünschte Layout zu erstellen. Achten Sie auf die Länge eines scrollenden Bildschirms und die Verwendung von responsiven (prozentualen) Rändern und Abständen, um zu prüfen, ob sich Komponenten an die verfügbare Bildschirmgröße anpassen.
Zusätzliche Inhalte auf größeren Bildschirmen
Schaltflächenliste: Symbolschaltflächen mit einer Symbolgröße von 26 dp
Schaltflächenliste: App-Schaltflächen mit einer Symbolgröße von 32 dp
Schaltflächenliste: App-Schaltflächen mit einer Symbolgröße von 36 dp
Schaltflächenliste mit Ein/Aus-Schaltflächen
Gemischte Liste mit einzeiligen Elementen
Gemischte Liste mit mehrzeiligen Elementen
Kartenliste mit App-Karten
Kartenliste mit Titelkarten
Kartenliste mit benutzerdefinierten Karten
Textliste
Responsives und adaptives Verhalten
Alle Komponenten in der Compose-Bibliothek passen sich automatisch an die größere Bildschirmgröße an und werden breiter und höher. Scrollansichten, die responsives Design verwenden, passen sich in der Regel an eine Reihe von Bildschirmgrößen an. In einigen Sonderfällen können Sie jedoch einen Breakpoint verwenden, um Dimensionen zu überschreiben und Layouts zu erweitern. Dadurch können Sie die Funktionalität erweitern, die Übersichtlichkeit verbessern oder Inhalte besser auf dem Bildschirm darstellen.
So prüfen Sie, ob die responsiven Parameter richtig definiert sind:
- Wenden Sie die empfohlenen oberen, unteren und seitlichen Ränder an.
- Definieren Sie äußere Ränder in Prozentwerten, um zu verhindern, dass der scrollbare Container am Anfang und Ende abgeschnitten wird.
- Wenden Sie Ränder in festen DP-Werten zwischen UI-Elementen an.
- Erwägen Sie, bei 225 dp einen Breakpoint einzufügen, um zusätzliche Inhalte einzuführen oder vorhandene Inhalte auf größeren Bildschirmen besser lesbar zu machen.
