Responsive Seiten mit Containern erstellen

Da Apps auf unterschiedlichen Geräten ausgeführt werden, ist ein responsives Design unerlässlich. Nur so kann sich Ihre App nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen. Power Apps-Container spielen eine zentrale Rolle beim Erstellen responsiver Layouts und stellen eine einheitliche Benutzererfahrung auf verschiedenen Plattformen sicher. In dieser Lerneinheit befassen wir uns damit, wie reaktionsschnelle Anwendungen erstellt werden.

Container im responsiven Design verstehen

Container gehören zu den Hauptelementen beim Erstellen reaktionsschneller Anwendungen. Ein Container ist ein Layout-Steuerelement, mit dem andere Steuerelemente (z. B. Schaltflächen, Beschriftungen und Texteingaben) strukturiert gruppiert und organisiert werden. Sie stellen sicher, dass sich das Layout Ihrer App dynamisch an verschiedene Bildschirmgrößen und ‑ausrichtungen anpasst und so eine konsistente Benutzererfahrung auf allen Geräten bietet. In Power Apps können Container für Folgendes konfiguriert werden:

• Bei Änderung der Bildschirmgröße automatisch strecken oder die Größe anpassen.
• Behalten Sie eine konsistente Positionierung im Verhältnis zu anderen Elementen bei.
• Untergeordnete Komponenten ohne manuelle Anpassungen vertikal oder horizontal ausrichten.

Wenn Sie z. B. eine App für Mobiltelefone und Tablets entwerfen, können Container sicherstellen, dass Elemente wie Schaltflächen, Texteingaben und Kataloge unabhängig von den Bildschirmabmessungen des Geräts korrekt ausgerichtet und proportioniert bleiben.

Arten von Layout-Containern in Power Apps

Power Apps bietet drei Haupttypen von Layout-Containern, die jeweils für unterschiedliche Designanforderungen geeignet sind:

• Container mit automatischem Layout:
  Container mit automatischem Layout vereinfachen das reaktionsschnelle Design, indem sie untergeordnete Komponenten automatisch positionieren und in der Größe anpassen. Anstatt die X‑ und Y-Koordinaten (Position und Ebene) für jedes Element manuell festzulegen, können Sie Ausrichtungsregeln festlegen (z. B. vertikale oder horizontale Stapelung). Der Container übernimmt dann den Rest. Diese Funktion ist nützlich, um Layouts zu erstellen, die sich fließend an Änderungen der Bildschirmgröße anpassen müssen.
  Beispiel: Sie können einen Auto-Layout-Container verwenden, um eine Reihe von Formularfeldern vertikal zu stapeln und sicherzustellen, dass sie bei der Anzeige auf kleineren Bildschirmen gleichmäßig verteilt und ausgerichtet bleiben.

• Container mit manuellem Layout:
  Container mit manuellem Layout ermöglichen Ihnen eine präzise Kontrolle über die Positionierung untergeordneter Elemente. Während dieser Ansatz die manuelle Konfiguration der X‑ und Y-Koordinaten erfordert, ist er ideal für Szenarien, in denen eine genaue Platzierung entscheidend ist, z. B. benutzerdefinierte Dashboards oder hochspezifische UI-Designs.
  Beispiel: Ein Container mit manuellem Layout kann verwendet werden, um Symbole und Beschriftungen in einer festen Anordnung für eine Navigationsleiste zu positionieren.

• Container mit flexibler Höhe: Flexible Höhencontainer sind so entworfen, dass sie ihre Höhe dynamisch an den Inhalt anpassen. Dies ist nützlich, wenn Sie mit Komponenten wie Katalogen oder Formularen arbeiten, bei denen die Menge des Inhalts variieren kann. Diese Container stellen sicher, dass das Layout auch bei Änderungen der Inhaltsgröße sauber und reaktionsschnell bleibt.
  Zum Beispiel: Ein Container mit flexibler Höhe könnte verwendet werden, um eine Liste von Kommentaren in einem Feedback-Abschnitt anzuzeigen, die je nach Anzahl der Kommentare automatisch erweitert oder verkleinert wird.

Ein dynamisches Layout mit Containern in Power Apps erstellen

Durch die Erstellung eines responsiven Layouts in Power Apps wird sichergestellt, dass sich Ihre App nahtlos an verschiedene Bildschirmgrößen und ‑ausrichtungen anpasst und so eine einheitliche Benutzererfahrung auf allen Geräten bietet. Durch den effektiven Einsatz von Containern können Sie Layouts erstellen, die Komponenten nach Bedarf automatisch anpassen und neu organisieren.

Gehen Sie wie folgt vor, um ein responsives Layout einzurichten:

1. „Skalierung anpassen“ deaktivieren

2. Layout-Container hinzufügen

3. Container-Eigenschaften konfigurieren

4. Dem Container Komponenten hinzufügen

5. Gruppenbezogene Komponenten

• „Skalierung anpassen“ deaktivieren: Der erste Schritt bei der Erstellung eines dynamischen Designs ist die Deaktivierung der Einstellung „Skalierung anpassen“. Dieser Schritt ermöglicht Ihrer App, ihr Layout dynamisch anzupassen, anstatt die gesamte Benutzeroberfläche an den Bildschirm anzupassen. Sie können diese Funktion deaktivieren, indem Sie oben rechts in Ihrer App zu Einstellungen wechseln. Deaktivieren Sie im Abschnitt Anzeige die Option Skalierung anpassen aus.

  Durch das Deaktivieren von „Skalierung anpassen“ wird sichergestellt, dass die Größe der App-Komponenten je nach Bildschirmgröße angepasst und neu positioniert werden, anstatt die gesamte App zu verkleinern oder zu strecken. Beispielsweise wird die Größe einer Schaltfläche proportional geändert, anstatt zu klein zu werden, um auf einem mobilen Gerät darauf zu tippen.

• Layout-Container hinzufügen:
  Fügen Sie Ihrer App als Nächstes einen Container hinzu, um Ihre Komponenten zu organisieren und zu verwalten. Container sind für die Strukturierung Ihres Layouts und die Sicherstellung der Reaktionsfähigkeit unerlässlich.

  • Wählen Sie im Bereich auf der linken Seite Einfügen>Layout aus. Wählen Sie dann den für Ihre Anforderungen geeigneten Containertyp: Vertikal, Horizontal oder Flexible Höhe aus.
    Beim Entwerfen eines Formulars kann ein vertikaler Container Eingabefelder und Schaltflächen ordentlich stapeln und sicherstellen, dass sie bei jeder Bildschirmgröße richtig ausgerichtet und verteilt bleiben.

• Container-Eigenschaften konfigurieren:
  Nachdem der Container hinzugefügt wurde, konfigurieren Sie seine Eigenschaften, um das Verhalten und die Interaktion mit den untergeordneten Komponenten zu steuern.

  • Richten Sie die Eigenschaft Ausrichtung ein, um zu definieren, wie untergeordnete Komponenten positioniert werden (z. B. zentriert, links oder rechts).
  • Passen Sie die Eigenschaften Auffüllen und Abstand an, um den Abstand zwischen Komponenten zu kontrollieren.
  • Aktivieren Sie die Optionen Flexible Breite oder Flexible Höhe, damit die Größe des Containers dynamisch angepasst werden kann.

  Ein horizontaler Container mit Navigationsschaltflächen kann so konfiguriert werden, dass die Schaltflächen gleichmäßig über den Bildschirm verteilt werden, sodass sie sowohl auf Desktop‑ als auch auf Mobilgeräten zugänglich und visuell ausgewogen bleiben.

• Komponenten dem Container hinzufügen: Sobald Ihr Container eingerichtet ist, müssen Sie ihn mit den Komponenten ausfüllen, aus denen die Benutzeroberfläche Ihrer App besteht. Container sind so konzipiert, dass sie die Ausrichtung, den Abstand und die Reaktionsfähigkeit ihrer untergeordneten Elemente automatisch verwalten. Dadurch wird es einfacher, ein sauberes und organisiertes Layout zu erstellen.

  • Drag & Drop-Komponenten: Fügen Sie UI-Elemente wie Schaltflächen, Texteingaben, Kataloge, Formulare, Symbole oder Schieberegler in den Container ein. Ziehen Sie diese Komponenten vom Menü Einfügen in den Container.

  • Automatische Ausrichtung nutzen: Der Container richtet die Komponenten automatisch aus und verteilt sie auf Grundlage der Konfiguration (z. B. vertikale Stapelung oder horizontale Ausrichtung). Durch diese automatische Ausrichtung entfällt die Notwendigkeit manueller Anpassungen an X‑ und Y-Koordinaten.

  Wenn Sie einen Anmeldebildschirm erstellen, können Sie eine Texteingabe für den Benutzernamen, eine weitere für das Kennwort und eine Schaltfläche für die Übermittlung in einen vertikalen Container hinzufügen. Der Container stellt sicher, dass diese Elemente unabhängig von der Bildschirmgröße gleichmäßig verteilt und ausgerichtet sind.

  • Zugehörige Komponenten gruppieren: Verwenden Sie mehrere Container, um verschiedene Abschnitte Ihrer App zu organisieren. Sie können beispielsweise einen Container für eine Kopfzeile mit Navigationsschaltflächen und einen anderen für den Hauptinhaltsbereich wie einen Katalog oder ein Formular verwenden.

Durch das Hinzufügen von Komponenten zu Containern vereinfachen Sie die Verwaltung des App-Layouts und stellen gleichzeitig sicher, dass das Design auf allen Geräten reaktionsschnell und visuell konsistent bleibt.