Android - Stili e temi

UN stylerisorsa definisce il formato e cerca un'interfaccia utente. Uno stile può essere applicato a una singola vista (dall'interno di un file di layout) o a un'intera attività o applicazione (dall'interno del file manifest).

Definizione degli stili

Uno stile è definito in una risorsa XML separata dall'XML che specifica il layout. Questo file XML risiede sottores/values/ directory del tuo progetto e avrà <resources>come nodo radice, obbligatorio per il file di stile. Il nome del file XML è arbitrario, ma deve utilizzare l'estensione .xml.

È possibile definire più stili per file utilizzando <style>ma ogni stile avrà il suo nome che identifica in modo univoco lo stile. Gli attributi di stile Android vengono impostati utilizzando<item> tag come mostrato di seguito -

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>
Il valore per <item> può essere una stringa di parole chiave, un colore esadecimale, un riferimento a un altro tipo di risorsa o un altro valore a seconda della proprietà dello stile.

Usare gli stili

Una volta definito lo stile, puoi usarlo nel tuo file di layout XML usando style attributo come segue -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView
      android:id="@+id/text_id"
      style="@style/CustomFontStyle"
      android:text="@string/hello_world" />

</LinearLayout>

Per comprendere il concetto relativo allo stile Android, puoi controllare Esempio di demo di stile .

Ereditarietà dello stile

Android supporta l'ereditarietà dello stile in modo molto simile al foglio di stile a cascata nel web design. È possibile utilizzarlo per ereditare le proprietà da uno stile esistente e quindi definire solo le proprietà che si desidera modificare o aggiungere.

Per implementare un tema personalizzato, crea o modifica MyAndroidApp / res / values ​​/ themes.xml e aggiungi quanto segue:

<resources>
   ...
   <style name="MyCustomTheme" parent="android:style/Theme">
   <item name="android:textColorPrimary">#ffff0000</item>
   </style>
   ...
</resources>

Nel tuo AndroidManifest.xml applica il tema alle attività che desideri applicare allo stile -

<activity
   android:name="com.myapp.MyActivity"
   ...
   android:theme="@style/MyCustomTheme"
   />

Il tuo nuovo tema verrà applicato alla tua attività e il testo è ora rosso vivo.

Applicazione di colori agli attributi del tema

La tua risorsa colore può quindi essere applicata ad alcuni attributi del tema, come lo sfondo della finestra e il colore del testo principale, aggiungendo elementi <item> al tuo tema personalizzato. Questi attributi sono definiti nel file styles.xml. Ad esempio, per applicare il colore personalizzato allo sfondo della finestra, aggiungi i seguenti due elementi <item> al tuo tema personalizzato, definito nel file MyAndroidApp / res / values ​​/ styles.xml -

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

Utilizzo di nove patch personalizzate con pulsanti

Un disegnabile a nove patch è un tipo speciale di immagine che può essere ridimensionato in larghezza e altezza mantenendo la sua integrità visiva. Nove patch sono il modo più comune per specificare l'aspetto dei pulsanti Android, sebbene sia possibile utilizzare qualsiasi tipo disegnabile.

un pulsante Campione di nove patch

Passaggi per creare pulsanti a nove patch

  • Salva questa bitmap come /res/drawable/my_nine_patch.9.png
  • Definisci un nuovo stile
  • Applica il nuovo stile del pulsante all'attributo buttonStyle del tuo tema personalizzato

Define a new Style

<resources>
   ...
      <style name="MyCustomButton" parent="android:Widget.Button">
      <item name="android:background">@drawable/my_nine_patch</item>
      </style>
   ...
</resources>

Apply the theme

<resources>
   ...
      <style name="MyCustomTheme" parent=...>
         ...
         <item name="android:buttonStyle">@style/MyCustomButton</item>
      </style>
   ...
</resources>

Temi Android

Spero tu abbia capito il concetto di stile, quindi ora proviamo a capire cos'è un Theme. Un tema non è altro che uno stile Android applicato a un'intera attività o applicazione, piuttosto che a una singola vista.

Pertanto, quando uno stile viene applicato come tema, ogni Viewnell'attività o nell'applicazione applicherà ogni proprietà di stile che supporta. Ad esempio, puoi applicare lo stessoCustomFontStyle stile come tema per un'attività e poi tutto il testo al suo interno Activity avrà un carattere verde a spaziatura fissa.

Per impostare un tema per tutte le attività della tua applicazione, apri il file AndroidManifest.xml file e modifica il file <application> tag per includere il android:themeattributo con il nome dello stile. Ad esempio:

<application android:theme="@style/CustomFontStyle">

Ma se desideri applicare un tema a una sola attività nella tua applicazione, aggiungi l'attributo android: theme solo al tag <activity>. Ad esempio:

<activity android:theme="@style/CustomFontStyle">

Esistono numerosi temi predefiniti definiti da Android che puoi utilizzare direttamente o ereditarli utilizzando parent attributo come segue -

<style name="CustomTheme" parent="android:Theme.Light">
   ...
</style>

Per comprendere il concetto relativo al tema Android, puoi controllare Esempio di demo del tema .

Disegnare la tavolozza dei colori

Il design del layout può essere implementato in base ai colori basati su di essi, ad esempio poiché il design seguente è progettato in base al colore (blu)

Il layout sopra è stato progettato in base al file style.xml, che ha posizionato in res/values/

<resource>
   <style name="AppTheme" parent="android:Theme.Material">	
      <item name ="android:color/primary">@color/primary</item>
      <item name ="android:color/primaryDark">@color/primary_dark</item>
      <item name ="android:colorAccent/primary">@color/accent</item>
   </style>
<resource>

Stili e temi predefiniti

La piattaforma Android offre un'ampia raccolta di stili e temi che puoi utilizzare nelle tue applicazioni. Puoi trovare un riferimento a tutti gli stili disponibili nel fileR.styleclasse. Per utilizzare gli stili elencati qui, sostituire tutti i trattini bassi nel nome dello stile con un punto. Ad esempio, puoi applicare il tema Theme_NoTitleBar con "@android: style / Theme.NoTitleBar". Puoi vedere il seguente codice sorgente per stili e temi Android: