Dans un
article précédent, nous avons examiné comment utiliser les thèmes et les styles au niveau du code, en utilisant la vue personnalisée comme exemple. Dans cet article, examinons plusieurs façons de styliser un élément d'interface utilisateur standard, et en particulier SwitchCompat.
Table des matières
PrésentationNouveau style pour switchStyleStyle de mise en pageStyle dans le sujet. Le sujet est attribué via le manifeste.Style dans le sujet. Le thème est attribué par programme.Autre vuePrésentation
La conception par défaut de l'élément d'interface utilisateur standard ne convient pas toujours au concepteur. Voyons comment changer l'apparence d'un élément à l'aide de l'exemple de SwitchCompat.
Pour résoudre le problème, nous avons besoin de:- Créez votre propre style pour SwitchCompat.
- Définissez en quelque sorte ce style SwitchCompat.
Il existe plusieurs façons de désigner un style SwitchCompat, par exemple:- Spécifiez pour chaque vue dans la disposition des écrans via l'attribut de style.
- Créez un thème avec un attribut switchStyle substitué et affectez ce thème dans le manifeste pour l'application entière ou l'activité spécifique. Cela changera l'apparence de la vue pour l'ensemble de l'application / activité.
- La rubrique peut également être définie par programme dans le code d'activation. Si nécessaire, il peut être modifié à la volée.
Nouveau style pour SwitchCompat
Dans les ressources, créez un nouveau style MySwitchStyle, héritez la conception de Widget.AppCompat.CompoundButton.Switch en définissant le parent. Vous ne pouvez pas hériter, mais vous devrez alors spécifier toutes les valeurs, même que nous ne prévoyons pas de modifier.
<style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> </style>
Pour changer quelque chose, vous devez redéfinir les attributs requis. Les attributs se trouvent dans la
documentation.Dans la documentation, nous voyons plusieurs attributs. Ils sont indiqués comme si nous y accédions en code (par exemple, comme R.styleable.SwitchCompat_android_thumb). Je n'en décode qu'une partie pour qu'il n'y ait aucun doute. Le but du reste est facile à comprendre à partir de la documentation.
- android: thumb - ressource pour la partie mobile de SwitchCompat
- track - ressource pour la partie fixe de SwitchCompat
- thumbTint - vous permet de peindre la partie mobile dans les couleurs souhaitées en fonction de l'état de SwitchCompat
- trackTint - vous permet de colorer la partie fixe dans les couleurs souhaitées en fonction de l'état de SwitchCompat
Par exemple, changez la couleur du pouce (cercle) - qu'il soit orange lorsqu'il est allumé et vert lorsqu'il est éteint. Moche, mais clairement.
Nous aurons besoin d'un sélecteur dans le dossier couleur de nos ressources. Fichier 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>
Maintenant, définissez l'attribut thumbTint dans notre style.
<style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> <item name="thumbTint">@color/selector_switch_thumb</item> </style>
Désormais, tous les SwitchCompat, qui ont en quelque sorte obtenu le style MySwitchStyle, auront une nouvelle apparence.
Style de mise en page
La manière la plus banale et inflexible.
- Le style est appliqué lors du gonflement de la ressource de mise en page.
- Nous ne pouvons en aucun cas influencer les logiciels.
- Il n'est pas pratique d'indiquer chaque fois dans la mise en page. Et nous pouvons oublier.
<androidx.appcompat.widget.SwitchCompat android:text="Themed switch" style="@style/MySwitchStyle" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
Style dans le sujet. Sujet attribué via le manifeste
Créez un thème AppTheme et définissez la valeur de l'attribut switchStyle. La valeur est notre style MySwitchStyle.
<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> </resources>
Le thème peut être spécifié dans le manifeste pour l'ensemble de l'application.
<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>
Ou pour une activité spécifique
<activity android:name=".MainActivity" android:theme="@style/CustomTheme"> </activity>
Maintenant, tous les SwitchCompat auront un nouveau look. Aucun changement de disposition.
- Avantages - Nous pouvons changer l'apparence de l'application entière immédiatement.
- Inconvénients - à la volée, vous ne pouvez pas le changer.
Style dans le sujet. Le thème est assigné par programme
Pour définir le thème d'activation par programme, vous devez appeler la méthode d'activation setTheme (themeResId).
Modifions le thème de l'activité en fonction de l'état du Switch.
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() } } }
- Installez le thème par programme en appelant setTheme. La méthode doit être appelée avant super.onCreate (savedInstanceState). Dans onCreate, nous initialisons des fragments (lorsqu'ils le sont).
- Définissez l'état initial du commutateur en fonction du sujet.
- Nous installons un écouteur qui, lors du changement de Switch, modifie le thème dans les paramètres et redémarre l'activité via la méthode d'activation recreate ().
Résultat
Le reste du code <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>
Autre vue
Pour redéfinir le style de SwithView pour toute l'application, nous avons redéfini la valeur de l'attribut switchStyle, nous pouvons deviner que de tels attributs existent pour d'autres vues.
Par exemple:
- editTextStyle
- checkboxStyle
- radioButtonStyle
Comment les chercher? Je regarde juste la source via Android Studio.
Nous allons dans le sujet, maintenez la touche Ctrl enfoncée, cliquez sur le parent de notre sujet. Nous regardons comment les gars de Google décrivent le sujet. Nous regardons quel attribut est déterminé et de quel style nous pouvons hériter. Nous l'utilisons.
Un morceau du thème 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>
Les ressources
developer.android.com/guide/topics/ui/look-and-feel/themesdeveloper.android.com/reference/android/support/v7/widget/SwitchCompat.html#xml-attributesPSL'article ne prétend pas être une référence complète. Code volontairement raccourci. J'ai fixé la tâche de donner une compréhension générale - comment cela fonctionne et pourquoi il est nécessaire. Ensuite, tout est facilement recherché dans la documentation et dans les ressources standard.