Les boîtes de dialogue

Dans toutes les applications, qu’elles soient mobiles ou non, on est amené à utiliser des boîtes de dialogue pour donner des informations à l’utilisateur, lui proposer un choix, etc…

Android fournit une boîte de dialogue par défaut qui n’est vraiment pas belle à mon goût et qui de toute façon ne correspondait pas à l’utilisation que je voulais en faire. Il me fallait une boîte dont le graphisme corresponde à celui de mon jeu et qui puisse contenir toute sorte d’éléments, comme des étoiles, ou des instructions d’aide.

Premiers dialogues

La classe Dialog fournie par Android étant très utile, j’ai essayé dans un premier temps de la « customiser ». N’ayant pas beaucoup de connaissances en java au démarrage du projet, j’ai créé un layout par boîte de dialogue. Chaque fois que j’avais besoin d’une nouvelle boîte, je copiais le layout le plus ressemblant et je le modifiais. Et je testais le graphisme de la boîte 15 fois pour ajuster les marges…

C’était fastidieux, le résultat ne me plaisait pas toujours, et quand je voulais changer un peu le graphisme global du jeu, je devais faire une passe sur tous les layouts.

Quand j’ai commencé à mettre en place les aides dynamiques, j’ai compris que j’étais arrivé au bout des possibilités de ce système !

Dialogues dynamiques

La solution à mon problème était de charger le contenu des dialogues dynamiquement. Pour cela, il fallait avoir une enveloppe de base dont la hauteur puisse être variable : l’utilisation d’un ScrollView s’imposait.

Voici un extrait du code de l’enveloppe custom_dialog.xml :

Le RelativeLayout rl_dialog_color permet de changer la couleur de fond de la boîte de dialogue dans le code. Les éléments sont rajoutés dynamiquement dans le LinearLayout help_scroll_ll. Oups, une coquille !

Voici un exemple de création dynamique de boîte de dialogue dans mon jeu :

N.B.: La fonction getCustomDialog me permet de définir quels boutons je veux afficher et quelle apparence leur donner (couleur et image), ainsi que de précharger la boîte de dialogue avec mes préférences par défaut (pas de titre, fond transparent, etc…).
La fonction addCustomDialog rajoute quand à elle les Listeners aux vues définies dans la variable viewstoclick et l’animation d’apparition de la boîte, puis appelle la fonction show().

Échantillon de résultats :

Astuce : Les éléments dynamiques dialog_element_% ont des fonds soit transparents, soit à composante transparente, ce qui permet d’avoir un résultat graphique homogène.

Aller plus loin

Le fait de pouvoir charger les éléments de dialogue dynamiquement permet entre autres de les charger ou non en fonction de variables paramètres, voire de variables présentes dans la base de données. C’est un mix des deux qui m’a permis de mettre en place le système d’aides dynamiques.

Extrait du chargement des aides :

Le mode « TIPS » permet d’afficher une aide en particulier quand un booster ou un type de fleur apparaît pour la première fois. Le mode « PAGE » est appelé quand le joueur appuie sur le bouton « ? ». Il peut alors voir toutes les aides qu’il a déjà débloquées.

Les images des aides sont des fichiers XML (layouts) dont le nom est indiqué dans une colonne de la table UserHelp dans la base de données. Les textes d’aides sont dans le fichiers strings.xml, ce qui permet de les traduire dans toutes les langues.