Używanie wariantu do projektowania stanu wizualnego

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

Każdy tag <Variant> ma obowiązkowy atrybut id, który jednoznacznie go identyfikuje. Tag może też odwoływać się do wersji nadrzędnej, 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 tagiem <TaskPanel> lub <DecorPanel>.

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 w przypadku panelu.
parent Opcjonalny Określa identyfikator innego wariantu, z którego bieżący wariant powinien dziedziczyć właściwości. Jeśli właściwość nie jest wyraźnie zdefiniowana w bieżącym wariancie, przyjmuje wartość zdefiniowaną w 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 atrybut alpha (liczba zmiennoprzecinkowa od 0,0 do 1,0).
<Layer> Określa kolejność nakładania panelu względem innych paneli; zawiera atrybut layer (liczba całkowita). Wyższe wartości są rysowane na górze.
<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 lewej 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 wartości left i right (lub top i bottom).
  • dimensions można określić w pikselach, DP, procentach lub odwołaniach do zasobów.

W przypadku wartości procentowych możesz użyć atrybutów przesunięcia, aby zastosować stałe korekty do granic opartych na wartościach procentowych: leftOffset, topOffset, rightOffset i bottomOffset.

Jeśli na przykład chcesz, aby panel zajmował 100% wysokości ekranu, ale z wyłączeniem paska nawigacyjnego o stałej wysokości u dołu, ustaw wysokość na 100% i wartość 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 zasłaniany przez wycięcia ani wcięcia wyświetlacza, aby podkreślić zgodność z aplikacjami rysowanymi w tym obszarze. Jego atrybuty są podobne do atrybutów <Bounds>.
<Corner> Określa promień narożników panelu, umożliwiając zaokrąglenie narożników, i zawiera atrybut radius (liczba całkowita). Domyślnie jest to ostry róg, więc nie trzeba go definiować.
<Insets>

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

  • left określa wcięcie po lewej stronie.
  • right określa wcięcie po prawej stronie. Na przykład wartość 0 w przypadku prawego wcięcia oznacza brak wcięć po prawej stronie.
  • top określa wcięcie u góry.
  • bottom określa wcięcie na dole. Na przykład wartość 0 w przypadku prawego wcięcia oznacza, że po prawej stronie nie ma wcięć.
<Background> Wprowadzono opcjonalny panel dekoracyjny w tle, aby zapobiec efektom przezroczystości podczas przełączania aplikacji. Określa właściwości, takie jak kolor i wartość alfa tej warstwy dekoracyjnej. Właściwości warstwy dekoracyjnej, takie jak granice i warstwa, są domyślnie ustawiane na właściwości wariantu, jeśli nie zostały wcześniej określone.

Kod demonstracyjny

<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

Użyj KeyFrameVariant, aby interpolować właściwości wizualne. To specjalne rozszerzenie variant opiera się na ciągłej wartości ułamkowej (od 0 do 1), która umożliwia płynne, dynamiczne przejścia wywoływane przez ciągłe dane wejściowe, takie jak operacja przeciągania, gdy stan panelu dynamicznie zmienia się wraz z wielkoś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 z nich ma atrybut framePosition (0–100) i odnosi się do atrybutu wariantu (identyfikatora innego wariantu).<KeyFrame> Te keyframes określają stan panelu w określonych punktach ciągłego przejścia.

Kod Samole

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