• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/4/19

Créez une seconde activité

Log in or subscribe for free to enjoy all this course has to offer!

Introduction

Dans la première partie de ce cours, nous avons créé une première activité, permettant de récupérer le prénom de l'utilisateur et de démarrer le jeu. Dans cette deuxième partie, nous allons créer une seconde activité. Cette activité permettra d'afficher le contenu du jeu. Elle sera démarrée par la première activité lorsque l'utilisateur cliquera sur le bouton de lancement du jeu.

Vous vous demandez sûrement comment fonctionne le jeu ! C'est une demande légitime. C'est très simple : TopQuiz va poser une série de quatre questions à l'utilisateur, choisies aléatoirement parmi une banque de plusieurs questions. Pour chaque question, il aura le choix entre quatre réponses possibles. Par exemple :

Un aperçu de notre superbe application
Un aperçu de notre superbe application

Configuration de la nouvelle activité

Création des fichiers

Pour rappel, une activité est généralement composée d'une classe Java et de son fichier layout associé. Positionnez-vous dans l'arborescence de votre projet, au niveau du répertoire dans lequel est contenue la classe MainActivity créée précédemment. Faites un clic droit dessus, puis sélectionnez l'option New > Activity > Empty Activity.

Une nouvelle fenêtre s'affiche, vous permettant de configurer le nom de l'activité et de son fichier layout. Sachant que cette activité va gérer le jeu, nous l'appellerons logiquement GameActivity. Laissez cochée la case Generate Layout File : le nom du fichier layout généré doit être activity_game, ce qui convient parfaitement. Laissez également cochée la case Backwards Compatibility (App Compat). Cliquez sur le bouton Finish.

Création du layout

L'interface de cette nouvelle activité va contenir les éléments suivants :

  • L'intitulé de la question posée à l'utilisateur ;

  • Les quatre réponses possibles, chacune représentée par un bouton.

Pour ce faire, ouvrez le fichier activity_game.xml situé dans le répertoire res/layout, puis modifiez le code comme suit :

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ponroy.florian.topquiz.GameActivity">

    <TextView
        android:id="@+id/activity_game_question_text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:textColor="@color/colorPrimary"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:textSize="18sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Question?"></TextView>

    <Button
        android:id="@+id/activity_game_answer1_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:textColor="@color/colorAccent"
        android:background="@android:color/white"
        android:textSize="20sp"
        android:text="Answer1"/>

    <Button
        android:id="@+id/activity_game_answer2_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:textColor="@color/colorAccent"
        android:background="@android:color/white"
        android:textSize="20sp"
        android:text="Answer2"/>

    <Button
        android:id="@+id/activity_game_answer3_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:textColor="@color/colorAccent"
        android:background="@android:color/white"
        android:textSize="20sp"
        android:text="Answer3"/>

    <Button
        android:id="@+id/activity_game_answer4_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:textColor="@color/colorAccent"
        android:background="@android:color/white"
        android:textSize="20sp"
        android:text="Answer4"/>
    
</LinearLayout>

Vous devez déjà être familiers avec certains attributs, tels que les marges, le texte à afficher ou les identifiants assignés aux éléments. Veuillez noter que les identifiants sont obligatoires, ce sont eux qui permettront de référencer les éléments depuis le code et de les mettre à jour dynamiquement. Néanmoins, d'autres doivent vous interpeller.

L'attribut android:textSize permet de spécifier une taille spécifique pour la police. L'unité à utiliser le sp (alors que c'est le dp pour les distances, rappelez-vous). N'hésitez pas à vous référer à cette page du Material Design pour avoir les idées plus claires.

L'attribut android:textColor permet de spécifier quelle police de couleur utiliser, pour un champ texte ou un bouton.

L'attribut android:background prend le même paramètre que textColor, mais permet pour sa part de préciser la couleur d'arrière plan de la majorité des éléments (bouton, champ texte, layout, etc).

L'attribut android:textStyle permet de préciser le style à utiliser pour une police. Vous avez le choix entre bold (gras), italic (italique) ou normal, la valeur par défaut.

Enfin, le dernier attribut très important est android:layout_weight. C'est un attribut spécifique aux enfants d'un LinearLayout. Il permet de préciser le poids d'un élément par rapport aux autres. Je m'explique. Si vous assignez un poids identique pour tous les éléments (par exemple 1), tous ces éléments auront la même taille. Si vous assignez un poids égal à 2 à l'un des éléments, alors sa taille sera deux fois plus importante que celle des  autres. Essayez de faire varier le poids de l'élément TextView du code ci-dessus, afin de voir le résultat. N'hésitez pas à consulter cette page pour avoir une explication plus détaillée.

Le résultat produit doit être identique à la capture ci-dessous. Amusez-vous à modifier les différents attributs pour donner un style qui vous est propre !

Ce que vous devez obtenir, peu ou prou
Ce que vous devez obtenir

Branchement des widgets

Maintenant que les éléments sont définis dans l'interface, il est nécessaire de les référencer dans le code. Sachant que vous devenez des experts Android, cela ne devrait pas vous poser de problème ! Un petit coup de pouce pour les plus étourdis :

  • Déclarez une variable membre privée pour chaque élément que vous souhaitez référencer (vous devriez avoir une variable de type TextView et quatre de type Button) ;

  • Dans la méthode onCreate, branchez chaque widget en utilisant la méthode findViewById().

Lancement de la nouvelle activité

C'est bien beau tout ça, mais comment lancer cette nouvelle activité ? En cliquant sur le bouton Let's Play de l'écran d'accueil ! Certes, mais cela ne vous avance guère.

Rappelez-vous : nous avions commencé à implémenter la méthode onClick dans la classe MainActivity. Cette méthode est appelée à chaque fois que l'utilisateur appuie sur le bouton. Et c'est à cet endroit précis que nous allons démarrer notre nouvelle activité.

Pour démarrer une activité, Android propose la méthode startActivity(). Cette méthode propose plusieurs signatures. Celle qui nous intéresse est la suivante (c'est la plus simple) :

public void startActivity(Intent intent)

Cette méthode permet de communiquer avec le système d'exploitation Android en lui demandant de démarrer une activité donnée. Pour préciser quelle activité lancer, un objet spécifique est utilisé : Intent. Lorsque la méthode startActivity() est appelée, l'objet interne Android ActivityManager inspecte le contenu de l'objet Intent et démarre l'activité correspondante.

Diagramme de démarrage d'une nouvelle activité

L'objet Intent, quant à lui, peut être créé de différentes façons. Parmi les nombreux constructeurs de la classe Intent, celui qui nous intéresse est le suivant :

public Intent(Context packageContext, Class<?> cls)

Le premier paramètre correspond au contexte de l'application. Pour faire simple, cela correspond à l'activité appelante (car la classe Activity hérite de la classe Context). Le second paramètre correspond à la classe de l'activité à démarrer.

Je vous l'accorde, cela peut sembler bien compliqué pour démarrer une simple activité. Mais dans les faits, cela se traduit simplement par les deux lignes suivantes :

Intent gameActivity = new Intent(MainActivity.this, GameActivity.class);
startActivity(gameActivity);

Ajoutez ces deux lignes dans la méthode onClick, lancez l'application, cliquez sur le bouton, et vous devez voir apparaître la nouvelle activité. Pour revenir à l'activité précédente, utilisez le bouton de retour Android en bas à gauche de l'écran.

Lorsque vous avez créé l'activité GameActivity, Android Studio a automatiquement mis à jour le fichier AndroidManifest.xml situé dans le répertoire app/manifests. en ajoutant une entrée de type activity. Cette entrée est indispensable, car elle permet à Android de retrouver la classe correspondant à l'activité que vous souhaitez démarrer. Essayez de supprimer cette entrée puis de relancer l'application : plantage assuré !

Conclusion

La mécanique principale de l'application est en place. Les deux activités sont créées et branchées entre elles. A l'avenir, vous constaterez que le mécanisme d'Intent est très puissant : il permet de démarrer une activité appartenant à une autre application que vous avez développée, ou à une application système Android. Par exemple, c'est ce mécanisme que vous utiliserez pour lancer l'activité de prise de photo proposée nativement par Android. 

Example of certificate of achievement
Example of certificate of achievement