Geekly articles weekly

Android-Themen und -Stile ohne Magie. Und wie man sie mit SwitchCompat kocht


In einem früheren Artikel haben wir uns am Beispiel der benutzerdefinierten Ansicht mit der Verwendung von Themen und Stilen auf Codeebene befasst. In diesem Artikel sehen wir uns verschiedene Möglichkeiten an, ein Standard-UI-Element und insbesondere SwitchCompat zu formatieren.

Inhalt


Einführung
Neuer Stil für switchStyle
Layoutstil
Stil im Thema. Das Thema wird über Manifest zugewiesen.
Stil im Thema. Das Thema wird programmgesteuert zugewiesen.
Andere Ansicht

Einführung


Nicht immer passt das Standarddesign des Standard-UI-Elements zum Designer. Schauen wir uns am Beispiel von SwitchCompat an, wie Sie das Erscheinungsbild eines Elements ändern können.

Um das Problem zu lösen, brauchen wir:

  • Erstellen Sie Ihren eigenen Stil für SwitchCompat.
  • Irgendwie diesen SwitchCompat-Stil einstellen.

Es gibt verschiedene Möglichkeiten, einen SwitchCompat-Stil zu bestimmen, zum Beispiel:

  • Geben Sie für jede Ansicht im Layout der Bildschirme das Stilattribut an.
  • Erstellen Sie ein Thema mit einem überschriebenen switchStyle-Attribut und weisen Sie dieses Thema im Manifest für die gesamte Anwendung oder bestimmte Aktivität zu. Dadurch wird das Erscheinungsbild der Ansicht für die gesamte Anwendung / Aktivität geändert.
  • Das Thema kann auch programmgesteuert im Aktivierungscode festgelegt werden. Bei Bedarf kann es im laufenden Betrieb geändert werden.

Neuer Stil für SwitchCompat




Erstellen Sie in den Ressourcen einen neuen MySwitchStyle-Stil und erben Sie das Design von Widget.AppCompat.CompoundButton.Switch, indem Sie das übergeordnete Element festlegen. Sie dürfen nicht erben, müssen dann aber alle Werte angeben, auch die wir nicht ändern möchten.

<style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> </style>

Um etwas zu ändern, müssen Sie die erforderlichen Attribute neu definieren. Attribute finden Sie in der Dokumentation.

In der Dokumentation sehen wir mehrere Attribute. Sie werden so angezeigt, als würden wir im Code auf sie zugreifen (z. B. R.styleable.SwitchCompat_android_thumb). Ich werde nur einen Teil von ihnen entschlüsseln, damit es keinen Zweifel gibt. Der Zweck des Restes ist aus der Dokumentation leicht zu verstehen.
Im Code
In XML
SwitchCompat_android_thumb
Android: Daumen
SwitchCompat_thumbTint
thumbTint
SwitchCompat_track
verfolgen
SwitchCompat_trackTint
trackTint

  • android: thumb - Ressource für den beweglichen Teil von SwitchCompat
  • track - Ressource für den festen Teil von SwitchCompat
  • thumbTint - Mit dieser Option können Sie das bewegliche Teil je nach Status von SwitchCompat in den gewünschten Farben lackieren
  • trackTint - Ermöglicht das Färben des stationären Teils in den gewünschten Farben, abhängig vom Status von SwitchCompat

Ändern Sie beispielsweise die Farbe des Daumens (Kreises) - lassen Sie ihn orange, wenn er eingeschaltet ist, und grün, wenn er ausgeschaltet ist. Hässlich, aber klar.

Wir benötigen einen Selektor im Farbordner unserer Ressourcen. Datei selector_switch_thumb.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color = "@android:color/holo_orange_dark"/> <item android:color="@android:color/holo_green_light"/> </selector>

Stellen Sie nun das thumbTint-Attribut in unserem Stil ein.

 <style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> <item name="thumbTint">@color/selector_switch_thumb</item> </style>

Jetzt sehen alle SwitchCompat, die irgendwie den MySwitchStyle-Stil haben, neu aus.



Layoutstil


Der trivialste und unflexibelste Weg.

  • Der Stil wird angewendet, wenn die Layoutressource aufgeblasen wird.
  • Wir können Software in keiner Weise beeinflussen.
  • Es ist unpraktisch, jedes Mal im Layout anzugeben. Und wir können vergessen.

 <androidx.appcompat.widget.SwitchCompat android:text="Themed switch" style="@style/MySwitchStyle" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

Stil im Thema. Thema über Manifest vergeben


Erstellen Sie ein AppTheme-Design und legen Sie den Wert des switchStyle-Attributs fest. Wert ist unser MySwitchStyle-Stil.

 <resources> <style name="CustomTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!--    switchStyle --> <item name="switchStyle">@style/MySwitchStyle</item> </style> </resources>

Das Thema kann im Manifest für die gesamte Anwendung angegeben werden.

 <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/CustomTheme"><!--     --> </application>

Oder für eine bestimmte Aktivität

 <activity android:name=".MainActivity" android:theme="@style/CustomTheme"><!--    --> </activity>

Jetzt haben alle SwitchCompat ein neues Aussehen. Keine Änderung im Layout.

  • Vorteile - Wir können das Erscheinungsbild für die gesamte Anwendung sofort ändern.
  • Nachteile - Sie können es im laufenden Betrieb nicht ändern.

Stil im Thema. Das Thema wird programmgesteuert zugewiesen


Um das Thema programmgesteuert zu aktivieren, müssen Sie die Aktivierungsmethode setTheme (themeResId) aufrufen.

Lassen Sie uns das Thema der Aktivität abhängig vom Status des Switch ändern.

 private const val KEY_CUSTOM_THEME_CHECKED = "KEY_CUSTOM_THEME_CHECKED" class MainActivity : AppCompatActivity() { private val preference by lazy { PreferenceManager.getDefaultSharedPreferences(this) } override fun onCreate(savedInstanceState: Bundle?) { val isCustomThemeChecked = preference.getBoolean( KEY_CUSTOM_THEME_CHECKED, true ) if (isCustomThemeChecked) { setTheme(R.style.CustomTheme) } else { setTheme(R.style.StandardTheme) } super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) customThemeCheckbox.isChecked = isCustomThemeChecked customThemeCheckbox.setOnCheckedChangeListener { _, isChecked -> preference.edit() .putBoolean(KEY_CUSTOM_THEME_CHECKED, isChecked) .apply() recreate() } } }

  1. Installieren Sie das Thema programmgesteuert, indem Sie setTheme aufrufen. Die Methode muss vor super.onCreate (savedInstanceState) aufgerufen werden. In onCreate initialisieren wir Fragmente (wenn sie es sind).
  2. Stellen Sie den Ausgangszustand des Switches je nach Thema ein.
  3. Wir installieren einen Listener, der beim Ändern des Switch das Thema in den Einstellungen ändert und die Aktivität über die Aktivierungsmethode recreate () neu startet.

Ergebnis



Der Rest des Codes
 <resources> <style name="CustomTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="switchStyle">@style/MySwitchStyle</item> </style> <style name="StandardTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="MySwitchStyle" parent="Widget.AppCompat.CompoundButton.Switch"> <item name="thumbTint">@color/selector_switch_thumb</item> </style> </resources> 

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp" android:orientation="vertical"> <CheckBox android:text="CustomTheme" android:layout_width="match_parent" android:layout_height="wrap_content" android:saveEnabled="false" android:id="@+id/customThemeCheckbox"/> <androidx.appcompat.widget.SwitchCompat android:text="Themed switch" android:layout_marginTop="56dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/themedSwitch"/> </LinearLayout>


Andere Ansicht


Um den Stil für SwithView für die gesamte Anwendung neu zu definieren, haben wir den Wert des switchStyle-Attributs neu definiert. Wir können davon ausgehen, dass solche Attribute für andere Ansichten vorhanden sind.

Zum Beispiel:

  • editTextStyle
  • checkboxStyle
  • radioButtonStyle

Wie suche ich sie? Ich schaue mir die Quelle nur über Android Studio an.
Wir gehen in das Thema, halten die Strg-Taste gedrückt und klicken auf das übergeordnete Thema unseres Themas. Wir schauen uns an, wie die Leute von Google das Thema beschreiben. Wir schauen uns an, welches Attribut bestimmt wird und von welchem ​​Stil wir erben können. Wir benutzen es.

Ein Stück aus dem Thema Base.V7.Theme.AppCompat.Light.

 <item name="editTextStyle">@style/Widget.AppCompat.EditText</item> <item name="checkboxStyle">@style/Widget.AppCompat.CompoundButton.CheckBox</item> <item name="radioButtonStyle"> @style/Widget.AppCompat.CompoundButton.RadioButton </item> <item name="buttonStyle">@style/Widget.AppCompat.Button</item>

Ressourcen


developer.android.com/guide/topics/ui/look-and-feel/themes

developer.android.com/reference/android/support/v7/widget/SwitchCompat.html#xml-attributes

PS

Der Artikel erhebt keinen Anspruch auf vollständige Bezugnahme. Code absichtlich gekürzt. Ich habe mir die Aufgabe gestellt, ein allgemeines Verständnis zu vermitteln - wie es funktioniert und warum es benötigt wird. Dann ist in der Dokumentation und in den Standardressourcen alles leicht zu finden.

Source: https://habr.com/ru/post/de456178/

More articles:


All Articles