Viquillibres

Style

Un style (estil) és un conjunt de propietats com l'altura, color de font, color de fons, etc, que especifiquen l'aparença i el format d'una View o de diferents widgets.

Els estils es defineixen en un recurs XML, aquest està separat del XML que especifica el disseny i es troba a /res/values, normalment amb el nom styles.xml.

En Android, podem dir que els estils comparteixen una filosofia similar a les fulles d'estil CSS del disseny web: permeten separar el disseny del contingut.


Característiques d'un style

modifica

Per a començar a crear un estil hem de saber alguns detalls,

Localització del recurs XML : 

  /res/values/styles.xml . Per defecte l'arxiu s'anomena styles.xml, però es pot canviar el nom, s'utilitza com el seu ID.

Referència del recurs per aplicar-ho : 

  Al disseny XML : style="@style/nom_estil


Elements

modifica

<resources> Node arrel (necessari). 

    Sense atributs.


<style> Defineix un estil únic. Conté <item> elements. Els seus atributs: 

    name 
    Cadena (necessari). Nom per l'estil, ID de recurs per aplicar l'estil a una vista, activitat o aplicació.

    parent
    Recurs d'estil. Referència a un estil del que hereda propietats.


<item> Defineix una sola propietat per l'estil. Ha de ser fill d'un element <style>. Els seus atributs: 

    name 
    Recurs d'atribut (necessari). Nom de la propietat de l'estil que es definirá, amb un prefix de paquet si és necessari 
    (ex. android:textColor).


Jerarquia de l'style

modifica

Quan pensem en dissenyar la nostra aplicació, hem de tenir en compte la jerarquia d'estil d'Android. En general, ha d'usar temes i estils tant com sigui possible per a mantenir la coherència a l'aplicació. Si s'han especificat els mateixos atributs en diversos llocs, la següent llista determina quins atributs s'apliquen en última instància.

La llista està ordenada de major prioritat a menor:

  1. Aplicació de l'estil a nivell de caracter o paràgraf a través de trams de text a TextViewclases derivades.
  2. Aplicació d'atributs programàticament.
  3. Aplicació d'atributs individuals directament a una vista.
  4. Aplicació d'un estil a una vista.
  5. Estil predeterminat.
  6. Aplicació d'un tema a una col·lecció de Views, una activitat o tota la seva aplicació.
  7. Aplicació de cert estil específic a la View, com establir TextAppearance a un TextView.


TextAppearance

modifica

L'estil té una limitació, només es pot aplicar un estil a una vista.

Per a un TextView es pot aplicar l'atribut TextAppearance que funciona de forma molt similar a l'estil, permet definir un estil específic del text mentre es deixa l'estil de la View disponible per a altres usos.


Per exemple, la mida del text, si usem atributs com android: textAppearance a l'style podem usar directament els valors sp específics predefinits: 

  android:textAppearance="@android:style/TextAppearance.Large"   => 22sp
 
  android:textAppearance="@android:style/TextAppearance.Medium"  => 18sp
  
  android:textAppearance="@android:style/TextAppearance.Small"   => 14sp



Nota: si es defineix qualsevol atribut de text directament a la vista o en un estil, aquests valors substituirien els valors TextAppearance.

Exemple TextAppearance

modifica

En aquest exemple podem veure com aplicar TextAppearance sobre un TextView.

textView.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        
        ...
        android:textAppearance="@android:style/TextAppearance.Small" 
        ...    
    />

</androidx.constraintlayout.widget.ConstraintLayout>
 




Resultat : podem veure com el que modifica aquest TextAppearance estableix la mida del text del TextView a 14sp.


Herència

modifica

En la creació d'un estil es permet especificar un estil ja existent que proporcionarà propietats heretables al teu estil.

Es pot usar per a heretar propietats d'un estil existent i, posteriorment, definir només les propietats que desitgis canviar o agregar. Pots heretar propietats d'estils propis o incorporats al framework.

Herència d'un estil predefinit

modifica

En el moment de crear els nostres propis estils podem estendre un dels estils existents del framework. Per estendre un estil, cal especificar l'estil que volem estendre mitjançant l'atribut parent, d'aquesta manera haurem heretat els atributs de l'estil i podrem modificar els atributs o fer-ne de nous. Per exemple, podem heretar l'aparença predeterminada de text que conté la plataforma Android i modificar-la.

parent.xml (   )
Informació addicional 
<source lang="xml">
<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>
 




  Conclusió : hem creat l'estil GreenText heretant l'aparença de TextAppearance, però canviant el color del text.

Herència d'un estil propi

modifica

Si el que es desitja és heretar un estil propi, no s'ha d'usar l'atribut parent. Només cal indicar el nom de l'estil que es desitja heretar com a prefix del nom del nou estil (separts per un punt). Per exemple, per crear un estil nou que hereta l'estil Exemple, per canviar el color a blau hauríem de fer el següent:

exemple.xml (   )
Informació addicional 
<source lang="xml">
<style name="Exemple.Blue">
        <item name="android:textColor">#221177</item>
    </style>
 




 Conclusió : podem observar com no hem fet servir l'atribut parent, com que l'atribut name comença amb l'estil que volem heretar, l'estil hereta totes les propietats de l'estil Exemple modificant en aquest cas el color del text.

Podem fer referència a aquest estil amb @style/Exemple.Blue .

Creació d'un style partint d'un widget personalitzat

modifica

Podem crear els nostres estils a partir d'un layout ja creat amb les seves propietats en un arxiu xml. Per fer-ho, hem de prémer el botó dret del ratolí sobre el layout i escollir l'opció Refactor/Extract/Style. Ens apareixerà una finestra nova on podrem seleccionar les propietats del layout i donar-li nom al nostre nou estil. En acabar, els atributs es quedaran guardats com un nou estil en l'arxiu style.xml i el layout tindrà una nova propietat que invoca aquest estil, substituint les propietats seleccionades anteriorment.

Dins de l'arxiu style.xml, tindrem un llistat de tots els estils creats amb el seu nom i les seves propietats respectius. Per invocar un estil en un layout diferent, solament hem d'escriure la propietat style dins d'un layout: 

style="@style/Nom_Style"

El layout agafarà les propietats d'aquest estil i quedarà visualitzat a la nostra aplicació. S'ha de tenir en compte que les propietats del layout tenen més prioritat que les de l'estil, és a dir, si el layout i l'estil tenen una propietat que canvia el color, el canvi de color del layout tindrà preferència.

Exemple

modifica

En el següent exemple crearem un estil a partir d'un botó i després farem servir l'estil amb un botó diferent.

Modifiquem alguns atributs de Button, com per exemple canviar el color de fons a vermell:

botons.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<resources>
<Button
  android:layout_width="100dp"
  android:layout_height="100dp"
  android:background="#FF0000"
  android:text="vermell"
  android:id="@+id/normal_button" 
/>
</resources>
 




 
Fig 1 Finestra nou Style





Premem el botó dret del ratolí a sobre de Button i seleccionem l'opció Refactor/Extract/Style, sortirà la finestra que es mostra a la Fig. 1, escollirem les propietats de la mida del botó (layout_width / layout_height) i anomenarem l'estil com Exemple. Els atributs seran substituïts per un nou atribut que crida al nostre estil:

botons.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<resources>
<Button
   android:background="#FF0000"
   android:text="vermell"
   android:id="@+id/red_button"
   style="@style/Exemple" 
/>
</resources>
 




L'estil que hem creat es troba a l'arxiu style.xml amb les propietats que tenia el botó:

style.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<resources>
<style name="Exemple" >
     <item name="android:layout_width">100dp </item>
     <item name="android:layout_height">100dp</item>
</style>

</resources>
 




Ara crearem un nou botó de color blau i assignarem l'estil que s'ha creat Exemple:

botons.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<resources>
<Button
   android:background="#0000CD"
   android:text="blau"
   android:textColor="#FFFFFF"
   android:id="@+id/blue_button"                                                                                           
   style="@style/Exemple" 
/>
</resources>
 




Ara al botó blau se li assigna les mateixes propietats que el botó vermell.

L'aparença de l'aplicació seria com es mostra a Fig.2.

 
Fig.2 Botons vermell i blau aplicant style Exemple
















Aplicació d'un style personalitzat als widgets

modifica

Tots els widgets del framework o llibreries de suport tenen un estil per defecte.

Si es vol aplicar un estil de widget diferent, es pot fer amb l'atribut style al fitxer de disseny (.xml). 

  Nota : si volem un estil propi no hem d'utilitzar l'atribut parental crear l'estil, ja que amb aquest estariem heretant d'un altre estil existent.


Exemple Button

modifica

En aquest exemple canviem l'estil per defecte d'un Button per un estil personalitzat.

Podem veure a styles.xml com hem heretat l'estil ja existent Widget.AppCompat.Button.Colored i hem modificat el color de fons i el color del text.

styles.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<resources>
...
<style name="BotoStyle" parent="Widget.AppCompat.Button.Colored">
        <item name="android:background">#ffffff</item>
        <item name="android:textColor">#8B0000</item>
    </style>
...
</resources>
 




ButtonStyle.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<Button
        ...

        style="@style/BotoStyle"

        ...
/>
 




 Resultat : com a resultat obtenim el botó amb el nostre estil personalitzat. (Veure Fig.3)

 Nota : Per cada botó que creem nou, ens sortirà amb l'estil per defecte, si el volem amb el nostre estil també, només ens farà falta afegir l'estil ja creat " style="@style/BotoStyle" ".


Podem veure un botó amb el seu estil per defecte i el botó amb el nostre estil personalitzat:

 
Fig.3 Resultat exemple Button















Exemple Switch

modifica

En aquest exemple podem veure com modificar l'estil per defecte que té un Switch al crear-lo i aplicar el nostre estil personalitzat.

styles.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<resources>
...
<style name="SwitchStyle" parent="Theme.AppCompat.Light">
        <item name="android:background">#ffffff</item>
        <item name="android:textColor">#8B0000</item>
        <item name="android:colorControlActivated">#8B0000</item>
</style>
...
</resources>
 




SwitchStyle.xml (   )
Informació addicional 
<source lang="xml">
//Provat en la versió 3.5 d'Android Studio i emulador API 27
<Switch
        ...

        style="@style/SwitchStyle"

        ...
/>
 




 Resultat : podem veure com obtenim un Switch amb el nostre estil personalitzat. (Veure Fig.4)


Si al crear un nou Switch volem aplicar també el nostre estil personalitzat només hem d'aplicar al nostre layout (.xml) l'estil sobre aquest nou widget.

 
Fig.4 Resultat exemple Switch















Pàgines de referència

modifica

Style Resource | Android Developers

Style & Themes | Android Developers

Obtingut de «https://ca.wikibooks.org/w/index.php?title=Style&oldid=63827»