Utilizzare una variante per progettare uno stato visivo

Una variante definisce uno stato visivo specifico per un pannello, consentendo a un singolo pannello di avere più rappresentazioni visive distinte, ad esempio uno stato aperto o chiuso. Utilizza XML per configurare la variante. Utilizza un tag secondario all'interno di un elemento <Panel>.

Ogni tag <Variant> ha un attributo id obbligatorio per identificarlo in modo univoco. Il tag può anche fare riferimento a una variante principale per ereditare le proprietà. Questo meccanismo di ereditarietà consente di definire in modo efficiente le proprietà comuni in più varianti.

Attributi XML

Per definire stati e transizioni, utilizza questi attributi con il tag <TaskPanel> o <DecorPanel>.

Attributo Stato Descrizione
id Obbligatorio Identificatore univoco della variante. Questo ID viene utilizzato per fare riferimento alla variante nelle transizioni o come defaultVariant per un pannello.
parent Facoltativo Specifica l'ID di un'altra variante da cui la variante attuale deve ereditare le proprietà. Se una proprietà non è definita in modo esplicito nella variante corrente, viene utilizzato il valore definito nella variante principale.

Elementi secondari XML

Utilizza questi elementi facoltativi per specificare le caratteristiche visive del pannello quando si trova nello stato di questa variante.

Elemento secondario Descrizione
<Visibility> Specifica se il riquadro è visibile o nascosto e contiene un attributo isVisible (booleano).
<Alpha> Specifica il livello di trasparenza del pannello; contiene un attributo alpha (float, da 0.0 a 1.0).
<Layer> Imposta l'ordine Z del pannello rispetto ad altri pannelli; contiene un attributo layer (numero intero). I valori più alti vengono disegnati in primo piano.
<Focus> Specifica se il pannello può acquisire lo stato attivo durante una transizione; contiene un attributo onTransition (booleano).
<Bounds>

Definisce l'area rettangolare (posizione e dimensioni) del riquadro sullo schermo. Questa area è controllata da attributi come left, top, bottom, width e height.

  • left e right specificano la distanza dal bordo sinistro dello schermo.
  • top e bottom specificano la distanza dal bordo superiore dello schermo.
  • width e height specificano la larghezza e l'altezza del rettangolo e sono necessari solo quando non sono specificati left e right (o top e bottom).
  • dimensions può essere specificato in pixel, DP, percentuali o riferimenti alle risorse.

Quando utilizzi le percentuali, puoi impiegare gli attributi di offset per applicare aggiustamenti fissi ai limiti basati sulla percentuale: leftOffset, topOffset, rightOffset e bottomOffset.

Ad esempio, per indicare che un riquadro deve occupare il 100% dell'altezza dello schermo escludendo una barra di navigazione ad altezza fissa nella parte inferiore, imposta l'altezza su 100% e bottomOffset sull'altezza fissa della barra di navigazione. In questo modo, il bordo inferiore del riquadro viene tirato verso l'alto.
<SafeBounds> Specifica un'area sicura all'interno dei limiti del riquadro che non viene sovrapposta da intagli o rientri del display, per sottolineare la compatibilità delle app disegnate al suo interno. I suoi attributi sono simili a <Bounds>.
<Corner> Definisce il raggio degli angoli del pannello, consentendo angoli arrotondati e contiene un attributo radius (numero intero). Un angolo acuto è il valore predefinito e non deve essere definito.
<Insets>

Specifica i margini interni (spaziatura interna) per il pannello. Contiene gli attributi left, top, right e bottom. Questi riquadri vengono segnalati alle app avviate all'interno del pannello.

  • left specifica il rientro sul lato sinistro.
  • right specifica il rientro sul lato destro. Ad esempio, un rientro a destra pari a zero indica che non sono presenti rientri sul lato destro.
  • top specifica il rientro sul lato superiore.
  • bottom specifica il rientro sul lato inferiore. Ad esempio, un rientro a destra pari a zero indica che non sono presenti rientri sul lato destro.
<Background> Introduce un pannello decorativo di sfondo opzionale per evitare effetti di trasparenza quando si passa da un'app all'altra. Definisce proprietà come colore e alpha per questo livello di decorazione. Le proprietà del livello di decorazione, come i limiti e il livello, vengono impostate per impostazione predefinita sulle proprietà della variante se non sono già impostate.

Codice di esempio

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

Interpolare le proprietà visive

Utilizza KeyFrameVariant per interpolare le proprietà visive. Questa estensione specializzata di variant si basa su un valore frazionario continuo (da 0 a 1) che consente transizioni fluide e dinamiche basate su un input continuo, come un'operazione di trascinamento quando lo stato del pannello cambia dinamicamente con la quantità di trascinamento.

Attributi XML

KeyFrameVariant non ha attributi. Il tag <KeyFrameVariant> contiene le informazioni necessarie per definire un KeyFrameVariant.

Elementi secondari XML

KeyFrameVariant contiene uno o più tag secondari <KeyFrame>. Ogni <KeyFrame> ha un attributo framePosition (0-100) e si riferisce a un attributo della variante (l'ID di un'altra variante). Questi keyframes definiscono lo stato del pannello in punti specifici di una transizione continua.

Codice di esempio

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Indietro
Configurare un pannello
Avanti
Configurare le transizioni