Indicatore di avanzamento dei contenuti multimediali

Il componente indicatore di avanzamento dei contenuti multimediali è esclusivo delle app multimediali .

L'indicatore di avanzamento è una rappresentazione visiva della durata e del tempo di riproduzione trascorso per una sorgente multimediale. L'indicatore di avanzamento appare nelle app multimediali durante la riproduzione.

Anatomia

L'indicatore di avanzamento del supporto è costituito da una traccia inattiva (visualizzata in grigio) che rappresenta la durata della sorgente multimediale e da una traccia attiva (visualizzata con un colore di accento) che si sovrappone alla traccia inattiva per indicare il tempo di riproduzione trascorso.

Anatomia dell'indicatore di avanzamento dei media
1. Traccia attiva
2. Traccia inattiva

L'indicatore di avanzamento del supporto può essere lineare o circolare .

Indicatore di avanzamento dei media lineari

L'indicatore di avanzamento lineare mostra la durata e il tempo trascorso su un asse orizzontale. La parte visibile della traccia è centrata in un'area touch-target di 76 dp. Toccando o trascinando il tempo trascorso, l'utente può spostarsi in diverse posizioni all'interno della sorgente multimediale. L'indicatore di avanzamento lineare è progettato per schermi di 800 dp o più alti.
Anatomia dell'indicatore di progresso circolare

L'indicatore di avanzamento circolare mostra la durata e il tempo trascorso come un cerchio. Non è possibile toccare o trascinare il tempo trascorso per spostarsi in posizioni diverse. L'indicatore di avanzamento circolare dei contenuti multimediali è pensato per schermi con un'altezza inferiore a 800 dp e per l'uso quando i controlli di riproduzione dei contenuti multimediali sono ridotti a icona.

Stati dell'indicatore di avanzamento dei media

Durante la riproduzione, l'indicatore di avanzamento si trova in uno dei quattro stati:

  • Riproduzione: il contenuto multimediale è in riproduzione e la traccia attiva avanza su quella inattiva per indicare il tempo trascorso.
  • In pausa: l'utente ha messo in pausa la riproduzione. La traccia attiva è ferma nel punto in cui la riproduzione è in pausa.
  • Buffering: l'app multimediale sta caricando il contenuto da riprodurre. L'indicatore mostra una linea bianca che avanza ripetutamente sulla traccia inattiva durante il caricamento del contenuto.
  • Errore: il contenuto multimediale non può essere riprodotto. Non c'è alcuna traccia attiva e la traccia inattiva è disabilitata.

    La traccia attiva avanza sulla traccia inattiva mentre il contenuto multimediale viene riprodotto
    Stato di riproduzione: la traccia attiva avanza sulla traccia inattiva durante la riproduzione del contenuto multimediale.
    La traccia attiva è ferma mentre la riproduzione multimediale è in pausa
    Stato di pausa: la traccia attiva è ferma mentre la riproduzione multimediale è in pausa.
    Una linea bianca avanza ripetutamente attraverso la traccia inattiva mentre il contenuto viene caricato
    Stato di buffering: una linea bianca avanza ripetutamente sulla traccia inattiva durante il caricamento del contenuto.
    La traccia inattiva viene disabilitata quando si verifica un errore di riproduzione media
    Stato di errore: quando si verifica un errore multimediale, non viene visualizzata alcuna traccia attiva e la traccia inattiva viene disabilitata.

Specifiche

Indicatore di avanzamento dei media lineari

Indicatore di avanzamento dei media linea rossa

Indicatore di avanzamento dei supporti circolari

Indicatore di avanzamento dei media circolari in rosso

Personalizzazione

Durante la riproduzione multimediale, la traccia attiva dell'indicatore di avanzamento multimediale viene visualizzata utilizzando un colore di accento. Il colore di accento predefinito è una tonalità di blu. Gli sviluppatori di app possono scegliere di fornire un colore di accento per l'app che rifletta il loro marchio multimediale. Allo stesso modo, gli OEM possono fornire un colore di accento che rifletta il marchio della loro auto. Se fornito, un colore di accento OEM ha la precedenza sul colore di accento di un'app.

Barra di avanzamento dei media lineari che mostra la traccia attiva utilizzando colori di accento predefiniti, di terze parti e OEM
Lo stile predefinito per l'indicatore di avanzamento è una tonalità di blu. Gli sviluppatori di app possono sostituire lo stile predefinito dell'app con il colore principale del proprio brand (verde in questo esempio). Anche gli OEM possono sostituire sia lo stile predefinito sia quello dell'app con il colore principale del proprio brand (arancione in questo esempio).

Barra di avanzamento multimediale circolare che mostra la traccia attiva utilizzando colori di accento predefiniti, di terze parti e OEM
Esempi di stili di colori di accento predefiniti, app e OEM applicati a un indicatore di avanzamento circolare.

La Guida all'integrazione della libreria Car UI fornisce indicazioni OEM per la personalizzazione dei componenti.

Esempi

Indicatore di avanzamento dei media lineari in azione
Indicatore di avanzamento lineare dei contenuti multimediali nella visualizzazione di riproduzione dell'app multimediale.

Indicatore di avanzamento dei media circolari in azione
Qui, l'indicatore circolare di avanzamento del contenuto multimediale appare sul controllo di riproduzione ridotto a icona. Il controllo ridotto a icona si sovrappone alla schermata della playlist.