Tabsymbole sind grafische Elemente, mit denen einzelne Tabs in einer Benutzeroberfläche mit mehreren Tabs dargestellt werden. Jedes Tabsymbol hat zwei Status: nicht ausgewählt und ausgewählt.
Wie unter Dichtespezifische Symbolgruppen bereitstellen beschrieben, sollten Sie für Bildschirme mit niedriger, mittlerer und hoher Dichte separate Symbolgruppen erstellen. Dadurch wird sichergestellt, dass Ihre Symbole auf allen Geräten, auf denen Ihre App installiert werden kann, richtig angezeigt werden. Unter Tipps für Designer finden Sie Vorschläge zur Arbeit mit mehreren Gruppen von Symbolen.
Das endgültige Artwork muss als transparente PNG-Datei exportiert werden. Geben Sie keine Hintergrundfarbe an.
Vorlagen zum Erstellen von Symbolen in Adobe Photoshop sind im Icon Templates Pack verfügbar.
Warnung:Der Stil der Tabsymbole hat sich in Android 2.0 im Vergleich zu vorherigen Versionen drastisch geändert. Damit alle Android-Versionen unterstützt werden, sollten Entwickler so vorgehen:
1. Platzieren Sie Tab-Symbole für Android 2.0 und höher in den Verzeichnissen drawable-hdpi-v5, drawable-mdpi-v5 und drawable-ldpi-v5.
2. Platzieren Sie Tabsymbole für vorherige Versionen in den Verzeichnissen drawable-hdpi, drawable-mdpi und drawable-ldpi.
3. Legen Sie android:targetSdkVersion im Anwendungsmanifest in <uses-sdk> auf 5 oder höher fest.
Dadurch wird dem System mitgeteilt, dass Tabs mit dem neuen Tab-Stil gerendert werden sollen.
Symbole für zwei Tabstatus bereitstellen
Für Tabsymbole gibt es zwei Status: nicht ausgewählt und ausgewählt. Um Symbole mit mehreren Status bereitzustellen, müssen Entwickler für jedes Symbol eine Statusliste mit Drawable erstellen. Dabei handelt es sich um eine XML-Datei, in der angegeben ist, welches Bild für die verschiedenen UI-Zustände verwendet werden soll.
Sie können beispielsweise für ein Tab-Widget mit Tabs namens "Freunde" und "Kollegen" eine Verzeichnisstruktur wie die folgende verwenden:
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/...
...
Die Inhalte der oben aufgeführten XML-Dateien sollten sich auf die entsprechenden ausgewählten und nicht ausgewählten Symbol-Drawables beziehen. Hier ist beispielsweise der Code für 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>
Android 2.0 bis Android 2.3
In den folgenden Richtlinien wird die Erstellung von Tabsymbolen für Android 2.0 bis Android 2.3 (API-Level 5 bis 10) beschrieben.
Größe und Positionierung
Für Tabsymbole sollten einfache Formen und Formen verwendet werden, die skaliert und innerhalb des endgültigen Assets positioniert werden müssen.
In Abbildung 1 sind verschiedene Möglichkeiten zur Positionierung des Symbols im Asset dargestellt. Die Symbole sollten kleiner als die tatsächlichen Grenzen des Assets sein.
Zur Angabe der empfohlenen Größe für das Symbol enthält jedes Beispiel in Abbildung 1 drei verschiedene Führungsrechtecke:
- Der rote Rahmen ist der Begrenzungsrahmen für das gesamte Asset.
- Der blaue Rahmen ist der empfohlene Begrenzungsrahmen für das eigentliche Symbol. Das Symbolfeld ist kleiner als das vollständige Asset-Feld, um spezielle Symbolbehandlungen zu ermöglichen.
- Der orangefarbene Rahmen ist der empfohlene Begrenzungsrahmen für das eigentliche Symbol, wenn der Inhalt quadratisch ist. Das Feld für quadratische Symbole ist kleiner als das für andere Symbole, um eine einheitliche visuelle Gewichtung für beide Typen zu erreichen.
|
|
|
|
|
|
|
Abbildung 1: Größe und Positionierung von Tabsymbolen innerhalb der Grenzen des Symbol-Assets. |
Stil, Farben und Effekte
Tabsymbole sind flach, matt und mit dem Gesicht dargestellt.
Für Tabsymbole gibt es zwei Status: „ausgewählt“ und „nicht ausgewählt“.
|
Abbildung 2. Stil und Effekte für nicht ausgewählte Tabsymbole. Hinweis: Alle Pixelabmessungen gelten für mittlere Dichte und sollten für andere Dichten entsprechend skaliert werden.
|
|
Abbildung 3. Stil und Effekte für ausgewählte Tabsymbole. Hinweis: Alle Pixelabmessungen gelten für mittlere Dichte und sollten für andere Dichten entsprechend skaliert werden.
|
Tipps
Im Folgenden finden Sie einige Beispiele, die Sie beim Erstellen von Tabsymbolen für Ihre Anwendung berücksichtigen sollten.
Beispielsymbole
Unten siehst du Standardsymbole für Tabs mit hoher Dichte, die auf der Android-Plattform verwendet werden.
Warnung:Da sich diese Ressourcen zwischen Plattformversionen ändern können, sollten Sie nicht auf die Systemkopie der Ressourcen verweisen. Wenn du Symbole oder andere interne Drawable-Ressourcen verwenden möchtest, solltest du eine lokale Kopie dieser Symbole oder Drawables in deinen Anwendungsressourcen speichern und dann auf die lokale Kopie aus deinem Anwendungscode verweisen. Auf diese Weise können Sie die Darstellung Ihrer Symbole auch dann steuern, wenn sich die Kopie des Systems ändert. Hinweis: Die nachstehende Tabelle ist nicht vollständig.
Android 1.6 und niedriger
In den folgenden Richtlinien wird die Erstellung von Tabsymbolen für Android 1.6 (API-Level 4) und früher beschrieben.
Struktur
- Nicht ausgewählte Tabsymbole haben denselben Füllungsverlauf und dieselben Effekte wie Menüsymbole, jedoch keinen äußeren Schein.
- Ausgewählte Tabsymbole sehen wie nicht ausgewählte Tabsymbole aus, haben jedoch einen dunkleren Schatten nach innen und haben denselben Farbverlauf für den vorderen Teil wie Dialogsymbole.
- Tab-Symbole haben einen 1 Pixel großen SafeFrame, der sich nur bis zum Rand des Kantenglättens einer runden Form überschneiden sollte.
- Alle auf dieser Seite angegebenen Abmessungen basieren auf einer Zeichenflächengröße von 32 x 32 Pixel. Verwenden Sie innerhalb der Photoshop-Vorlage einen Abstand von 1 Pixel um den Begrenzungsrahmen.
|
Abbildung 3. SafeFrame und Füllverlauf für nicht ausgewählte Tabsymbole. Die Symbolgröße beträgt 32 x 32. |
|
Abbildung 4. Safeframe und Füllung des Farbverlaufs für Tabsymbole im ausgewählten Status. Die Symbolgröße beträgt 32 x 32. |
Symbol für nicht ausgewählten Tab
Licht, Effekte und Schatten
Nicht ausgewählte Tabsymbole sehen genauso aus wie die ausgewählten Tabsymbole, haben jedoch einen schwächeren inneren Schatten und denselben Farbverlauf für den vorderen Teil wie die Dialogfeldsymbole.
|
Abbildung 5: Licht, Effekte und Schatten für nicht ausgewählte Tabsymbole.
|
Detaillierte Anleitung
|
Symbol für ausgewählten Tab
Die ausgewählten Tabsymbole haben denselben Füllungsverlauf und dieselben Effekte wie das Menüsymbol, jedoch keinen äußeren Schein.
|
Abbildung 6. Licht, Effekte und Schatten für ausgewählte Tab-Symbole.
|
Farbvorlage
|
Detaillierte Anleitung
|
