Thèmes et Couleurs

Lorsque AS3 crée un projet avec une activité vide, il effectue pas mal de choses pour vous, et nous avons constaté certaines de ces abordages dans les deux exemples d’applications sur lesquels nous avons travaillé. Dans ce chapitre, nous allons nous intéresser un peu à l’esthétique. Nous ne nous intéresserons pas beaucoup à la conception d’interface utilisateur, car c’est un domaine vaste, qui dépasse largement le cadre de ce livre - et de mon expertise; Je n'ai pas été un gars de l'assurance-chômage. Mais nous allons examiner quelques solutions simples et rapides pour donner à nos applications une apparence décente.Créons un nouveau projet avec une activité vide et appelez-le StylesAndThemes; laissez le facteur de forme par défaut sur "Téléphone et tablettes".

Note            Un style est un ensemble d'attributs qui spécifient l'apparence et le format d'un objet de vue individuel. un style fait référence à la hauteur, à la couleur, à la police, etc. Un thème, en revanche, est un style appliqué à une activité ou à une application entière Nous n’avons jamais bousillé ces couleurs dans nos applications antérieures; nous laissons simplement AS3 décider de l'apparence de notre application (la figure 7-1 montre le thème par défaut d'une application), du moins en ce qui concerne la couleur. Si vous souhaitez créer une image de marque et donner une identité à votre application, nous pouvons commencer par personnaliser la couleur et le thème. 

Couleurs

Bien qu'il soit possible de spécifier la couleur pour chaque partie de l'application, cela peut s'avérer fastidieux et prendre beaucoup de temps. Un moyen plus simple serait de travailler avec des thèmes. Le thème général d’une application est contrôlé par le manifeste AndroidManifest (vous pouvez ouvrir le fichier manifeste à partir de la fenêtre de l’outil du projet, app app manifestes 

AndroidManifest).Android fait un usage intensif de XML, comme vous pouvez probablement le dire maintenant. En outre, la pratique consistant à référencer des valeurs, qu'il s'agisse de chaîne, de couleur, de style ou autre, est très répandue - vous la trouverez partout. Regardons deux entrées dans le fichier manifeste (voir Listing 7-1). 

Listing 7-1. AndroidManifest

<?xml version="1.0" encoding="utf-8"?>
 
<manifest package="com.ted.stylesandthemes" 
xmlns:android="http://schemas.android.com/apk/res/android">
 
  <application
    android:allowBackup="true" 
    android:icon="@mipmap/ic_launcher" 
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
 
  <activity android:name=".MainActivity">
 
      <intent-filter>
 
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
 
      </intent-filter>
 
    </activity>
 
  </application>
 
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest package="com.ted.stylesandthemes" 
xmlns:android="http://schemas.android.com/apk/res/android">

  <application
    android:allowBackup="true" 
    android:icon="@mipmap/ic_launcher" 
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"

  <activity android:name=".MainActivity">

      <intent-filter>

        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>

      </intent-filter>

    </activity>

  </application>

</manifest>

La notation @string signifie que nous référençons cette valeur à partir de app / res / values ​​/ strings.xml. C'est le moyen privilégié de définir des chaînes dans votre application. L'écriture des chaînes dans une ressource nous offre la possibilité de gérer les ressources de chaîne à partir d'un emplacement central; cela facilite également la facilité de changement et la localisation. Les ressources de chaînes et de styles peuvent être ouvertes à partir de la fenêtre de l'outil de projet (voir Figure 7-2).

app/res/values/strings.xml

<resources>

  <string name="app_name">StylesAndThemes</string>

</resources>

La notation @style signifie que nous référençons cette entrée à partir du fichier app / res / values ​​/ styles.xml. Dans ce fichier, il devrait y avoir une définition pour AppThemeDans le Listing 7-2, la valeur AppTheme qui est référencée à partir du fichier manifeste est définie. Tout d’abord, il n’a pas été construit à partir de rien; il hérite du thème DarkActionBar, mais il nous permet de personnaliser quelques couleurs. Trois styles sont définis dans les styles, mais vous pouvez en ajouter davantage si vous le souhaitez. Nous allons simplement travailler avec ces trois pour le moment. 

Note In previous versions of Android Studio, you may have needed to create /res/styles.xml file.

 En AS3, lorsque nous avons créé l'activité vide, le fichier de ressources de styles a été généré automatiquement.

Figure 7-2. colors.xml

Listing 7-2. /app/res/values/colors.xml

<resources>
 
  <!-- Base application theme. -->
 
  <style name="AppTheme" 
    parent="Theme.AppCompat.Light.DarkActionBar">
 
    <!-- Customize your theme here. -->
 
    <item name="colorPrimary">@color/colorPrimary</item>
 
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 
    <item name="colorAccent">@color/colorAccent</item>
 
  </style> </resources>

<resources>

  <!-- Base application theme. -->

  <style name="AppTheme" 
    parent="Theme.AppCompat.Light.DarkActionBar">

    <!-- Customize your theme here. -->

    <item name="colorPrimary">@color/colorPrimary</item>

    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="colorAccent">@color/colorAccent</item>

  </style> </resources>

colorPrimary, colorPrimaryDark et colorAccent ne sont pas (vraiment) définis dans styles.xml; au lieu de cela, nous trouvons une autre indirection nous renvoyant à un autre fichier de ressources. Cela peut parfois être agaçant, mais ces indirections sont nécessaires au nom de la facilité de gestion. Donc, vous devez vous y habituer.

Listing 7-3. /app/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
 
<resources>
 
  <color name="colorPrimary">#3F51B5</color>
 
  <color name="colorPrimaryDark">#303F9F</color>
 
  <color name="colorAccent">#FF4081</color>
 
</resources>

<?xml version="1.0" encoding="utf-8"?>

<resources>

  <color name="colorPrimary">#3F51B5</color>

  <color name="colorPrimaryDark">#303F9F</color>

  <color name="colorAccent">#FF4081</color>

</resources>

Si vous ouvrez le fichier colors.xml, nous pouvons enfin voir les valeurs hexadécimales des couleurs. AS3 vous montre les couleurs dans la gouttière de l'éditeur; la couleur change immédiatement lorsque vous modifiez les valeurs hexadécimales (Figure 7-3). Si vous souhaitez modifier la teinte de l'application, vous pouvez commencer par modifier ce fichier.

Figure 7-3. colors.xml in the main editor

Si vous avez besoin d’aide avec les valeurs hexadécimales des couleurs, il existe de nombreuses ressources Web pour cela; colorhexa.com est l’un de ces sites (www.color.hexa.com). Il présente des couleurs et des dégradés de couleurs spécifiques. Il est donc recommandé de l’utiliser lorsque vous souhaitez utiliser des valeurs hexadécimales de couleur. La palette de couleurs, cependant, est un vaste domaine et de nombreux principes et directives sont en jeu. Materialpalette est une autre bonne ressource pour les couleurs (www.materialpalette.com, illustrée à la figure 7-4). 

Figure 7-4. Materialpalette.com

Materialpalette est axé sur la conception Android, en particulier la conception matérielle. L'idée de base est de choisir deux couleurs et le site crée une palette pour vous. Maintenant, nous pouvons simplement copier les valeurs hexadécimales des couleurs primaires, foncées, accentuées et claires.

Listing 7-4. Customized colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

  <color name="colorPrimary">#009688</color>

  <color name="colorPrimaryDark">#00796B</color>

  <color name="colorAccent">#CDDC39</color>

  <color name="colorPrimaryLight">#B2DFDB</color>

</resources>

Basculez l'éditeur principal sur l'onglet activity_main pour voir le nouveau look de notre application (Figure 7-5).

Figure 7-5. activity_main with customized colors

Thèmes

L’apparence d’Android a évolué au fil des ans. À mesure que de nouveaux appareils et de nouvelles versions d'Android sont entrés, cela a également inauguré un nouvel aspect des applications. La figure 7-6 montre quelques instantanés des thèmes au fil des ans. Le tableau 7-1 répertorie certains des thèmes les plus importants et marquants d'Android. 

Table 7-1. Android Themes

Le thème par défaut des deux derniers projets que nous avons créés est Theme. AppCompat.Light. DarkActionBar. C’est un thème décent, et si vos besoins sont assez simples, il n’est peut-être pas nécessaire de poursuivre les travaux sur ce thème. Mais si vous souhaitez modifier l'apparence de votre application, vous pouvez commencer à essayer différents thèmes. Vous pouvez le faire en modifiant le thème parent dans styles.xml (comme illustré à la Figure 7-7).

Figure 7-7. Edit themes

Essayez de changer de thème plusieurs fois, puis revenez à activity_main (mode Création) pour pouvoir explorer les différents thèmes Android.