Utilizzare una variante per progettare uno stato visivo

Una variante definisce uno stato visivo specifico per un riquadro, consentendo a un singolo riquadro 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 <Panel> elemento.

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 <TaskPanel> o <DecorPanel> tag.

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 riquadro.
parent Facoltativo Specifica l'ID di un'altra variante da cui la variante corrente deve ereditare le proprietà. Se una proprietà non è definita esplicitamente nella variante corrente, viene utilizzato il valore definito nella variante principale.

Elementi secondari XML

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

Elemento secondario Descrizione
<Visibility> Specifica se il riquadro è visibile o nascosto e contiene un isVisible attributo (booleano).
<Alpha> Specifica il livello di trasparenza del riquadro; contiene un alpha attributo (float, da 0,0 a 1,0).
<Layer> Imposta l'ordine Z del riquadro rispetto ad altri riquadri; contiene un layer attributo (integer). I valori più alti vengono disegnati in primo piano.
<Focus> Specifica se il riquadro 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 sia left che right (o top e bottom).
  • dimensions possono essere specificate in pixel, DP, percentuali, o riferimenti alle risorse.

Quando utilizzi le percentuali, puoi utilizzare 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 occupa il 100% dell'altezza dello schermo escludendo una barra di navigazione ad altezza fissa nella parte inferiore, imposta l'altezza al 100% e bottomOffset all'altezza fissa della barra di navigazione. In questo modo, il bordo inferiore del riquadro viene spostato verso l'alto.
<SafeBounds> Specifica un'area sicura all'interno dei limiti del riquadro che non viene sovrapposta da ritagli o inserti 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 riquadro, consentendo di arrotondarli e contiene un attributo radius (integer). Un angolo acuto è il valore predefinito e non deve essere definito.
<Insets>

Specifica gli inserti (spaziatura interna) per il riquadro. Contiene gli attributi left, top, right e bottom. Questi inserti vengono segnalati alle app avviate all'interno del riquadro.

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

Codice campione

<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 input continui, ad esempio un'operazione di trascinamento quando lo stato del riquadro cambia dinamicamente in base alla 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 framePosition attributo (da 0 a 100) e fa riferimento a un variant attributo (l'ID di un'altra variante). Questi keyframes definiscono lo stato del riquadro in punti specifici di una transizione continua.

Codice campione

<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