Mit einer Variante einen visuellen Status gestalten

Eine Variante definiert einen bestimmten visuellen Zustand für einen Bereich. So kann ein einzelner Bereich mehrere unterschiedliche visuelle Darstellungen haben, z. B. einen geöffneten oder geschlossenen Zustand. Verwenden Sie XML, um eine Variante zu konfigurieren. Verwenden Sie ein Unter-Tag innerhalb eines <Panel> Elements.

Jedes <Variant> Tag hat ein obligatorisches id Attribut, um es eindeutig zu identifizieren. Das Tag kann auch auf eine übergeordnete Variante verweisen, um Attribute zu übernehmen. Dieser Mechanismus ermöglicht die effiziente Definition gemeinsamer Attribute für mehrere Varianten.

XML-Attribute

Verwenden Sie diese Attribute mit dem <TaskPanel> oder <DecorPanel> Tag, um Zustände und Übergänge zu definieren.

Attribut Status Beschreibung
id Erforderlich Eindeutige ID der Variante. Diese ID wird verwendet, um in Übergängen auf die Variante zu verweisen oder sie als defaultVariant für einen Bereich festzulegen.
parent Optional Gibt die ID einer anderen Variante an, von der die aktuelle Variante Attribute übernehmen soll. Wenn ein Attribut in der aktuellen Variante nicht explizit definiert ist, wird der Wert der übergeordneten Variante verwendet.

Untergeordnete XML-Elemente

Verwenden Sie diese optionalen Elemente, um die visuellen Merkmale des Bereichs anzugeben, wenn er sich im Zustand dieser Variante befindet.

Untergeordnetes Element Beschreibung
<Visibility> Gibt an, ob der Bereich sichtbar oder ausgeblendet ist, und enthält ein isVisible Attribut (boolesch).
<Alpha> Gibt den Transparenzgrad des Bereichs an und enthält ein alpha Attribut (Gleitkommazahl, 0,0 bis 1,0).
<Layer> Legt die Z-Reihenfolge des Bereichs im Verhältnis zu anderen Bereichen fest und enthält ein layer Attribut (Ganzzahl). Höhere Werte werden oben gezeichnet.
<Focus> Gibt an, ob der Bereich während eines Übergangs den Fokus erhalten kann, und enthält ein onTransition Attribut (boolesch).
<Bounds>

Definiert den rechteckigen Bereich (Position und Größe) des Bereichs auf dem Bildschirm. Dieser Bereich wird durch Attribute wie „left“, „top“, „bottom“, „width“ und „height“ gesteuert.

  • left und right geben den Abstand vom linken Bildschirmrand an.
  • top und bottom geben den Abstand vom oberen Bildschirmrand an.
  • width und height geben die Breite und Höhe des Rechtecks an und sind nur erforderlich, wenn weder left und right noch top und bottom angegeben sind.
  • dimensions können in Pixeln, DP, Prozentwerten oder Ressourcenverweisen angegeben werden.

Wenn Sie Prozentwerte verwenden, können Sie Offset-Attribute verwenden, um feste Anpassungen an den prozentualen Grenzen vorzunehmen: leftOffset, topOffset, rightOffset, und bottomOffset.

Wenn ein Bereich beispielsweise 100% der Bildschirmhöhe einnehmen soll, aber eine Navigationsleiste mit fester Höhe unten ausgeschlossen werden soll, legen Sie die Höhe auf 100% und die bottomOffset auf die feste Höhe der Navigationsleiste fest. Dadurch wird der untere Rand des Bereichs nach oben verschoben.
<SafeBounds> Gibt einen sicheren Bereich innerhalb der Grenzen des Bereichs an, der nicht von Displayausschnitten oder -einsätzen überlappt wird, um die Kompatibilität für Apps zu unterstreichen, die darin gezeichnet werden. Die Attribute sind ähnlich wie bei <Bounds>.
<Corner> Definiert den Radius für die Ecken des Bereichs, sodass abgerundete Ecken möglich sind, und enthält ein Radiusattribut (Ganzzahl). Eine scharfe Ecke ist die Standardeinstellung und muss nicht definiert werden.
<Insets>

Gibt die Einsätze (Abstand) für den Bereich an. Es enthält die Attribute „left“, „top“, „right“ und „bottom“. Diese Einsätze werden an die Apps gemeldet, die im Bereich gestartet werden.

  • left gibt den Einsatz auf der linken Seite an.
  • right gibt den Einsatz auf der rechten Seite an. Ein Einsatz von null auf der rechten Seite bedeutet beispielsweise, dass es auf der rechten Seite keine Einsätze gibt.
  • top gibt den Einsatz auf der Oberseite an.
  • bottom gibt den Einsatz auf der Unterseite an. Ein Einsatz von null auf der rechten Seite bedeutet beispielsweise, dass es auf der rechten Seite keine Einsätze gibt.
<Background> Führt einen optionalen Hintergrunddekorbereich ein, um Durchsicht effekte beim Wechseln von Apps zu vermeiden. Es definiert Attribute wie Farbe und Alpha für diese Dekorebene. Die Attribute der Dekorebene, z. B. Grenzen und Ebene, werden standardmäßig auf die Attribute der Variante festgelegt, wenn sie noch nicht festgelegt wurden.

Beispielcode

<Variant id="@id/opened">
    <Visibility isVisible="true"/>
    <Bounds left="0dp"
            top="0dp"
            right="100%"
            bottom="100%"
            bottomOffset="100dp"/>
    <Alpha value="1.0"/>
    <Layer value="10"/>
    <Focus onTransition="true"/>
    <Corner radius="24dp"/>
    <Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
    <Background color="@color/app_background" alpha="0.9"/>
</Variant>

Visuelle Attribute interpolieren

Verwenden Sie KeyFrameVariant, um visuelle Attribute zu interpolieren. Diese spezielle Erweiterung von variant basiert auf einem kontinuierlichen Bruchteilswert (0 bis 1), der reibungslose, dynamische Übergänge ermöglicht, die durch kontinuierliche Eingaben gesteuert werden, z. B. eine Ziehbewegung, wenn sich der Zustand des Bereichs dynamisch mit der Ziehbewegung ändert.

XML-Attribute

KeyFrameVariant hat keine Attribute. Das Tag <KeyFrameVariant> enthält die Informationen, die zum Definieren einer KeyFrameVariant erforderlich sind.

Untergeordnete XML-Elemente

KeyFrameVariant enthält ein oder mehrere untergeordnete <KeyFrame>-Tags. Jedes <KeyFrame> hat ein framePosition Attribut (0–100) und verweist auf ein Varianten Attribut (die ID einer anderen Variante). Diese keyframes definieren den Zustand des Bereichs an bestimmten Punkten in einem kontinuierlichen Übergang.

Beispielcode

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Zurück
Bereich konfigurieren
Weiter
Übergänge konfigurieren