wake-up-neo.net

Wann sollte man Theme.AppCompat vs ThemeOverlay.AppCompat verwenden?

Es gibt die folgenden Theme.AppCompat-Klassen:

Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar
Theme.AppCompat.NoActionBar
Theme.AppCompat.Light.NoActionBar
Theme.AppCompat.DialogWhenLarge
Theme.AppCompat.Light.DialogWhenLarge
Theme.AppCompat.Dialog
Theme.AppCompat.Light.Dialog
Theme.AppCompat.CompactMenu

und die folgenden ThemeOverlay.AppCompat-Klassen:

ThemeOverlay.AppCompat
ThemeOverlay.AppCompat.Light
ThemeOverlay.AppCompat.Dark
ThemeOverlay.AppCompat.ActionBar
ThemeOverlay.AppCompat.Dark.ActionBar

Warum sollte man zum Beispiel ThemeOverlay.AppCompat.light vs Theme.AppCompat.Light verwenden? Ich sehe, dass für ThemeOverlay viel weniger Attribute definiert sind - ich bin gespannt, was der beabsichtigte Anwendungsfall für ThemeOverlay ist.

102

Per this Theme vs Style Blog Post vom Entwickler von AppCompat:

[ThemeOverlays] sind spezielle Themen, die das normale Theme.Material überlagern und relevante Attribute überschreiben, um sie entweder hell/dunkel zu machen.

ThemeOverlay + ActionBar

Die scharfen Augen von Ihnen haben auch die ActionBar ThemeOverlay-Derivate gesehen:

  • ThemeOverlay.Material.Light.ActionBar
  • ThemeOverlay.Material.Dark.ActionBar

Diese sollten nur mit der Aktionsleiste über das neue Attribut actionBarTheme oder direkt in Ihrer Symbolleiste verwendet werden.

Das Einzige, was diese derzeit anders machen als ihre Eltern, ist, dass sie das colorControlNormal in Android:textColorPrimary Ändern, wodurch Text und Symbole undurchsichtig werden.

66
ianhanniballake

Theme.AppCompat wird verwendet, um das globale Thema für die gesamte App festzulegen. ThemeOverlay.AppCompat wird verwendet, um dieses Thema für bestimmte Ansichten, insbesondere die Symbolleiste, zu überschreiben (oder "zu überlagern").

Schauen wir uns ein Beispiel dafür an, warum dies notwendig ist.

App-Themen mit einer ActionBar

Die ActionBar wird normalerweise in einer App angezeigt. Ich kann die Farbe auswählen, indem ich den Wert colorPrimary setze. Durch Ändern des Themas wird jedoch die Farbe des Texts in der Aktionsleiste geändert.

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

enter image description here

Da meine Primärfarbe dunkelblau ist, sollte ich wahrscheinlich eines der Themen verwenden, bei denen in der Aktionsleiste eine helle Textfarbe verwendet wird, da der schwarze Text schwer zu lesen ist.

Ausblenden der Aktionsleiste und Verwenden einer Symbolleiste

Der springende Punkt bei der Verwendung von Theme.AppCompat anstelle von Theme.Material ist, dass wir älteren Versionen von Android) erlauben können, unser Materialdesign-Design zu verwenden. Das Problem ist, dass ältere Versionen von Android unterstützt die ActionBar nicht. Aus diesem Grund wird in der Dokumentation empfohlen, die ActionBar auszublenden und Ihrem Layout eine Symbolleiste hinzuzufügen. Um die ActionBar auszublenden, müssen Sie eine der Optionen NoActionBar themes. Die folgenden Bilder zeigen die Symbolleiste mit ausgeblendeter Aktionsleiste.

enter image description here

Aber was ist, wenn ich so etwas wie ein Lichtthema mit einer DarkActionBar haben möchte? Da ich NoActionBar verwenden muss, ist das keine Option.

Überschreiben des App-Themas

Hier kommt ThemeOverlay ins Spiel. Ich kann das Dark ActionBar-Thema in meinem Toolbar-XML-Layout festlegen.

<Android.support.v7.widget.Toolbar
    ...
    Android:background="?attr/colorPrimary"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

So können wir endlich den gewünschten Effekt erzielen. Das Dark.ActionBar-Thema überlagert das Light-App-Thema für diesen besonderen Anlass.

enter image description here

  • App-Thema: Theme.AppCompat.Light.NoActionBar
  • Thema der Symbolleiste: ThemeOverlay.AppCompat.Dark.ActionBar

Wenn das Popup-Menü hell sein soll, können Sie Folgendes hinzufügen:

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

Weitere Studie

Ich habe dies durch Experimentieren und durch Lesen der folgenden Artikel gelernt.

136
Suragch