Tab-Symbole sind grafische Elemente, mit denen einzelne Tabs in einer Multi-Tab-Oberfläche. Jedes Tabsymbol hat zwei Status: "Nicht ausgewählt" und "Ausgewählt".
Weitere Informationen finden Sie unter Bereitstellen von Dichtespezifische Symbolsätze verwenden, sollten Sie separate Symbolsätze für niedrige, Bildschirmen mit mittlerer und hoher Punktdichte. So wird sichergestellt, dass Ihre Symbole auf allen Geräten, auf denen Ihre App installiert werden kann. Siehe Tipps für Designer finden Sie Vorschläge zur Arbeit mit mehreren Gruppen von Symbolen.
Das fertige Artwork muss als transparente PNG-Datei exportiert werden. Nicht einbeziehen eine Hintergrundfarbe.
Vorlagen zum Erstellen von Symbolen in Adobe Photoshop finden Sie im Bereich Symbole Vorlagenpaket.
Warnung:
Der Stil der Tab-Symbole hat sich in
Android 2.0 im Vergleich zu den vorherigen Versionen Bis
Support für alle Android-Versionen bereitstellen sollten Entwickler Folgendes tun:
1. Platzieren Sie Tab-Symbole für Android 2.0 und höher im
drawable-hdpi-v5, drawable-mdpi-v5 und drawable-ldpi-v5.
2. Tabsymbole für vorherige Versionen platzieren in
drawable-hdpi, drawable-mdpi und drawable-ldpi.
3. Setzen Sie android:targetSdkVersion im Feld
<uses-sdk>
im App-Manifest.
Dadurch wird das System informiert, dass Tabs im neuen Tab-Stil dargestellt werden sollen.
Symbole für zwei Tab-Status bereitstellen
Tab-Symbole sollten zwei Status haben: "Nicht ausgewählt" und "Ausgewählt". Um Symbole bereitzustellen mit mehreren Bundesstaaten haben, müssen Entwickler eine Bundesstaat/-land list Drawable für jedes Symbol. Dabei handelt es sich um eine XML-Datei, in der angegeben ist, die für die verschiedenen Benutzeroberflächenstatus verwendet werden.
Beispiel: Für ein Tab-Widget mit Tabs namens „Freunde“ und "Kollegen". können Sie eine Verzeichnisstruktur verwenden, die der folgenden ähnelt:
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/...
...Der Inhalt der oben aufgeführten XML-Dateien sollte auf die entsprechenden
ausgewählten und nicht ausgewählten Symbol-Drawables. Unten sehen Sie zum Beispiel den 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 beschrieben, wie Sie Tabsymbole für Android entwerfen. 2.0 bis Android 2.3 (API-Level 5 bis 10)
Größe und Position
Tabsymbole sollten einfache Formen und Formen enthalten. Diese müssen das skaliert und innerhalb des endgültigen Assets positioniert wird.
Abbildung 1 zeigt verschiedene Möglichkeiten zur Positionierung des Symbols innerhalb der Die Symbole sollten die Größe kleiner als die tatsächlichen Asset
Zur Angabe der empfohlenen Größe für das Symbol muss jedes Beispiel in Abbildung 1 enthält drei verschiedene Führungsrechtecke:
- Der rote Rahmen ist der Begrenzungsrahmen für das vollständige Asset.
- Das blaue Feld ist der empfohlene Begrenzungsrahmen für das eigentliche Symbol. Das Symbolfeld ist kleiner als der gesamte Medienelementfeld. mit speziellen Symbolbearbeitungen.
- Der orangefarbene Rahmen wird als Begrenzungsrahmen für das eigentliche Symbol empfohlen, wenn ist der Inhalt quadratisch. Das Feld für die quadratischen Symbole ist kleiner als das für andere Symbole. Symbole, um ein einheitliches visuelles Gewicht für beide Typen zu schaffen.
|
|
|
|
|
|
|
Abbildung 1: Größe und Position des Tab-Symbols innerhalb der Grenzen des Symbol-Asset. |
Stil, Farben und Effekte
Tab-Symbole sind flach, matt und von der Vorderseite zu sehen.
Tabsymbole sollten zwei Status haben: „ausgewählt“ und „nicht ausgewählt“.
|
Abbildung 2. Stil und Effekte für nicht ausgewählte Tabsymbole. Hinweis: Alle Pixelabmessungen gelten für mittlere Dichten 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 Dichten und sollten für andere Dichten entsprechend skaliert werden.
|
Tipps
Im Folgenden finden Sie einige Empfehlungen, die Sie vermeiden sollten. Beispiele für die Erstellung von Tabsymbolen für Ihre Anwendung.
Beispielsymbole
Unten sehen Sie Standard-Tab-Symbole mit hoher Dichte, die in der Android-Plattform.
Warnung: Da sich diese Ressourcen je nach Plattformversion ändern können, sollte nicht auf die Systemkopie der Ressourcen verweisen. Wenn Sie oder andere interne Drawable-Ressourcen nutzen, solltest du eine lokale Kopie dieser Symbole oder Drawables in Ihren Anwendungsressourcen, und verweisen Sie dann auf die lokale Kopie Ihres Anwendungscodes. Auf diese Weise können Sie die Kontrolle über die Darstellung Ihrer Symbole behalten, selbst wenn Änderungen kopieren. Die folgende Tabelle ist nicht vollständig.
Android 1.6 und älter
In den folgenden Richtlinien wird beschrieben, wie Sie Tabsymbole für Android entwerfen. Version 1.6 (API-Level 4) und niedriger.
Struktur
- Nicht ausgewählte Tabsymbole haben denselben Füllverlauf und dieselben Effekte wie Menüsymbole, aber ohne äußeren Schein.
- Ausgewählte Tabsymbole sehen wie nicht ausgewählte Tabsymbole aus, sind jedoch etwas schwächerer geworden. inneren Schatten haben und denselben Farbverlauf für den vorderen Teil haben wie Dialogsymbole.
- Tab-Symbole haben einen ein Pixel breiten SafeFrame, der sich nur am Rand überlappen sollte. Kantenglättung einer runden Form verwendet.
- Alle auf dieser Seite angegebenen Abmessungen basieren auf einer Zeichenflächengröße von 32 x 32 Pixel. Halten Sie in der Photoshop-Vorlage einen Abstand von 1 Pixel um den Begrenzungsrahmen herum.
|
Abbildung 3: SafeFrame und Füllverlauf für den nicht ausgewählten Tab Symbole. Die Größe des Symbols ist 32 x 32. |
|
Abbildung 4: SafeFrame und Füllverlauf für Tabsymbole in ausgewählten Bundesstaat. Die Größe des Symbols ist 32 x 32. |
Symbol für nicht ausgewählten Tab
Licht, Effekte und Schatten
Nicht ausgewählte Tab-Symbole sehen genauso aus wie die ausgewählten Tab-Symbole, nur mit dem schmalerer Schatten im inneren Bereich und derselbe Farbverlauf der Vorderseite wie bei den Dialogfeldsymbolen.
|
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üllverlauf und dieselben Effekte wie das Menü Symbol, aber ohne äußeren Schein.
|
Abbildung 6: Licht, Effekte und Schatten auf dem ausgewählten Tab Symbole.
|
Farbvorlage
|
Detaillierte Anleitung
|
