Big Tuto Android : Chapitre 6 : L’écran de jeu - 3

 

   

 

Big Tuto ANDROID

Chapitre 6 : L’écran de jeu, partie 3 : Des couleurs, que diable !

 

Tutoriel présenté par : Stéphane Barthélémy (Stephantasy)
Date d'écriture : 8 mars 2018
Date de révision : -

 

 

   1.   Préambule

 

   Un certain temps s’est écoulé depuis le dernier chapitre. Une bonne occasion pour pointer une [force] / [faiblesse] (rayez la mention inutile ) d’Android Studio. Il a été mis à jour !  Une force, car il évolue rapidement et s’améliore sans cesse.  Une faiblesse, car ça change souvent et cela peut causer des problèmes dans notre projet ! 

   Ainsi, de nouveaux API sont sortis, mais rien de gênant dans notre cas, nous resterons avec la version 25. Par contre, l’environnement de développement a évolué… Quand cela arrive, 2 choix :

• On ignore ! (Mais on passe à côté de nouveautés, voire de corrections de bugs.) 

• On met notre IDE à jour et on « Upgrade » notre projet. (Notre projet risque de ne plus fonctionner.) 

   J’ai donc choisi… de le mettre à jour !  Pourquoi faire simple quand on peut faire compliqué, me direz-vous ?  D’abord parce que je préfère être à jour, car en général les améliorations en valent la peine. Il faut évoluer avec son temps, ma p’tite dame !  Par contre, j’avoue qu’en plein milieu d’un projet, il faut y réfléchir à deux fois ! C’est un exercice risqué et le jeu n’en vaut probablement pas la chandelle (surtout que votre application fonctionnera même si elle est développée avec une ancienne version d’Android Studio ; enfin, pas trop vieille quand même…  ).

   Pour conclure, cela nous fera un bon exercice ! 

   Donc, suite à la mise à jour de mon IDE, le design de mon activité ne s’affiche plus et j’ai un Warning m’indiquant que le « buildToolsVersion » 25.0.2 est obsolète et que la version 26.0.2 sera utilisée à la place. Il faut donc le modifier :

   Dans l’onglet projet, ouvrir : Gradle Scripts > build.gradle

   Puis remplacez « buildToolsVersion "25.0.2" » par « buildToolsVersion "26.0.2" »

   Voilà, c’était facile !  Mais ce ne sera pas toujours le cas. Parfois, les dépendances ne sont plus compatibles avec la nouvelle version. Cependant, il existe alors sûrement une version à jour à utiliser. En revanche, il est possible que certaines des fonctionnalités que vous utilisiez ne soient plus supportées ! Il faut alors les modifier en conséquence et cela peut apporter une quantité de travail non négligeable ; l’option d’ignorer une mise à jour est alors de mise. 

 

 

 

   2. Introduction

 

   Ça y est, nous avons une application fonctionnelle. Par contre, qu’est-ce qu’elle est laide ! Nous allons donc consacrer cette partie du tutoriel à l’esthétique. Cependant, les goûts et les couleurs ne se discutant pas, je vous encourage donc à utiliser vos images et vos couleurs. 

 

 

   Au programme, nous allons réarranger un peu notre activité. Ensuite, nous ajouterons un fond d’écran et nous arrangerons notre texte (couleur, taille, etc.). Puis on s’attaquera au bouton. Nous nous occuperons de la grille de jeu, pour enfin ajouter un petit bout de code.

 

   3. Réarrangement

 

   Avant de commencer, nous allons replacer un peu les éléments à l’écran. Pour cela, nous allons nous débarrasser du « LinearLayout », car il n’est pas d’une grande utilité. Nous allons ensuite replacer les éléments correctement.

 

      a. Mode Design

 

   1. Allez dans le XML (onglet « Text ») et supprimez le « LinearLayout » du code en n’oubliant pas la balise de fin. Notre texte et notre bouton se retrouvent alors en haut à droite.

   2. En mode « Design », sélectionnez le bouton. Depuis la fenêtre « Preview », glissez le bouton en bas au centre.

 

 

   3. Ensuite, utilisez les petits ronds autour du bouton pour le centrer et le lier au bas de l’écran. Pour cela, cliquez sur le rond, puis tirez vers le bord de l’écran. Faites-le des deux côtés, puis vers le bas. Cette action permet de centrer le bouton et de le garder dans le bas de l’écran. Vous obtiendrez l’image ci-dessous.

 

 

   4. Faites la même chose avec le texte. Par contre, au lieu de le lier au bas de l’écran, vous le liez au bouton « New Game ».

 

 

   5. Enfin, faites de même avec la grille et liez-la au haut de l’écran et au texte en dessous. Ainsi, tout est lié ; cela permet de garder la même mise en forme, peu importe les dimensions de l’écran !

 

 

 

      b. Mode Text

 

   Faisons un peu de ménage dans le code XML. Le ConstraintLayout est assez pratique pour créer une interface adaptative (Responsive, en anglais), par contre il gonfle le code XML avec des choses inutiles.

   Ainsi, supprimez les propriétés « layout_constraintHorizontal_bias », « layout_marginLeft » et « layout_marginRight ». Au final, votre XML devrait ressembler à cela :

 

   4. Ajout d’un fond d’écran

 

   Commençons par l’activité la plus simple : ajouter une image en fond d’écran. Comme d’habitude, on peut soit utiliser les propriétés de l’objet sur lequel on travaille (onglet « Design »), soit travailler directement dans le XML (onglet « Text »). Personnellement, je préfère la deuxième option, mais libre à vous d’employer l’une ou l’autre des méthodes.

   Pour ajouter une image, il faut d’abord qu’elle soit disponible dans le projet. Dans l’arborescence du projet, faites un clic droit sur « drawable » et choisissez « Show in Explorer ». Le dossier contenant les ressources apparait.

 

 

   Dans le dossier « drawable », copiez-y l’image que vous souhaitez utiliser.

 

 

   Retournez dans le projet, dans « activity_game_screen.xml » en mode Design et cliquez sur le « ContraintLayout ». Cliquez sur « View all atributes » en bas. Dans la propriété « background », cliquez sur les 3 petits points […] et choisissez votre image. Voilà, nous avons un fond ! (Je vous avais dit que c’était facile…  )

 

   5. Le texte

 

   Arrangeons un peu le texte. Nous allons commencer par le centrer. Pour cela, utilisons la propriété « textAlignment » en choisissant tout simplement « center ».

   Ensuite on va lui appliquer une taille de « 30sp » avec la propriété « textSize » et on va le mettre en italique avec « textStyle ».

 

      a. Ajout d’une couleur

 

   Enfin, nous allons lui appliquer une couleur. Pour cela, nous allons utiliser le fichier « color.xml » qui se trouve dans « res > values ». Cela va nous permettre de pouvoir réutiliser la couleur n’importe où dans notre projet. Il y a déjà des couleurs par défaut et nous allons y ajouter la nôtre avec cette ligne :

 

   Chose pratique, Android Studio place un petit carré avec la couleur correspondante dans la colonne à gauche ! 

   Pour appliquer la couleur, retournez dans l’activité utilisez la propriété « textColor » et cliquez sur […]. Dans la fenêtre « Resources », choisissez « Color ».

 

 

   Le code XML pour la personnalisation de notre texte est le suivant :

 

   6. Le bouton

 

   Pour le bouton, nous allons d’abord créer un style. Cela va permettre de réutiliser ce que l’on crée et ainsi de l’appliquer à d’autres éléments.

   Un style est une ressource qui permet d’appliquer des formes et des couleurs à un objet. Il permet également de modifier son design en fonction de certaines actions. Ainsi, pour notre bouton, nous allons lui définir une apparence et celle-ci changera lors d’un clic.

 

      a. Shape : bouton

 

• Cette ressource est le design de notre bouton.

   Commençons par créer une forme à laquelle nous allons associer des propriétés. Faites un clic droit sur le dossier « drawable » (dans « res ») et choisissez « Drawable resource file ». Puisque nous allons réutiliser cette ressource, nous lui donnerons un nom assez générique. Entrez le nom « shape_gold » et faites ok.

 

 

   Un nouveau fichier XML est créé. Nous voulons créer une forme rectangulaire, nous allons donc remplacer la balise existante (« selector ») par celle-ci :

 

 

   Commençons par ajouter un dégradé de couleurs. Pour cela il faut utiliser la balise « gradient » et remplir les attributs « startColor » et « endColor » :

 

 

   Par contre,  je veux que la couleur claire de mon dégradé soit en haut et la couleur foncée en bas. J’ajoute donc l’attribut « angle » qui permet d’appliquer une rotation au dégradé :

 

 

   Ensuite, nous allons arrondir les coins. Pour cela, utilisons la balise « corner » avec l’attribut « radius » qui définit l’arrondi :

 

 

   Finalement, ajoutons un contour avec la balise « stroke » avec ses attributs d’épaisseur « width » et de couleur « color » :

 

 

   Voilà, notre forme est terminée ! 

 

 

      b. Shape : bouton activé

 

• Cette ressource est le design de notre bouton lorsqu’on clique dessus.

   Procédons de la même façon que précédemment en créant une nouvelle forme et en inversant simplement le sens du dégradé. Ce qui donne pour notre « shape_button_ pressed »:

 

 

 

      c. Selector

 

• Cette ressource contient les actions associées à l’apparence de la forme du bouton. Elle applique le bon design en fonction de l’action.

   Maintenant que nous avons les apparences de notre bouton au repos et en action, nous allons créer un fichier qui va s’occuper d’appliquer la bonne forme à notre bouton : le « selector ».

   Ajoutez un nouveau « Drawable resource file » et nommez-le « action_button ». Dans ce fichier, nous allons définir quelle forme appliquer à notre bouton au repos et lorsqu’il est activé (on appuie dessus).

   Cela se fait avec la balise « item » et les attributs « drawable », pour la forme à appliquer, et « state_pressed », pour l’état actif du bouton. Ce qui donne :

 

 

   Ce qui se traduit par :

• lorsqu’on clique sur le bouton, on applique la forme « shape_button_pressed »

• sinon on applique la forme « shape_gold ».

 

 

      d. Couleur du texte

 

• Cette ressource contient les actions associées à l’apparence du texte du bouton. Elle applique le bon design en fonction de l’action.

   Pour finir, nous allons changer la couleur du texte, également en fonction de son état. Pour cela, créons un nouveau « selector » et, comme précédemment, ajoutons deux « item » en utilisant cette fois l’Attribut « color ».

 

 

 J’ai également ajouté une couleur dans le fichier « Color.xml », car nous l’utiliserons autre part :

 

 

 

      e. Association au bouton

 

   Bien, nous disposons de tous les éléments dont nous avons besoins pour décorer et animer notre bouton ! 

   Dans le fichier XML de notre activité, il ne reste plus qu’à ajouter les propriétés « background » et « textColor » à notre bouton. Nous associons à chaque attribut les « selector » précédemment créés.

 

 

   Ne reste plus qu’à lancer l’émulateur et à admirer le résultat ! 

 

 

 

   7. La grille

 

   Nous allons colorier notre grille en lui ajoutant un fond. Puis nous nous occuperons des boutons. Comme notre bouton « New Game », ces derniers apparaitront différemment lors d’un clic. De plus, on leur ajoutera une couleur spéciale lorsque la partie sera terminée en faisant ressortir la combinaison gagnante.

 

      a. Le fond

 

   Pour le fond de la grille, rien de compliqué ! Nous allons simplement réutiliser le fond de notre bouton « New Game ». Pour cela, il suffit de définir l’arrière-plan de notre « TableLayout » et d’ajouter un « Padding » afin de laisser apparaitre les bords.

 

 

      b. Les boutons

 

    Pour les boutons de la grille, que nous nommerons « cellules » afin de ne pas confondre avec le bouton « New Game », nous allons créer de nouvelles ressources, similaires à celles du bouton.

   Mais avant cela, nous allons rendre nos cellules carrées (et corriger le Warning par la même occasion ) ! Dans l’onglet « Design », dans la partie « Attibutes », choisissez le style « Widget.AppCompat.Button.Small ».

 

 

   À présent, créons les ressources nécessaires, soit :

• shape_cell (la couleur de notre cellule au repos)
• shape_cell_pressed (notre cellule lorsqu’on appuie dessus)
• shape_cell_win (notre cellule lorsqu’elle fait partie de la combinaison gagnante)
• action_cell (le « selector » associant le bon design)

 

   Ensuite, à chacune des cellules, il faudra ajouter les attributs suivants :

 

 

   La marge permet d’espacer un peu les cellules.

   Je vous laisse créer ces fichiers en appliquant la même méthode que pour le bouton. Voici les couleurs que j’ai choisies :

 

   De gauche à droite : Cellule au repos, cellule activée, cellule gagnante.

 

 Petite astuce : au lieu de créer les fichiers en partant de zéro, vous pouvez cliquer sur un fichier existant et choisir « Show in Explorer ». Il vous suffit de dupliquer le fichier « shape_gold » et de le renommer « shape_cell ». Ne reste alors qu’à modifier les couleurs ! 

 

 

   8. Style pour un texte

 

   Nous avons déjà modifié les attributs de notre texte pour améliorer son rendu. Mais voici une autre méthode qui permet de réutiliser notre paramétrage.

   Tout comme pour les boutons, on peut définir puis appliquer un style à un texte. Dans le dossier « values » se trouve un fichier nommé « styles.xml ». Nous allons ajouter notre style dans ce fichier.

 

 

   Et dans les attributs de notre texte, nous supprimons tout ce qui est à présent inutile et on ajoute la commande « style ».

 

 

 

   9. Ajustement du code

 

   Voilà, notre design est terminé, mais il reste un détail à régler.

   En effet, nous avons utilisé l’attribut « android:foreground="@drawable/shape_cell_win" » pour nos cellules. Il va falloir le supprimer à l’initialisation et l’ajouter sur la combinaison gagnante. Bon, la suppression était déjà en place, car j’avais oublié de l’ôter… 

 

 

   Ensuite, il faut l’appliquer à la combinaison gagnante lorsque la partie est terminée (s’il y a un vainqueur uniquement). Dans la classe « ActivityGameScreen », nous allons ajouter une méthode qui va appliquer la décoration aux cellules de la combinaison gagnante.

 

 

   Dans la méthode  « action_grille », la méthode « showWinner » est appelée lorsque « X » gagne (ce qui est impossible en l’état actuel de notre intelligence artificielle ) ou que « O » gagne.

 

 

 

   10. Conclusion

 

   Voilà, la première partie de ce tutoriel est terminé !  Vous avez une petite application fonctionnelle que vous pouvez déployer sur le Google Play Store, si le cœur vous en dit (une activité qui mériterait bien un chapitre, d’ailleurs ! ).

 

 

 

   Les prochains chapitres permettront d’enrichir notre jeu. Nous augmenterons sa complexité afin de découvrir d’autres notions essentielles au développement d’application avec Android Studio.

   Nous aborderons d’abord la gestion de l’orientation de l’écran, ce qu’il se passe si l’on reçoit un coup de téléphone lors d’une partie (aïe ! ), ainsi que la difficulté de rendre un affichage compatible sur différents appareils.

   Nous verrons également comment rendre notre application bilingue.

   Enfin, nous verrons comment ajouter des activités et les faire communiquer entre elles. Nous en profiterons pour parler de la sauvegarde des données.

 

   À bientôt !