Vos premiers pas en Android – Partie II

teachme2

Alors cette pause café, elle fait du bien ? J’espère que vous avez repris des forces car on va repartir sur le même rythme que la première partie !

Quoi vous n’avez pas lu mon précédent article ? comme je suis généreux je vous remets le lien http://tutos-android-france.com/vos-premiers-pas-en-android-partie-1/ , pas de triche on lit la première partie avant d’entamer la seconde.

Vous vous souvenez où nous nous sommes arrêté ? Un petit rappel ne peut pas faire de mal. Alors nous étions en train de jouer avec les Layouts dans le dossier res/. Nous avions réussi à afficher une image sur notre smartphone.

Pour ce second tutoriel, nous allons continuer à explorer le dossier de ressources, qui comme vous avez pu le remarquer contient de nombreux éléments essentiels à notre application.

Les menus

Que retrouve-on dans le dossier menu ? A quoi servent les fichiers contenus dans le répertoire ? Nous allons répondre à ces deux questions dans un instant.

menu

Vous pouvez remarquer que le répertoire menu contient un fichier nommer “menu_main.xml”. On prend le risque de l’ouvrir ? Moi j’ai pris le risque, j’aime vivre dangereusement, voici ce qu’il contient :

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" >

</menu>

Avant d’expliquer le contenu du fichier, est-ce que quelqu’un sait de quel menu nous sommes en train de parler ? Une petite précision s’impose.

Si vous avez un smartphone Android, vous avez pu constater que les boutons d’actions du style envoyer, partager, modifier etc… Se trouvent dans une barre se situant en haut de votre écran. Cette barre se nomme l’ActionBar. C’est dans celle-ci que nos fichiers menu vont s’afficher. Si vous avez suivi le tuto à la lettre, votre ActionBar devrait ressembler à ça

Capture d’écran 2015-02-25 à 09.37.20

La question que tout le monde se pose, à quoi servent les trois petits points ? En langage Android on appelle cet element l’overflow, il contient pour le moment notre menu. Cliquez dessus, on voit un item qui se nomme Settings.

Capture d’écran 2015-02-25 à 09.51.23

Je peux à présent retourner vous expliquez le contenu de notre fichier “menu_main.xml”.

Intéressons nous à certains attributs d’un item :

  • android:title, permet de définir le nom de l’item qui sera afficher dans notre menu
  • app:showAsAction, permet de spécifier comment et quand l’item apparaît hors de l’overflow, vous avez pour le moment never qui signifie que l’item apparaîtra toujours dans l’overflow, vous pouvez essayez de mettre always et voir le changement.
  • android:icon, permet de mettre un icône correspondant à l’action (le texte sera affiché si l’item se trouve dans l’overflow)

Réalisons maintenant un menu un peu plus évolué pour mettre en oeuvre nos nouvelles connaissances, voici ce que doit contenir le menu :

  • L’item settings, n’appartenant plus à l’overflow
  • Un item launcher, représenté par une icône (l’image ic_launcher fera l’affaire) et n’appartenant pas à l’overflow
  • Et deux items test1,test2 affiché dans l’overflow

Je vous met ce que votre fichier “menu_main.xml” doit contenir et le résultat que vous devez obtenir dans l’application. Essayez par vous même, ce sera mieux pour votre compréhension.

<menu 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"
    tools:context=".MainActivity">

    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        app:showAsAction="always" />

    <item
        android:title="@string/launcher"
        android:icon="@drawable/ic_launcher"
        app:showAsAction="always" />

    <item
        android:title="@string/test1"
        app:showAsAction="never" />

    <item
        android:title="@string/test2"
        app:showAsAction="never" />

</menu>

Capture d’écran 2015-02-25 à 10.09.53

C’était plutôt simple non ? Vous savez maintenant afficher un menu en Android, nous apprendrons plus tard à s’en servir.

Le répertoire values

Ce répertoire porte très bien son nom il va contenir toutes les valeurs de notre applications, textes, dimensions, couleurs etc …

Prenons ensemble fichier par fichier et expliquons leur contenu.

dimens.xml

Ce fichier va permettre de déclarer des dimensions dans notre application, je vous vois déjà avec vos grands yeux me dire “Bah quand nous avons ajouté des paddings, nous avons déclaré nos valeurs dans le fichier layout directement”. Oui mais, imaginez vous, vous décidez d’aligner plusieurs textes (une centaine)  à 15 dip de la gauche de votre écran par exemple. Et d’un seul coup, vous vous dîtes mince c’est trop proche, j’aurais du mettre à 30dip, mais la flemme de repasser sur tout les textes. Bah voici le cas où il faut utiliser le fichier dimens.

On explique le fonctionnement ?  Ce fichier, comme d’ailleurs la plupart des fichiers du dossier values est très simple à comprendre et à utiliser. Je prend une ligne du fichier pour vous l’expliquer.

<dimen name="activity_horizontal_margin">16dp</dimen>

Alors il faut comprendre que ce fichier fonctionne avec des couples clé/valeur. Nous allons définir la clé à l’aide de l’attribut name et la valeur sera comprise entre les deux tags dimen.

Pour utiliser cette dimension dans un layout, c’est très simple, vous utilisez “@dimen/clé”. Ca doit vous dire quelque chose, les paddings dans activity_main.xml était déclarer avec ce principe avant qu’on les changent .

strings.xml

Le fichier strings.xml reprend le même principe que le fichier dimen, c’est à dire une association clé valeur, à la seule différence qu’on l’utilise avec “@string/identifiant_texte”. 

<string name="bonjour">Bonjour</string>
<string name="tuto">Tutoriel</string>

Un prochain chapitre dédié à l’internationalisation de l’application détaillera plus précisément comment utiliser ce fichier afin de permettre à notre application d’afficher des textes adaptés à la langue du smartphone.

colors.xml

A noter que de base Android Studio ne créé pas de fichier colors.xml, je vous conseille de le faire, il est dans la même ligné que les deux prédécesseurs avec l’utilisation de couples clé/valeur. Son utilisation s’effectue avec “@color/identifiant_couleur”. 

Les couleurs ont le format suivant :

  • #RGB
  • #ARGB
  • #RRGGBB
  • #AARRGGBB

Avec A: alpha, R: rouge, G: vert, B: bleu

<color name="mon_vert">#00AA00</color>
<color name="mon_rouge_transparent">#AAFF0000</color>

Pour créer le fichier rien de plus simple, clic droit sur le dossier values,  New > Values ressource file et comme nom colors.xml.

styles.xml

Un style c’est quoi chef ? Oui vous pouvez m’appeler chef comme je vous donne de bonnes recettes 😀

Alors un style c’est une collection de propriétés (attributs) qui vont spécifier le format et le look d’un objet ou d’un conteneur. On va pouvoir spécifier dans le style la hauteur, la largeur, une couleur de texte, la taille du texte et plein d’autres choses.

Un exemple ça vaut peut être mieux que plein de blabla non ? Prenons un TextView

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/on_teste_un_style"
     android:textColor="@color/bleu_creer"/>

Nous allons mettre tout les attributs dans un style sauf le texte. “Pourquoi mettons nous ces attributs dans un style ?”. Nous faisons ceci toujours dans le soucis dé réutilisabilité. Qu’es aquo ? De pouvoir réutiliser le code à plusieurs endroits. Nous imaginons toujours notre centaine de TextView, et on veut qu’ils soit tous écrit en bleu, d’une taille et d’une largeur spécifique. Bah dans ce cas là, nous allons utiliser un style.

Voici comment on déclare un style

<style name="NotreSyle">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:color">@color/bleu_creer</item>
</style>

Donc on donne un nom à notre style qui sera la clé pour l’utiliser. Et on déclare chaque attribut comme des items. Voyons maintenant son utilisation sur notre TextView.

<TextView
    style="@style/NotreSyle"
    android:text="@string/on_teste_un_style"/>

On voit que contrairement au autre attribut que nous n’allons pas chercher notre style avec le préfixe android:.  On utilise ensuite notre style comme tout les autres couples clé/valeur.

Bon alors ce second tutoriel pas trop dur ? Nous avons vu énormément de choses aujourd’hui ! Alors n’hésitez pas à sortir vous défouler un peu, on est plus efficace si on essaye pas de se bourrer le crâne alors un peu d’air ne vous feras pas de mal. Je vous retrouve donc dans la troisième partie plus frais que jamais

4 commentaire sur “Vos premiers pas en Android – Partie II

    1. Pour obtenir ce menu il faut indiquer à l’Activity quel menu afficher. Pour cela il faut surcharger la méthode onCreateOptionsMenu(Menu menu). Dans notre cas cela donnera :

      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
      MenuInflater inflater = getMenuInflater();
      inflater.inflate(R.menu.menu_main, menu);
      return true;
      }

  1. Voilà donc un bon article, bien passionnant. J’ai beaucoup aimé et n’hésiterai pas à le recommander, c’est pas mal du tout ! Elsa Mondriet

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *