Le icone delle schede sono elementi grafici utilizzati per rappresentare singole schede in un'interfaccia a più schede. Ogni icona di scheda ha due stati: deselezionata e selezionata.
Come descritto nella sezione Fornire set di icone specifici per densità, devi creare set di icone separati per le schermate a bassa, media e alta densità. Ciò garantisce che le icone vengano visualizzate correttamente nell'intervallo di dispositivi su cui può essere installata l'applicazione. Consulta la sezione Suggerimenti per i designer per suggerimenti su come utilizzare più insiemi di icone.
La grafica finale deve essere esportata come file PNG trasparente. Non includere un colore di sfondo.
I modelli per la creazione di icone in Adobe Photoshop sono disponibili nel Pacchetto di modelli di icone.
Avviso:
lo stile delle icone delle schede è cambiato drasticamente in Android 2.0 rispetto alle versioni precedenti. Per fornire assistenza per tutte le versioni di Android, gli sviluppatori devono:
1. Posiziona le icone delle schede per Android 2.0 e versioni successive nelle directory drawable-hdpi-v5, drawable-mdpi-v5 e drawable-ldpi-v5.
2. Inserisci le icone delle schede per le versioni precedenti nelle directory drawable-hdpi, drawable-mdpi e drawable-ldpi.
3. Imposta android:targetSdkVersion su 5 o su un valore superiore in <uses-sdk> nel manifest dell'applicazione.
In questo modo, comunicherai al sistema che deve eseguire il rendering delle schede utilizzando il nuovo stile per le schede.
Visualizzazione di icone per due stati delle schede
Le icone delle schede devono avere due stati: deselezionato e selezionato. Per fornire icone con più stati, gli sviluppatori devono creare un elenco di stati disegnabile per ogni icona, ovvero un file XML che elenca l'immagine da utilizzare per i diversi stati dell'interfaccia utente.
Ad esempio, per un widget di schede con schede denominate "Amici" e "Collaboratori", puoi utilizzare una struttura di directory simile a quella riportata di seguito:
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...
I contenuti dei file XML elencati sopra devono fare riferimento ai disegnabili dell'icona corrispondenti
selezionati e non selezionati. Ad esempio, di seguito è riportato il codice per ic_tab_friends.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>
Da Android 2.0 a Android 2.3
Le seguenti linee guida descrivono come progettare le icone delle schede per Android 2.0-Android 2.3 (livelli API da 5 a 10).
Dimensioni e posizionamento
Le icone delle schede devono utilizzare forme e moduli semplici, che devono essere ridimensionati e posizionati all'interno dell'asset finale.
La figura 1 illustra i vari modi per posizionare l'icona all'interno dell'asset. Le dimensioni delle icone devono essere minore dei limiti effettivi dell'asset.
Per indicare la dimensione consigliata per l'icona, ogni esempio nella Figura 1 include tre diversi rettangoli guida:
- Il riquadro rosso rappresenta il riquadro di delimitazione dell'intero asset.
- Il riquadro blu è il riquadro di delimitazione consigliato per l'icona effettiva. La casella delle icone è di dimensioni inferiori a quelle della casella completa degli asset per consentire trattamenti speciali dell'icona.
- Il riquadro arancione è il riquadro di delimitazione consigliato per l'icona effettiva quando il contenuto è quadrato. La casella delle icone quadrate è più piccola rispetto a quella delle altre icone per stabilire un peso visivo coerente tra i due tipi.
|
|
|
|
|
|
|
Figura 1. Dimensioni e posizionamento dell'icona della scheda entro i limiti dell'asset dell'icona. |
Stile, colori ed effetti
Le icone delle schede sono piatte, opache e raffigurate a faccia in giù.
Le icone delle schede devono avere due stati: selezionata e deselezionata.
|
Figura 2. Stile ed effetti per le icone delle schede non selezionate. Nota: tutte le dimensioni in pixel sono per densità media e devono essere adattate in modo appropriato per altre densità.
|
|
Figura 3. Stile ed effetti per le icone delle schede selezionate. Nota: tutte le dimensioni in pixel sono per densità media e devono essere adattate in modo appropriato per altre densità.
|
Cosa fare e cosa non fare
Di seguito sono riportati alcuni esempi di cose da fare e da non fare durante la creazione delle icone delle schede per la tua applicazione.
Icone di esempio
Di seguito sono mostrate le icone standard delle schede ad alta densità utilizzate nella piattaforma Android.
Avviso: poiché queste risorse possono cambiare da una versione della piattaforma all'altra, non dovresti fare riferimento alla copia delle risorse del sistema. Se vuoi utilizzare icone o altre risorse disegnabili interne, devi archiviare una copia locale delle icone o dei disegnabili nelle risorse dell'applicazione, quindi fare riferimento alla copia locale dal codice dell'applicazione. In questo modo, puoi mantenere il controllo sull'aspetto delle icone, anche se la copia del sistema cambia. Tieni presente che la griglia di seguito non è destinata a essere completa.
Android 1.6 e versioni precedenti
Le seguenti linee guida descrivono come progettare le icone delle schede per Android 1.6 (livello API 4) e versioni precedenti.
Struttura
- Le icone delle schede non selezionate hanno lo stesso gradiente di riempimento e gli stessi effetti delle icone dei menu, ma sono prive di bagliore.
- Le icone di schede selezionate hanno lo stesso aspetto delle icone di schede non selezionate, ma con un'ombra interna più tenue e hanno la stessa sfumatura nella parte anteriore delle icone delle finestre di dialogo.
- Le icone delle schede hanno un frame sicuro da 1 px che deve essere sovrapposto solo sul bordo dell'anti-alias di una forma rotonda.
- Tutte le dimensioni specificate in questa pagina si basano su una tavola da disegno di 32 x 32 px. Mantieni 1 px di spaziatura interna intorno al riquadro di delimitazione all'interno del modello di Photoshop.
|
Figura 3. SafeFrame e gradiente di riempimento per le icone delle schede non selezionate. La dimensione dell'icona è 32 x 32. |
|
Figura 4. SafeFrame e gradiente di riempimento per le icone delle schede nello stato selezionato. La dimensione dell'icona è 32 x 32. |
Icona della scheda deselezionata
Luce, effetti e ombre
Le icone delle schede non selezionate hanno lo stesso aspetto delle icone delle schede selezionate, ma con una più debole ombra interna e la stessa sfumatura nella parte anteriore delle icone delle finestre di dialogo.
|
Figura 5. Luci, effetti e ombre per le icone delle schede non selezionate.
|
Istruzioni dettagliate
|
Icona della scheda selezionata
Le icone della scheda selezionate hanno lo stesso gradiente di riempimento e gli stessi effetti dell'icona del menu, ma senza bagliore esterno.
|
Figura 6. Luci, effetti e ombre per le icone della scheda selezionata.
|
Tavolozza dei colori
|
Istruzioni dettagliate
|
