Diese Seite wurde von der Cloud Translation API übersetzt.

Stile und Designs

Mit Stilen und Designs für Android kannst du die Details deines App-Designs von der Benutzeroberfläche trennen Struktur und Verhalten ähnlich wie Stylesheets im Webdesign.

Ein Stil ist eine Sammlung von Attributen, mit denen die Darstellung eines einzelnen Stils festgelegt wird. View Über einen Stil können Attribute festgelegt werden. wie Schriftfarbe, Schriftgröße und Hintergrundfarbe.

Ein Design ist eine Sammlung von Attributen, die auf eine gesamte App, Aktivität oder Ansicht angewendet wird. und nicht nur eine Einzelansicht. Wenn Sie ein Design anwenden, wird jede Ansicht in der App oder In der Aktivität werden alle unterstützten Attribute des Designs angewendet. Designs können auch Stile auf Nicht-Ansichtselemente, wie die Statusleiste und den Fensterhintergrund.

Stile und Designs werden in einem Stil-Ressourcendatei in der Datei res/values/, in der Regel styles.xml.

Abbildung 1: Zwei Themen, die auf dieselbe Aktivität angewendet werden: Theme.AppCompat (links) und Theme.AppCompat.Light (rechts).

Unterschiede zwischen Designs und Stilen

Designs und Stile haben viele Ähnlichkeiten, dienen aber unterschiedlichen Zwecken. Designs und haben Stile dieselbe Grundstruktur: ein Schlüssel/Wert-Paar, das attributes Ressourcen

Ein style gibt Attribute für einen bestimmten Ansichtstyp an. Zum Beispiel könnte ein Stil die Attribute einer Schaltfläche angeben. Jedes Attribut, das Sie in einem Stil angeben, ist ein Attribut, das Sie in in der Layoutdatei. Das Extrahieren aller Attribute eines Stils erleichtert deren Verwendung und Verwaltung. über mehrere Widgets hinweg nutzen.

Ein Design definiert eine Sammlung benannter Ressourcen, auf die von Stilen, Layouts, Widgets usw. In Designs werden Android semantische Namen wie colorPrimary zugewiesen Ressourcen.

Stile und Designs sollten aufeinander abgestimmt sein. Angenommen, Sie haben einen Stil, in dem dass ein Teil einer Schaltfläche colorPrimary und ein anderer Teil colorSecondary. Die tatsächlichen Definitionen dieser Farben finden Sie im Design. Wann? das Gerät in den Nachtmodus wechselt, kann Ihre App vom das Design auf das „dunkle“ Thema, und die Werte für all diese Ressourcennamen ändern. Die Stile müssen nicht geändert werden, da die Stile verwenden die semantischen Namen und keine spezifischen Farbdefinitionen.

Weitere Informationen zum Zusammenwirken von Designs und Stilen finden Sie in diesem Blogpost. Android-Stile: Designs und Stile

Stil erstellen und anwenden

Wenn Sie einen neuen Stil erstellen möchten, öffnen Sie die res/values/styles.xml-Datei Ihres Projekts. Für Gehen Sie wie folgt vor:

Fügen Sie ein <style>-Element mit einem Namen hinzu, der den Stil eindeutig identifiziert.
Fügen Sie für jedes Stilattribut, das Sie definieren möchten, ein <item>-Element hinzu. Die name in jedem Element gibt ein Attribut an, das Sie sonst als XML-Attribut in Ihrem Layout. Der Wert im <item>-Element ist der Wert für dieses Attribut.

Angenommen, Sie definieren den folgenden Stil:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

Sie können den Stil wie folgt auf eine Ansicht anwenden:

<TextView
    style="@style/GreenText"
    ... />

Jedes im Stil angegebene Attribut wird auf diese Ansicht angewendet, wenn die Ansicht es akzeptiert. Ansicht ignoriert alle Attribute, die es nicht akzeptiert.

</ph> Hinweis: Diese werden nur an das Element gesendet, dem Sie das Attribut style hinzufügen. Stilattribute festlegen. In untergeordneten Ansichten werden die Stile nicht angewendet. Wenn Sie möchten, dass untergeordnete Ansichten Stile übernehmen, wenden Sie stattdessen den Stil mit dem Attribut android:theme an.

Statt jedoch einen Stil auf einzelne Ansichten anzuwenden, Stile als Design anwenden auf Ihre gesamte App, Aktivität oder Sammlung von wie in einem anderen Abschnitt dieses Leitfadens beschrieben.

Stil erweitern und anpassen

Erweitern Sie beim Erstellen Ihrer eigenen Stile immer einen vorhandenen Stil aus dem Framework oder Support Bibliothek, damit die Kompatibilität mit Plattform-UI-Stilen gewährleistet ist. Um einen Stil zu erweitern, geben Sie den Parameter Stil, den Sie mit dem Attribut parent erweitern möchten. Sie können die übernommene und fügen Sie neue hinzu.

Sie können beispielsweise die Standardtextdarstellung der Android-Plattform übernehmen und sie wie folgt ändern: folgt:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Du solltest jedoch immer deine wichtigsten App-Stile aus der Android Support Library übernehmen. Die Stile in der Die Supportbibliothek bietet Kompatibilität, indem jeder Stil für die UI-Attribute optimiert wird, die in für jede Version. Die Stile der Supportbibliothek haben oft einen Namen, der dem Stil der Plattform ähnelt. aber mit enthalten: AppCompat.

Wenn Sie Stile aus einer Bibliothek oder Ihrem eigenen Projekt übernehmen möchten, deklarieren Sie den Namen des übergeordneten Stils ohne den im vorherigen Beispiel gezeigten @android:style/-Teil. Beispiel: Im folgenden Beispiel werden Stile für die Textdarstellung aus der Support Library übernommen:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

Sie können Stile auch übernehmen (außer denen der Plattform), indem Sie die mit einem Punkt angeben, statt das Attribut parent zu verwenden. Stellen Sie also den Parameter Name des Designs durch den Namen des Designs, das Sie übernehmen möchten (getrennt durch einen Punkt) Ich Dies sollten Sie normalerweise nur tun, wenn Sie Ihre eigenen Stile erweitern, nicht Stile aus anderen Bibliotheken. Beispiel: Der folgende Stil übernimmt alle Stile aus der GreenText im vorherigen Beispiel und vergrößert dann den Text:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Sie können Stile wie diesen beliebig oft übernehmen, indem Sie weitere Stile Namen.

</ph> Hinweis:Wenn Sie einen Stil mithilfe der Punktnotation erweitern und zusätzlich das Zeichen parent verwenden, überschreiben die übergeordneten Stile alle Stile, die vom Punktnotation.

Welche Attribute Sie mit einem <item>-Tag deklarieren können, erfahren Sie im Abschnitt „XML“ Attribute“ in den verschiedenen Klassenreferenzen. Alle Ansichten werden unterstützt XML-Attribute aus der Basis View-Klasse und in vielen Ansichten gibt es eigene spezielle Attribute. Beispiel: Der Parameter TextView XML-Attribute einschließlich der android:inputType Attribut, das Sie auf eine Textansicht anwenden können, bei der Eingaben erfolgen, z. B. EditText-Widget

Stil als Design anwenden

Designs werden auf die gleiche Weise erstellt wie Stile. Der Unterschied besteht darin, wie Sie sie anwenden: anstatt einen Stil mit dem Attribut style auf eine Ansicht anzuwenden, wenden Sie ein Design mit das Attribut android:theme im <application>-Tag oder <activity>-Tag in der Datei AndroidManifest.xml.

So wenden Sie zum Beispiel das Material Design-Element der Android Support Library „dark“ (dunkel) an: Thema zu die gesamte App:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

Und so wenden wir das "Licht" auf nur eine Aktivität zu beschränken:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

Auf jede Ansicht in der App oder Aktivität werden die von der App unterstützten Stile angewendet. Thema. Wenn eine Ansicht nur einige der im Stil deklarierten Attribute unterstützt, wird sie angewendet. nur diese Attribute und ignoriert die nicht unterstützten Attribute.

Ab Android 5.0 (API-Level 21) und der Android Support Library v22.1 können Sie auch das Attribut android:theme einer Ansicht in Ihrer Layoutdatei zu. Dadurch wird das Design des dieser Ansicht und aller untergeordneten Ansichten. Dies ist nützlich, um Farbvorlagen für ein bestimmtes Ihrer Benutzeroberfläche.

Die vorherigen Beispiele zeigen, wie ein Design wie Theme.AppCompat angewendet wird, die aus der Android Support Library stammen. Üblicherweise möchten Sie das Design jedoch die Marke Ihrer App. Erweitern Sie dazu am besten diese Stile aus der Support Library einige Attribute überschreiben, wie im folgenden Abschnitt beschrieben.

Stilhierarchie

Android bietet eine Vielzahl von Möglichkeiten, Attribute in Ihrer Android-App festzulegen. Beispiel: Sie können Attribute direkt in einem Layout festlegen, einen Stil auf eine Ansicht anwenden, ein Design auf ein Layout anwenden und können sogar programmatisch Attribute festlegen.

Achten Sie bei der Gestaltung Ihrer App auf die Stilhierarchie von Android. Verwenden Sie im Allgemeinen Designs und Stile so weit wie möglich zu vereinheitlichen. Wenn Sie dieselben Attribute in mehreren Orten enthält, wird anhand der folgenden Liste festgelegt, welche Attribute letztendlich angewendet werden. Die Liste ist von der höchsten zur niedrigsten Priorität sortiert.

Stile auf Zeichen- oder Absatzebene mithilfe von Textbereichen auf TextView-abgeleitete Stile anwenden Klassen.
Attribute programmatisch anwenden
Einzelne Attribute direkt auf eine Ansicht anwenden
Stil auf eine Ansicht anwenden
Standardstil.
Design auf eine Sammlung von Ansichten, eine Aktivität oder die gesamte App anwenden
Die Anwendung bestimmter ansichtsspezifischer Stile, z. B. durch Festlegen einer TextAppearance am TextView.

Abbildung 2: Der Stil eines span-Elements überschreibt den Stil einer anderen textAppearance.

</ph> Achtung:Wenn Sie Ihre App gestalten und nicht die erwarteten Ergebnisse sehen, ist es wahrscheinlich, dass Ihre Änderungen werden überschrieben. Wenn Sie z. B. ein Design auf Ihre App anwenden, einem einzelnen View einen Stil zuweisen, überschreiben die Stilattribute alle übereinstimmenden Attribute für View. Beachten Sie jedoch, dass alle Themenattribute, die nicht die durch den Stil überschrieben wurden, weiterhin verwendet werden.

Textdarstellung

Eine Einschränkung bei Stilen besteht darin, dass Sie nur einen Stil auf einen View anwenden können. In einer TextView. Sie können jedoch auch einen Attribut „TextAppearance“ das ähnlich funktioniert wie ein Stil, wie im folgenden Beispiel gezeigt:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

Mit TextAppearance können Sie einen textspezifischen Stil definieren, aber den Stil eines View für andere Zwecke verfügbar. Wenn Sie jedoch Textattribute definieren, direkt am View oder in einem Stil angeben, überschreiben diese Werte den TextAppearance-Werte.

TextAppearance unterstützt eine Teilmenge von Stilattributen, die TextView Angebote. Die vollständige Attributliste finden Sie unter TextAppearance

Einige gängige TextView-Attribute, die nicht enthalten sind, sind lineHeight[Multiplier|Extra], lines, breakStrategy und hyphenationFrequency. TextAppearance funktioniert auf Zeichen- und nicht auf Absatzebene. -Attribute, die sich auf das gesamte Layout auswirken, werden nicht unterstützt.

Standarddesign anpassen

Wenn du ein Projekt mit Android Studio erstellst, wird ein Material Design-Design auf deine App angewendet, gemäß der Definition in der styles.xml-Datei Ihres Projekts. Dieser AppTheme-Stil erweitert ein Design aus der Supportbibliothek und enthält Überschreibungen für die verwendeten Farbattribute durch wichtige UI-Elemente wie die App-Leiste Unverankerte Aktionsschaltfläche, falls verwendet. Sie können Sie das Farbdesign Ihrer App schnell anpassen, indem Sie die angegebenen Farben aktualisieren.

Ihre styles.xml-Datei sieht beispielsweise so aus:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Die Stilwerte sind eigentlich Verweise auf andere Farbressourcen, die in den res/values/colors.xml-Datei des Projekts. Das ist die Datei, die Sie bearbeiten, um die Farben zu ändern. Weitere Informationen finden Sie in der Farben in Material Design – Übersicht , um die Nutzererfahrung mit dynamischen Farben und zusätzlichen benutzerdefinierten Farben zu verbessern.

Sobald Sie die Farben kennen, aktualisieren Sie die Werte in res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

Anschließend können Sie beliebige andere Stile überschreiben. Sie können beispielsweise die Aktivität Hintergrundfarbe folgendermaßen ab:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

Eine Liste der Attribute, die Sie in Ihrem Design verwenden können, finden Sie in der Tabelle der Attribute unter R.styleable.Theme Beim Hinzufügen Stile für die Ansichten in Ihrem Layout. Sie finden die Attribute auch in den XML-Attributen in den Klassenreferenzen der Ansicht. Beispielsweise unterstützen alle Ansichten XML-Attribute aus der Basis View .

Die meisten Attribute werden auf bestimmte Arten von Ansichten angewendet, einige gelten auch für alle Ansichten. Sie können jedoch einige Themenattribute, die unter R.styleable.Theme gelten für Aktivitätsfensters und nicht die Ansichten im Layout. Beispielsweise ändert windowBackground den Wert Fensterhintergrund und windowEnterTransition definieren eine Übergangsanimation, die verwendet wird, wenn beginnt die Aktivität. Weitere Informationen finden Sie unter Starten eine Aktivität in Form einer Animation.

Die Android Support Library bietet auch andere Attribute, mit denen Sie Ihr Design anpassen können erweitert von Theme.AppCompat, wie das colorPrimary-Attribut in aus dem vorherigen Beispiel. Diese sehen Sie am besten in der Datei attrs.xml der Bibliothek.

</ph> Hinweis:Attributnamen aus der Support Library verwenden nicht das Präfix android:. Das wird nur für Attribute aus dem Android-Framework verwendet.

In der Support Library findest du auch verschiedene Designs, die du erweitern kannst anstelle der im vorherigen Beispiel dargestellten Werte. Die verfügbaren Designs sehen Sie am besten die Datei themes.xml der Bibliothek.

Versionsspezifische Stile hinzufügen

Wenn in einer neuen Android-Version Designattribute hinzugefügt werden, die Sie verwenden möchten, können Sie sie Ihrem Design hinzufügen. und gleichzeitig mit älteren Versionen kompatibel sind. Du brauchst nur eine weitere styles.xml-Datei die in einem values-Verzeichnis gespeichert sind, Ressourcenversion Kennzeichner:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

Da die Stile in der Datei values/styles.xml für alle Versionen verfügbar sind, können sie von Ihren Designs in values-v21/styles.xml übernommen werden. Das bedeutet, dass Sie zum Duplizieren von Stilen, indem Sie mit einer „base“ beginnen und dann in Ihrem versionsspezifischen Stile.

Um beispielsweise Fensterübergänge für Android 5.0 (API-Level 21) und höher zu deklarieren, benötigen Sie um neue Attribute zu verwenden. Ihr Basisdesign in res/values/styles.xml kann also so aussehen: dies:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

Fügen Sie dann die versionsspezifischen Stile in res/values-v21/styles.xml so hinzu:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

Du kannst jetzt AppTheme in deiner Manifestdatei anwenden und das System wählt die Stile aus die für jede Systemversion verfügbar sind.

Weitere Informationen zur Verwendung alternativer Ressourcen für verschiedene Geräte findest du unter Alternative Ressourcen zur Verfügung stellen

Widget-Stile anpassen

Jedes Widget im Framework und in der Supportbibliothek verfügt über einen Standardstil. Wenn Sie zum Beispiel gestalte deine App mit einem Design aus der Support Library, einer Instanz von Button wird mit dem Widget.AppCompat.Button-Stil. Wenn Sie einen anderen Widget-Stil auf ein können Sie das Attribut style in Ihrer Layoutdatei verwenden. Beispiel: Der Parameter wird der rahmenlose Schaltflächenstil der Bibliothek angewendet:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

Wenn Sie diesen Stil auf alle Schaltflächen anwenden möchten, können Sie ihn im buttonStyle so:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

Sie können Widget-Stile genau wie andere Stile auch erweitern. und wenden Sie dann Ihren benutzerdefinierten Widget-Stil auf Ihr Layout oder Design an.

Weitere Informationen

Weitere Informationen zu Designs und Stilen finden Sie in den folgenden zusätzlichen Ressourcen:

Stile und Designs

Unterschiede zwischen Designs und Stilen

Stil erstellen und anwenden

Stil erweitern und anpassen

Stil als Design anwenden

Stilhierarchie

Textdarstellung

Standarddesign anpassen

Versionsspezifische Stile hinzufügen

Widget-Stile anpassen

Weitere Informationen

Blogposts