Gängige Layouts für scrollbare Apps

Zu den Layouts der scrollbaren App-Ansicht gehören Listen (TransformingLazyColumn) und Dialogfelder. Diese Layouts machen den Großteil der App-Bildschirme aus und bestehen aus einer Reihe von Komponenten, die an größere Bildschirmgrößen angepasst werden müssen. Prüfen Sie, ob die Komponenten responsiv sind, d. h., ob sie die verfügbare Breite ausfüllen und die TransformingLazyColumn-Anpassungen übernehmen, wenn mehr von der Bildschirmhöhe verfügbar ist. Diese Layouts sind bereits responsiv. Wir haben einige weitere Empfehlungen, wie Sie das zusätzliche Anzeigeninventar optimal nutzen können.

Responsive und optimierte Designs erstellen

Damit sich Ihre Designlayouts an größere Bildschirmgrößen anpassen können, haben wir das Verhalten unserer Layouts und Komponenten aktualisiert, um ein integriertes responsives Verhalten zu ermöglichen, einschließlich prozentbasierter Ränder und Abstände. Um dies zu beheben, haben wir die Layouts und Komponenten unserer Android-UI-Bibliothek mit einem integrierten responsiven Verhalten aktualisiert, einschließlich prozentbasierter Ränder und Abstände. Wenn Sie unsere Compose-Komponenten verwenden, können Sie diese Responsivität automatisch übernehmen.

Testen Sie individuelle Bildschirmdesigns gründlich auf verschiedenen Bildschirmgrößen, damit Komponenten und Elemente reibungslos angepasst werden und Inhalte nicht abgeschnitten werden. Unsere prozentualen Ränder tragen dazu bei, dass Abstände effektiv skaliert werden. Wir empfehlen, einen Wendepunkt bei 225 dp zu verwenden, um auf größeren Smartwatch-Displays zusätzliche Informationen und erweiterte Funktionen einzublenden.

Prüfen, ob Komponenten die verfügbare Breite ausfüllen

Alle Komponenten sind responsiv, d. h., sie füllen die verfügbare Breite und Höhe aus. Achten Sie darauf, dass die erforderlichen Ränder vorhanden sind, damit Inhalte nicht vom abgerundeten Bildschirm abgeschnitten werden.

Zusätzliche Textzeichen anzeigen

Die meisten Komponenten haben Textfelder, die die verfügbare Breite ausfüllen. Das bedeutet, dass die Zeichenanzahl automatisch zunimmt, wenn die Bildschirmbreite größer wird.

Adaptive und differenzierte Designs erstellen

Da bei Scroll-Layouts automatisch mehr von dem angezeigt wird, was zuvor unter dem Display verborgen war, müssen Sie nicht viel tun, um einen Mehrwert zu schaffen. Jede Komponente füllt die verfügbare Breite aus. In einigen Fällen kann eine Komponente zusätzliche Textzeilen erhalten (z. B. Karten) oder Komponenten werden gedehnt, um die verfügbare Breite zu füllen (z. B. Symbolschaltflächen).

Um den zusätzlichen Platz auf größeren Bildschirmen optimal zu nutzen, fügen Sie bei 225 dp einen Größengrenzwert hinzu. Mit diesem Wendepunkt können Sie zusätzliche Inhalte anzeigen, mehr Schaltflächen oder Daten einfügen oder das Layout so ändern, dass es besser zum größeren Bildschirm passt. Das erfordert für jeden Bruchpunkt ein anderes Design. Das Design für größere Bildschirme (225 px oder mehr) kann die folgenden zusätzlichen Elemente enthalten:

Größe der vorhandenen Komponenten vergrößern oder ihren Status ändern

Dies kann dazu dienen, mehr Details zu zeigen oder die Inhalte auf einen Blick verständlicher zu machen.

Optimierte und differenzierte Layouts

Das Layout kann sich nach dem 225-dp-Bruchpunkt geringfügig ändern, damit die Inhalte im Above-the-Fold-Bereich in der Standardansicht optimiert werden. Der gesamte Inhalt im Below-the-Fold-Bereich sollte jedoch unabhängig von der Bildschirmgröße verfügbar sein.

Responsives und adaptives Verhalten

Alle Komponenten in der Compose-Bibliothek werden automatisch an die größere Bildschirmgröße angepasst und erhalten mehr Breite und Höhe. Scrollansichten, die auf responsiven Designpraktiken basieren, passen sich in der Regel an eine Reihe von Bildschirmgrößen an. In einigen Sonderfällen können Sie jedoch mithilfe eines Wendepunkts Dimensionen überschreiben und Layouts ergänzen, um die Funktionalität zu erweitern, die Übersichtlichkeit zu verbessern oder Inhalte besser auf dem Bildschirm darzustellen.

Alle Ober-, Unter- und Seitenränder sollten in Prozent angegeben werden, um Ausschnitte zu vermeiden und eine proportionale Skalierung der Elemente zu ermöglichen. Die PositionIndicator wird angezeigt, wenn der Nutzer scrollt, und passt sich automatisch an den Bildschirmrand an, unabhängig von dessen Größe.

Checkliste

  • Wenden Sie die empfohlenen Ränder oben, unten und an den Seiten an.
  • Legen Sie die äußeren Ränder in Prozentwerten fest, um ein Abschneiden am Anfang und Ende des scrollbaren Containers zu verhindern.
  • Wenden Sie Ränder in festen DP-Werten zwischen UI-Elementen an.
  • Sie können einen Wendepunkt bei 225 dp festlegen, um zusätzliche Inhalte einzufügen oder vorhandene Inhalte auf größeren Bildschirmen besser sichtbar zu machen.

Differenzierte Oberflächen erstellen

Scrollansichten sind sehr anpassbar und Sie können beliebige Komponenten in beliebiger Reihenfolge hinzufügen. Die oberen und unteren Ränder können sich je nach den Komponenten oben und unten ändern. So wird verhindert, dass Inhalte durch die zunehmende Krümmung des Displays abgeschnitten werden.