Creare ombre e visualizzazioni dei clip

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare i temi in Compose.

Material Design introduce l'elevazione degli elementi UI. Elevation aiuta gli utenti a comprendere l'importanza relativa di ogni elemento e a concentrare la loro attenzione sull'attività corrente.

L'elevazione di una vista, rappresentata dalla proprietà Z, determina l'aspetto visivo della sua ombra. Le visualizzazioni con valori Z più elevati proiettano ombre più grandi e più morbide e nascondono le visualizzazioni con valori Z più bassi. Tuttavia, il valore Z di una vista non influisce sulle dimensioni della vista.

Un'immagine che mostra come un'ombra produce un'ombra.
Figura 1. Altitudine sull'asse Z e ombra risultante.

Le ombre vengono disegnate dall'elemento principale della vista dall'alto. Sono soggetti a ritaglio standard della visualizzazione e sono tagliati dall'elemento padre per impostazione predefinita.

La funzione elevazione è utile anche per creare animazioni in cui i widget si elevano temporaneamente sopra il piano di visualizzazione durante l'esecuzione di azioni.

Per ulteriori informazioni, consulta la pagina relativa all'altitudine in Material Design.

Assegnare l'elevazione alle viste

Il valore Z di una vista ha due componenti:

  • Altitudine: il componente statico
  • Traduzione: il componente dinamico utilizzato per le animazioni.

Z = elevation + translationZ

I valori Z sono misurati in dp (pixel indipendenti dalla densità).

Un'immagine che mostra ombre diverse per elevazioni differenti in dp
Figura 2. Ombre diverse per elevazioni differenti in dp.

Per impostare l'elevazione predefinita (a riposo) di una vista, utilizza l'attributo android:elevation nel layout XML. Per impostare l'elevazione di una vista nel codice di un'attività, utilizza il metodo View.setElevation().

Per impostare la traduzione di una vista, usa il metodo View.setTranslationZ().

I metodi ViewPropertyAnimator.z() e ViewPropertyAnimator.translationZ() consentono di animare l'elevazione delle viste. Per ulteriori informazioni, consulta il riferimento API per ViewPropertyAnimator e la guida per gli sviluppatori relativa all'animazione delle proprietà.

Puoi anche utilizzare un StateListAnimator per specificare queste animazioni in modo dichiarativo. Questa funzionalità è particolarmente utile nei casi in cui le modifiche di stato attivano animazioni, ad esempio quando l'utente tocca un pulsante. Per ulteriori informazioni, consulta Animare le modifiche dello stato della visualizzazione utilizzando StateListAnimator.

Personalizza la visualizzazione di ombre e contorni

I limiti dello sfondo di una visualizzazione disegnata determinano la forma predefinita dell'ombra. I contorni rappresentano la forma esterna di un oggetto grafico e definiscono l'area dell'ondata per il feedback al tocco.

Considera la seguente visualizzazione, definita con uno sfondo disegnabile:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Lo sfondo disegnabile è definito come un rettangolo con angoli arrotondati:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

La vista proietta un'ombra con angoli arrotondati, poiché lo sfondo disegnato definisce il contorno della vista. La creazione di un contorno personalizzato sostituisce la forma predefinita dell'ombra della vista.

Per definire una struttura personalizzata per una vista nel codice:

  1. Estendi il corso ViewOutlineProvider.
  2. Esegui l'override del metodo getOutline().
  3. Assegna il nuovo fornitore di strutture alla visualizzazione con il metodo View.setOutlineProvider().

Puoi creare contorni ovali e rettangolari con angoli arrotondati utilizzando i metodi della classe Outline. Il fornitore di strutture predefinito per le visualizzazioni ricava i contorni dallo sfondo della vista. Per impedire a una vista di proiettare un'ombra, imposta il relativo fornitore di contorni su null.

Visualizzazioni dai clip

Le visualizzazioni dei clip ti consentono di modificare la forma di una visualizzazione. Puoi tagliare le visualizzazioni per renderle coerenti con altri elementi di design o per modificare la forma di una visualizzazione in risposta all'input dell'utente. Puoi ritagliare una visualizzazione in base all'area del contorno utilizzando il metodo View.setClipToOutline(). Solo i contorni che sono rettangoli, cerchi e rettangoli rotondi supportano il ritaglio, come stabilito dal metodo Outline.canClip().

Per ritagliare una vista in base alla forma di un elemento disegnabile, impostalo come sfondo della vista, come mostrato nell'esempio precedente, e chiama il metodo View.setClipToOutline().

La visualizzazione di ritaglio è un'operazione costosa, quindi non animare la forma che utilizzi per ritagliare una visualizzazione. Per ottenere questo effetto, utilizza l'animazione di rivelazione.