Le icone delle schede sono elementi grafici utilizzati per rappresentare singole schede in un basata su più schede. Ogni icona della scheda ha due stati: deselezionato e selezionato.
Come descritto in Fornire Set di icone specifiche per densità, devi creare set di icone separati per gli schermi a media e alta densità. In questo modo le icone verranno visualizzate in modo adeguato alla gamma dei dispositivi su cui può essere installata la tua applicazione. Consulta i suggerimenti per i designer per suggerimenti su come utilizzare più set di icone.
L'immagine 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 nella sezione Icona Pacchetto di modelli.
Avviso:
Lo stile delle icone delle schede è cambiato drasticamente
Android 2.0 rispetto alle versioni precedenti. A
fornire assistenza per tutte le versioni di Android, gli sviluppatori dovrebbero:
1. Inserisci le icone delle schede per Android 2.0 e versioni successive nella
Directory drawable-hdpi-v5, drawable-mdpi-v5 e drawable-ldpi-v5.
2. Inserisci le icone delle schede per le versioni precedenti in
Directory drawable-hdpi, drawable-mdpi e drawable-ldpi.
3. Imposta android:targetSdkVersion su 5 o su un valore superiore nel
<uses-sdk>
nel manifest dell'applicazione.
In questo modo comunicherai al sistema che deve visualizzare le schede utilizzando il nuovo stile di scheda.
Impostazione 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 stato elenco disegnabile per ogni icona, che è un file XML in cui sono elencate le immagini per i diversi stati della UI.
Ad esempio, per un widget di schede con schede denominate "Amici" e "Colleghi", puoi utilizzare una struttura di directory simile a questa:
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 file
disegnabili con l'icona selezionati e deselezionati. 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 ad Android 2.3
Le seguenti linee guida descrivono come progettare le icone delle schede per Android Dalla versione 2.0 ad Android 2.3 (livelli API da 5 a 10).
Dimensioni e posizionamento
Le icone delle schede devono utilizzare forme e forme semplici e devono essere ridimensionato e posizionato all'interno dell'asset finale.
La figura 1 illustra vari modi di posizionare l'icona all'interno asset. Le icone devono essere più piccole dei limiti effettivi asset.
Al fine di indicare le dimensioni consigliate per l'icona, ogni esempio in La figura 1 include tre diversi rettangoli guida:
- Il riquadro rosso è il riquadro di delimitazione dell'asset completo.
- Il riquadro blu è il riquadro di delimitazione consigliato per l'icona effettiva. Il riquadro delle icone ha dimensioni inferiori a quello di quello completo per consentire trattamenti speciali per le icone.
- Il riquadro arancione è il riquadro di delimitazione consigliato per l'icona effettiva quando i contenuti sono quadrati. La casella delle icone quadrate è più piccola rispetto a quella delle altre per stabilire un peso visivo coerente tra i due tipi.
|
|
|
|
|
|
|
Figura 1. Ridimensionamento e posizionamento dell'icona scheda all'interno dei limiti della dell'icona. |
Stile, colori ed effetti
Le icone delle schede sono piatte, opache e raffigurate di fronte.
Le icone delle schede devono avere due stati: selezionato e deselezionato.
|
Figura 2. Stile ed effetti per le icone delle schede non selezionate. Nota: tutte le dimensioni in pixel riguardano la densità media e devono essere ridimensionate in modo appropriato per le altre densità.
|
|
Figura 3. Stile ed effetti per le icone delle schede selezionate. Nota: tutte le dimensioni in pixel riguardano la densità media e devono essere ridimensionate in modo appropriato per le altre densità.
|
Cosa fare e cosa non fare
Ecco alcune cose da fare e da non fare esempi da considerare durante la creazione di icone di schede per la tua applicazione.
Icone di esempio
Di seguito sono riportate le icone standard delle schede ad alta densità utilizzate in la piattaforma Android.
Avviso: Poiché queste risorse possono cambiare da una versione della piattaforma all'altra, non deve fare riferimento alla copia delle risorse del sistema. Se vuoi utilizzare icone o altre risorse drawable interne, devi archiviare copia locale di queste icone o drawable nelle risorse dell'applicazione, quindi fare riferimento alla copia locale dal codice dell'applicazione. In questo modo puoi mantieni il controllo sull'aspetto delle icone, anche se il sistema e copiare le modifiche. Tieni presente che la griglia seguente non è pensata per 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 precedenti.
Struttura
- Le icone delle schede non selezionate hanno lo stesso gradiente di riempimento e gli stessi effetti delle icone dei menu, ma senza bagliore esterno.
- Le icone delle schede selezionate hanno lo stesso aspetto delle icone delle schede non selezionate, ma con un aspetto debole ombra interna e hanno la stessa sfumatura della parte anteriore icone della finestra di dialogo.
- Le icone delle schede hanno un SafeFrame da 1 px che deve essere sovrapposto solo al 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 una spaziatura interna di 1 px attorno al riquadro di delimitazione all'interno del modello Photoshop.
|
Figura 3. Safeframe e gradiente di riempimento per la scheda non selezionata . La dimensione dell'icona è 32 x 32. |
|
Figura 4. Safeframe e gradiente di riempimento per le icone delle schede in selezionato. La dimensione dell'icona è 32 x 32. |
Icona scheda non selezionata
Luce, effetti e ombre
Le icone delle schede non selezionate hanno lo stesso aspetto delle icone delle schede selezionate, ma con un ombra interna più debole e la stessa sfumatura della parte anteriore delle icone delle finestre di dialogo.
|
Figura 5. Luce, effetti e ombre per i brani non selezionati delle schede.
|
Procedura dettagliata
|
Icona della scheda selezionata
Le icone della scheda selezionata hanno lo stesso gradiente di riempimento e gli stessi effetti del menu ma senza bagliore esterno.
|
Figura 6. Luce, effetti e ombre per la scheda selezionata .
|
Tavolozza dei colori
|
Procedura dettagliata
|
