Używanie wariantu do projektowania stanu wizualnego

Wariant określa konkretny stan wizualny panelu, dzięki czemu jeden panel może mieć kilka różnych reprezentacji wizualnych, np. stan otwarty lub zamknięty. Aby skonfigurować wariant, użyj kodu XML. Użyj tagu podrzędnego w elemencie <Panel>.

Każdy tag <Variant> ma obowiązkowy atry1but id, który umożliwia jego jednoznaczną identyfikację. Tag może też odwoływać się do wariantu nadrzędnego, aby dziedziczyć właściwości. Ten mechanizm dziedziczenia umożliwia efektywne definiowanie wspólnych właściwości w wielu wariantach.

Atrybuty XML

Aby zdefiniować stany i przejścia, użyj tych atrybutów z <TaskPanel> lub <DecorPanel> tagiem.

Atrybut Stan Opis
id Obowiązkowe Unikalny identyfikator wariantu. Ten identyfikator służy do odwoływania się do wariantu w przejściach lub jako defaultVariant dla panelu.
parent Opcjonalnie Określa identyfikator innego wariantu, z którego bieżący wariant ma dziedziczyć właściwości. Jeśli właściwość nie jest wyraźnie zdefiniowana w bieżącym wariancie, przyjmuje wartość zdefiniowaną w jego wariancie nadrzędnym.

Elementy podrzędne XML

Użyj tych opcjonalnych elementów, aby określić cechy wizualne panelu, gdy jest on w stanie tego wariantu.

Element podrzędny Opis
<Visibility> Określa, czy panel jest widoczny czy ukryty, i zawiera atrybut isVisible (wartość logiczna).
<Alpha> Określa poziom przezroczystości panelu; zawiera alpha atrybut (liczba zmiennoprzecinkowa, od 0,0 do 1,0).
<Layer> Ustawia kolejność wyświetlania panelu względem innych paneli; zawiera atrybut layer (liczba całkowita). Wyższe wartości są rysowane na wierzchu.
<Focus> Określa, czy panel może uzyskać fokus podczas przejścia; zawiera atrybut onTransition (wartość logiczna).
<Bounds>

Określa prostokątny obszar (położenie i rozmiar) panelu na ekranie. Ten obszar jest kontrolowany przez atrybuty takie jak left, top, bottom, width i height.

  • left i right określają odległość od krawędzi ekranu.
  • top i bottom określają odległość od górnej krawędzi ekranu.
  • width i height określają szerokość i wysokość prostokąta i są potrzebne tylko wtedy, gdy nie określono atrybutów left i right (lub top i bottom).
  • dimensions można określić w pikselach, DP, procentach, lub odwołaniach do zasobów.

W przypadku używania procentów możesz użyć atrybutów przesunięcia, aby zastosować stałe korekty do granic opartych na procentach – leftOffset, topOffset, rightOffset, i bottomOffset.

Aby na przykład określić, że panel ma zajmować 100% wysokości ekranu, z wyłączeniem paska nawigacyjnego o stałej wysokości u dołu, ustaw wysokość na 100%, a bottomOffset na stałą wysokość paska nawigacyjnego. Spowoduje to przesunięcie dolnej krawędzi panelu w górę.
<SafeBounds> Określa bezpieczny obszar w granicach panelu, który nie jest nakładany przez wycięcia ani wcięcia wyświetlacza, aby podkreślić zgodność z aplikacjami rysowanymi w tym obszarze. Jego atrybuty są podobne do <Bounds>.
<Corner> Określa promień narożników panelu, umożliwiając zaokrąglone narożniki, i zawiera atrybut radius (liczba całkowita). Domyślnie narożnik jest ostry i nie trzeba go definiować.
<Insets>

Określa wcięcia (dopełnienie) panelu. Zawiera atrybuty left, top, right i bottom. Te wcięcia są zgłaszane aplikacjom uruchamianym w panelu.

  • left określa wcięcie po lewej stronie.
  • right określa wcięcie po prawej stronie. Na przykład, wcięcie po prawej stronie o wartości zero oznacza brak wcięć po prawej stronie.
  • top określa wcięcie u góry.
  • bottom określa wcięcie u dołu. Na przykład wcięcie po prawej stronie o wartości zero oznacza brak wcięć po prawej stronie.
<Background> Wprowadza opcjonalny panel dekoracyjny w tle, aby zapobiec efektom przezroczystości podczas przełączania aplikacji. Określa właściwości takie jak kolor i alfa dla tej warstwy dekoracyjnej. Właściwości warstwy dekoracyjnej, takie jak granice i warstwa, domyślnie przyjmują właściwości wariantu, jeśli nie zostały jeszcze ustawione.

Przykładowy kod

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

Interpolowanie właściwości wizualnych

Aby interpolować właściwości wizualne, użyj KeyFrameVariant. To specjalne rozszerzenie variant jest oparte na ciągłej wartości ułamkowej (od 0 do 1), która umożliwia płynne, dynamiczne przejścia sterowane ciągłym wejściem, np. operacją przeciągania, gdy stan panelu dynamicznie zmienia się wraz z ilością przeciągnięcia.

Atrybuty XML

KeyFrameVariant nie ma atrybutów. Tag <KeyFrameVariant> zawiera informacje potrzebne do zdefiniowania KeyFrameVariant.

Elementy podrzędne XML

KeyFrameVariant zawiera co najmniej 1 tag podrzędny <KeyFrame>. Każdy <KeyFrame> ma atrybut framePosition (0–100) i odwołuje się do atrybutu wariantu (identyfikatora innego wariantu). Te keyframes określają stan panelu w określonych punktach ciągłego przejścia.

Przykładowy kod

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Wstecz
Konfigurowanie panelu
Dalej
Konfigurowanie przejść