Mit einer Variante einen visuellen Status gestalten

Eine Variante definiert einen bestimmten visuellen Status für ein Feld. So kann ein einzelnes Feld mehrere unterschiedliche visuelle Darstellungen haben, z. B. den Status geöffnet oder geschlossen. Verwenden Sie XML, um eine Variante zu konfigurieren. Verwenden Sie ein untergeordnetes 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 Eigenschaften zu übernehmen. Dieser Mechanismus ermöglicht die effiziente Definition gemeinsamer Eigenschaften für mehrere Varianten.

XML-Attribute

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

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

Untergeordnete XML-Elemente

Mit diesen optionalen Elementen können Sie die visuellen Merkmale des Bereichs im Status dieser Variante angeben.

Untergeordnetes Element Beschreibung
<Visibility> Gibt an, ob das Steuerfeld sichtbar oder ausgeblendet ist, und enthält ein isVisible-Attribut (boolescher Wert).
<Alpha> Gibt die Transparenz des Bereichs an. Enthält das Attribut alpha (Gleitkommazahl, 0,0 bis 1,0).
<Layer> Legt die Z-Reihenfolge des Bereichs relativ zu anderen Bereichen fest. Enthält das Attribut layer (Ganzzahl). Höhere Werte werden oben gezeichnet.
<Focus> Gibt an, ob das Steuerfeld während eines Übergangs den Fokus erhalten kann. Enthält ein boolesches Attribut onTransition.
<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 Displayrand an.
  • width und height geben die Breite und Höhe des Rechtecks an und sind nur erforderlich, wenn weder left noch right (oder top und bottom) angegeben sind.
  • dimensions kann in Pixeln, DP, Prozentwerten oder Ressourcenreferenzen angegeben werden.

Wenn Sie Prozentsätze verwenden, können Sie mit den Offsetattributen leftOffset, topOffset, rightOffset und bottomOffset feste Anpassungen an den prozentualen Grenzen vornehmen.

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

Gibt die Einzüge (Abstand) für den Bereich an. Sie enthält die Attribute „left“, „top“, „right“ und „bottom“. Diese Insets werden an die Apps gemeldet, die über das Steuerfeld gestartet wurden.

  • left gibt den Einzug auf der linken Seite an.
  • right gibt den Einzug auf der rechten Seite an. Ein Beispiel: Ein rechter Inset von 0 bedeutet, dass es keine Insets auf der rechten Seite gibt.
  • top gibt den Einzug auf der Oberseite an.
  • bottom gibt den Einzug an der Unterseite an. Ein Beispiel: Ein rechter Inset von null bedeutet, dass es keine Insets auf der rechten Seite gibt.
<Background> Es wird ein optionaler Hintergrunddekorbereich eingeführt, um Durchsichtseffekte beim Wechseln von Apps zu verhindern. Hier werden Eigenschaften wie Farbe und Alpha für diese Dekorebene definiert. Die Eigenschaften der Dekorschicht, z. B. Grenzen und Ebene, werden standardmäßig auf die Eigenschaften der Variante festgelegt, sofern sie nicht bereits festgelegt sind.

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 Eigenschaften interpolieren

Verwenden Sie KeyFrameVariant, um visuelle Attribute zu interpolieren. Diese spezielle Erweiterung von variant basiert auf einem kontinuierlichen Bruchteilwert (0 bis 1), der reibungslose, dynamische Übergänge ermöglicht, die durch kontinuierliche Eingaben wie einen Ziehvorgang gesteuert werden, wenn sich der Status des Bereichs dynamisch mit dem Ziehvorgang ändert.

XML-Attribute

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

Untergeordnete XML-Elemente

KeyFrameVariant enthält ein oder mehrere untergeordnete <KeyFrame>-Tags. Jeder <KeyFrame> hat ein framePosition-Attribut (0–100) und verweist auf ein Variant-Attribut (die ID einer anderen Variante). Diese keyframes definieren den Status 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