En un
art铆culo anterior, vimos c贸mo usar temas y estilos a nivel de c贸digo, usando la vista personalizada como ejemplo. En este art铆culo, veamos varias formas de dise帽ar un elemento ui est谩ndar, y en particular SwitchCompat.
Contenido
IntroduccionNuevo estilo para switchStyleEstilo de dise帽oEstilo en el tema. El tema se asigna a trav茅s del Manifiesto.Estilo en el tema. El tema se asigna mediante programaci贸n.Otra vistaIntroduccion
No siempre el dise帽o predeterminado del elemento de interfaz de usuario est谩ndar se adapta al dise帽ador. Veamos c贸mo cambiar la apariencia de un elemento usando el ejemplo de SwitchCompat.
Para resolver el problema, necesitamos:- Crea tu propio estilo para SwitchCompat.
- Establezca de alguna manera este estilo SwitchCompat.
Hay varias formas de designar un estilo SwitchCompat, por ejemplo:- Especifique para cada vista en el dise帽o de pantallas a trav茅s del atributo de estilo.
- Cree un tema con un atributo switchStyle anulado y asigne este tema en el manifiesto para toda la aplicaci贸n o actividad espec铆fica. Esto cambiar谩 el aspecto de la vista para toda la aplicaci贸n / actividad.
- El tema tambi茅n se puede configurar mediante programaci贸n en el c贸digo de activaci贸n. Si es necesario, se puede cambiar sobre la marcha.
Nuevo estilo para SwitchCompat
En los recursos, cree un nuevo estilo MySwitchStyle, herede el dise帽o de Widget.AppCompat.CompoundButton.Switch configurando parent. Es posible que no herede, pero luego debe especificar todos los valores, incluso los que no planeamos cambiar.
<style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> </style>
Para cambiar algo, debe redefinir los atributos requeridos. Los atributos se pueden encontrar en la
documentaci贸n.En la documentaci贸n vemos varios atributos. Se indican como si estuvi茅ramos accediendo a ellos en c贸digo (por ejemplo, como R.styleable.SwitchCompat_android_thumb). Decodificar茅 solo una parte de ellos para que no haya dudas. El prop贸sito del resto es f谩cil de entender a partir de la documentaci贸n.
- android: thumb - recurso para la parte m贸vil de SwitchCompat
- track - recurso para la parte fija de SwitchCompat
- thumbTint: le permite pintar la parte m贸vil con los colores deseados seg煤n el estado de SwitchCompat
- trackTint: le permite colorear la parte estacionaria con los colores deseados seg煤n el estado de SwitchCompat
Como ejemplo, cambie el color del pulgar (c铆rculo): deje que sea naranja cuando est茅 encendido y verde cuando est茅 apagado. Feo, pero claramente.
Necesitaremos un selector en la carpeta de colores de nuestros recursos. Archivo 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>
Ahora configure el atributo thumbTint en nuestro estilo.
<style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> <item name="thumbTint">@color/selector_switch_thumb</item> </style>
Ahora todos los SwitchCompat, que de alguna manera obtuvieron el estilo MySwitchStyle, se ver谩n de una nueva manera.
Estilo de dise帽o
La forma m谩s trivial e inflexible.
- El estilo se aplica cuando se infla el recurso de dise帽o.
- No podemos influir en el software de ninguna manera.
- Es inconveniente indicar cada vez en el dise帽o. Y podemos olvidarlo.
<androidx.appcompat.widget.SwitchCompat android:text="Themed switch" style="@style/MySwitchStyle" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
Estilo en el tema. Tema asignado a trav茅s del manifiesto
Cree un tema AppTheme y establezca el valor del atributo switchStyle. El valor es nuestro estilo 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>
El tema se puede especificar en el manifiesto para toda la aplicaci贸n.
<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>
O para una actividad espec铆fica
<activity android:name=".MainActivity" android:theme="@style/CustomTheme"> </activity>
Ahora todos los SwitchCompat tendr谩n un nuevo aspecto. Sin cambios en el dise帽o.
- Pros: podemos cambiar la apariencia de toda la aplicaci贸n de inmediato.
- Contras: sobre la marcha no puedes cambiarlo.
Estilo en el tema. El tema se asigna mediante programaci贸n.
Para configurar el tema para la activaci贸n mediante programaci贸n, debe llamar al m茅todo de activaci贸n setTheme (themeResId).
Cambiemos el tema de la actividad seg煤n el estado del 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() } } }
- Instale el tema mediante programaci贸n llamando a setTheme. Se debe llamar al m茅todo antes de super.onCreate (savedInstanceState). En onCreate, inicializamos fragmentos (cuando lo est谩n).
- Establezca el estado inicial del Switch seg煤n el tema.
- Instalamos un oyente que, al cambiar el Switch, cambia el tema en la configuraci贸n y reinicia la actividad a trav茅s del m茅todo de activaci贸n recreate ().
Resultado
El resto del c贸digo <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>
Otra vista
Para redefinir el estilo de SwithView para toda la aplicaci贸n, redefinimos el valor del atributo switchStyle, podemos adivinar que tales atributos existen para otra Vista.
Por ejemplo:
- editTextStyle
- checkboxStyle
- radioButtonStyle
驴C贸mo buscarlos? Acabo de ver la fuente a trav茅s de Android Studio.
Entramos en el tema, mantenga presionada la tecla Ctrl, haga clic en el padre de nuestro tema. Vemos c贸mo los chicos de Google describen el tema. Observamos qu茅 atributo est谩 determinado y de qu茅 estilo podemos heredar. Lo usamos
Una pieza del tema 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>
Recursos
developer.android.com/guide/topics/ui/look-and-feel/themesdeveloper.android.com/reference/android/support/v7/widget/SwitchCompat.html#xml-attributesPSEl art铆culo no pretende ser una referencia completa. C贸digo intencionalmente acortado. Establec铆 la tarea para dar una comprensi贸n general: c贸mo funciona y por qu茅 es necesario. Luego, todo se busca f谩cilmente en la documentaci贸n y en los recursos est谩ndar.