Développez votre première application Android

Affichage d'une question

Tout d'abord, il est nécessaire de récupérer une question dans le modèle de données, grâce à la méthode getQuestion() de la classe QuestionBank. Pour mettre à jour l'affichage, sachant qu'il sera nécessaire de le faire plusieurs fois au cours du jeu, le plus simple consiste à créer une méthode dédiée. Cette méthode peut prendre en paramètre une instance de Question puis en afficher les valeurs. Le squelette de la méthode serait donc :

private void displayQuestion(final Question question) {
// Set the text for the question text view and the four buttons
}

Je vous laisse écrire le code correspondant, je suis sûr que vous n'avez pas besoin de moi pour cette partie !

Sélection de la réponse

Lorsque le joueur sélectionne une réponse, il faut intercepter son clic sur le bouton. Comme nous l'avons vu précédemment, il est nécessaire d'ajouter un listener sur chaque bouton, en implémentant l'interface View.OnClickListener. Nous pourrions naïvement écrire le code suivant pour chaque bouton :

mAnswerButton1.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
      // Handle click on the first button
   }
});

Cela fonctionnerait très bien, mais aurait pour conséquence une duplication de code très nette. Or, dupliquer du code, c'est mal : davantage d'octets à gérer, plus de lignes, donc plus de bugs, davantage de traitement processeur, un réchauffement climatique plus rapide, et des dauphins qui meurent.

Au lieu de créer une classe anonyme qui implémente l'interface View.OnClickListener,  nous allons plutôt implémenter cette interface au niveau de la classe GameActivity elle-même ! Ainsi, la méthode onClick() ne sera définie qu'une seule fois. Ce qui donne :

public class GameActivity extends AppCompatActivity implements View.OnClickListener

Vous constatez que la ligne est soulignée en rouge. En effet, Android Studio détecte que vous n'avez pas implémenté toutes les méthodes de l'interface. Pour récupérer automatiquement la liste des méthodes à implémenter et générer le squelette correspondant, appuyez sur  ALT + Insert  sur Windows, ou  ⌘ + N  sur Mac, et sélectionnez Implement Methods... Vous pouvez également taper  CTRL + I  directement.

Toujours dans la méthode onCreate(), n'oubliez pas de préciser que la classe elle-même sera désormais le listener de l'événement de clic :

mAnswerButton1 = findViewById(R.id.game_activity_button_1);
mAnswerButton2 = findViewById(R.id.game_activity_button_2);
mAnswerButton3 = findViewById(R.id.game_activity_button_3);
mAnswerButton4 = findViewById(R.id.game_activity_button_4);

// Use the same listener for the four buttons.
// The view id value will be used to distinguish the button triggered
mAnswerButton1.setOnClickListener(this);
mAnswerButton2.setOnClickListener(this);
mAnswerButton3.setOnClickListener(this);
mAnswerButton4.setOnClickListener(this);

La méthode onClick() sera désormais appelée à chaque fois que l'utilisateur cliquera sur un des quatre boutons de réponse.

Vérification de la réponse

Dans la signature de la méthode onClick(), vous constatez que le paramètre passé en entrée est une vue. Cette vue correspond au bouton sur lequel l'utilisateur a cliqué (vous pourriez tout à fait récupérer le bouton associé en effectuant un cast). De ce fait, il vous suffit simplement de comparer les widgets précédemment référencés grâce à findViewById() et la vue passée en paramètre, pour déterminer le bouton sur lequel l'utilisateur a cliqué.

int index;

if (v == mAnswerButton1) {
   index = 0;
} else if (v == mAnswerButton2) {
   index = 1;
} else if (v == mAnswerButton3) {
   index = 2;
} else if (v == mAnswerButton4) {
   index = 3;
} else {
   throw new IllegalStateException("Unknown clicked view : " + v);
}

Rappelez-vous, dans le modèle de donnée, nous avions défini l'index de la réponse correcte pour chaque question. Je vous laisse chercher par vous-même afin de déterminer si la réponse sélectionnée par l'utilisateur est la bonne.

Affichage de la réponse

Comme vous l'avez vu sur la vidéo de présentation du jeu, lorsque l'utilisateur sélectionne une réponse, un message est affiché en bas de l'écran. Ce message s'affiche pour une durée assez courte puis disparaît automatiquement. Il s'agit d'un message de type Toast. Son utilisation est très simple, et sa construction s'effectue en appelant la méthode statique makeText(). Cette méthode demande trois paramètres :

• le contexte de l'application (généralement l'activité elle-même) ;

• le texte à afficher ;

• la durée d'affichage. La classe Toast fournit deux durées prédéfinies : LENGTH_SHORT et LENGTH_LONG, correspondant respectivement à 2 secondes et 3,5 secondes. Vous pouvez définir vous-même la durée d'affichage en utilisant la méthode setDuration() sur l'instance de Toast.

Une fois l'objet Toast construit, il suffit d'appeler la méthode show() sur l'instance pour l'afficher. Vu que vous êtes aussi flemmards que moi, vous pouvez chaîner les appels pour gagner du temps :

Toast.makeText(this, "Correct!", Toast.LENGTH_SHORT).show();

Retrouvez ces différentes étapes dans la vidéo ci-dessous :

• Il faut toujours penser à réfactorer son code. Si on identifie du code similaire, il peut être bon de le découper.

• Pour afficher une petite pop-up temporaire en bas de l’écran, on peut utiliser la méthode Toast.makeText().show().

Vous savez maintenant mettre en œuvre une architecture MVC, en interrogeant le modèle pour récupérer de l'information et la présenter à l'utilisateur. Vous commencez à avoir une application fonctionnelle ! Rendez-vous dans le chapitre suivant pour gérer le score du joueur.