English 
Français
Big Tuto ANDROID
Chapitre 3 : Notre première activité
Tutoriel présenté par : Stéphane Barthélémy (Stephantasy)
Date d'écriture : 6 juin 2017
Date de révision : -
1. Introduction
Nous avons créé notre nouveau projet avec, comme modèle, une activité vide.
À présent, nous allons explorer cette activité et voir de quoi est composée notre application. 
2. L’activité
Lors de la création de notre projet, Android Studio nous a demandé un nom d’activité. Mais qu’est-ce qu’une activité ? 
L’activité est le premier composant d'une application et permet l'interactivité avec l'utilisateur via une interface graphique. C’est une sorte de programme (activité) dans le programme (application). Chaque écran de l’application représente une activité. Ainsi, une application Android est composée d’une ou de plusieurs activités. Par contre, il ne peut y avoir qu’une seule activité exécutée à la fois !
À noter qu’il est possible d’avoir une seule activité contenant plusieurs écrans (création dynamique, Fragments).
Une activité est composée d’un Layout et d’une classe Java. Dans notre cas, l’activité est « activity_game_screen.xml », et la classe qui lui est associée est « GameScreen ».
À noter que tous les éléments qui se trouvent dans le dossier « res » sont nommés avec des minuscules ! Les classes Java sont en Camel Case.
A. Le Layout
Le Layout représente la partie graphique de l’activité et les informations le détaillant se trouvent dans un fichier de type XML.
Voyons à quoi cela ressemble. Double-cliquez sur « activity_game_screen.xml ».
Nous avons 3 fenêtres :
- Palette : C'est la liste des éléments permettant de composer nos écrans graphiques.
Il existe de nombreux éléments permettant de créer un écran (Layout, Widget, etc.). Nous en verrons quelques-uns en cours de route.
- Component Tree : C’est le contenu de notre activité, représenté par une hiérarchie d’objets.
- Preview : C'est ce à quoi ressemble notre activité, donc ce qui apparaîtra à l’écran.
Ceci n’est pas tout à fait vrai, car il arrive que le Preview diffère de l’affichage final. De plus, vous pourriez avoir des éléments qui apparaissent ou disparaissent en fonction des actions réalisées par l’utilisateur.
À noter que l’activité est la partie blanche au centre. La bande noire en bas correspond aux boutons de navigation de votre appareil et la bande bleue en haut contient le nom de l’application (cette option est désactivable).
Les onglets du bas permettent de naviguer entre le « Design » et son code au format XML. Cliquez sur « Text » pour afficher le code.
À droite de l’écran, cliquez sur « Preview ». Cela fait apparaitre et disparaitre la prévisualisation de l’écran.
B. Le code XML
Nous voici en présence du code décrivant notre activité.
|
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.android.meruvia.mylittletictactoe.GameScreen"> <TextView
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
|
De base, une activité contient toujours un Layout principal. Dans notre cas, il s’agit d’un « ConstraintLayout ». Ce dernier contient les autres éléments qui composent l’écran. Ici, nous pouvons voir qu’il contient un seul élément, nommé « TextView ».
Il existe de nombreux éléments, que l’on retrouve dans la palette. Cliquez dessus pour avoir un aperçu de l’objet (dans la fenêtre juste en dessous). Bien que la plupart des noms soient évocateurs, le site officiel et les ressources sur le web vous aideront à connaitre le fonctionnement de chacun. Nous aurons aussi l’occasion d’en découvrir quelques-uns ! 
Chacun de ces éléments contient une liste de paramètres qui le définissent. Certains sont obligatoires, mais la plupart sont optionnels et permettent de modifier l’élément.
Par exemple, les commandes suivantes indiquent à l’élément de s’étirer pour combler tout l’espace occupé par son parent. Pour le « ConstraintLayout », le parent est l’écran, donc il occupe tout l’écran.
|
android:layout_width="match_parent"
android:layout_height="match_parent"
|
Dans le cas du TextView, « wrap_content » indique que l’élément doit être de la taille de ce qu’il contient. Il sera donc aussi grand que le texte « Hello World! ».
|
android:layout_width="wrap_content"
android:layout_height="wrap_content"
|
À noter que le paramétrage d’un élément peut parfois devenir un vrai casse-tête car les paramètres qui le composent dépendent de l’objet lui-même, mais également de son parent ! 
Par exemple, TextView possède le paramètre « android:text » qui sert à lui indiquer le texte à afficher (« Hello World! » dans ce cas-ci ).
Mais le paramètre « app:layout_constraintBottom_toBottomOf » existe parce que TextView est un enfant de ConstraintLayout ! Dans un autre Layout, ce paramètre n’existerait pas pour TextView.
Il existe des centaines de paramètres et je tâcherai de vous présenter ceux qu’on utilisera au fur et à mesure.
Pour avoir un aperçu des paramètres disponibles rien que pour TextView, cliquez sur « Hello World! » dans le Preview, puis cliquez sur « View all properties » en bas de la fenêtre « Properties », qui est à droite.
C. La classe “GameScreen”
Après ce rapide survol de la composition graphique de notre activité, explorons la classe qui lui est associée. 
Ouvrez le fichier « GameScreen ». Voici ce qu’il contient :
|
package com.android.meruvia.mylittletictactoe;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle; public class GameScreen extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_game_screen); } } |
Ce code a été généré automatiquement par Android Studio. Il n’y a pas grand-chose ! Pour le moment, la seule action de la classe est d’afficher l’activité correspondante :
|
onCreate => Lors de la création de l’activité par Android…
setContentView(R.layout.activity_game_screen) => …affiche le Layout « activity_game_screen ».
|
Vous vous demandez sûrement : « Mais, qui exécute cette classe ?! » Et c’est une bonne question !
Vous vous souvenez du fichier « AndroidManifest.xml » dans le dossier « Manifests » ? Et bien la réponse est là !
D. Le Manifest
Ouvrez ce fichier et voyons ce qu’il contient.
Ce fichier représente le paramétrage de l’application. C’est ici qu’on déclare les activités qui composent notre application, qu’on demande les permissions (l’utilisation du répertoire du téléphone, par exemple), qu’on indique l’icône de notre application, son nom, etc.
Pour en revenir au lancement de notre classe, regardez le bout de code suivant :
Il indique à Android que, lors du démarrage de l’application, la classe « GameScreen » est celle qui doit être exécutée.
Plus tard, lors du développement de notre application, nous créerons un écran d’accueil. Nous devrons alors modifier le Manifest en conséquence.
3. L’émulateur
On va s’arrêter là pour ce chapitre. Mais avant cela, nous allons utiliser l’émulateur pour voir à quoi ressemble notre première activité !
Pour cela, il faut d’abord créer une instance de l’émulateur et le paramétrer. Ensuite, il faudra l'exécuter. Voyons ça dans l’ordre. 
A. Création
Cliquez sur « AVD Manager » en haut de l’écran.
Puis choisissez « Create Virtual Device… »
Là, nous choisirons « Phone » et le modèle « Nexus 5 » pour commencer.
Choisissez l’API qui convient à votre machine : « x86 » pour les machines 32 bits et « x86_64 » pour les 64 bits.
Vous aurez à télécharger l’API si vous ne la possédez pas encore.
Enfin, donnez un nom à votre émulateur*, puis validez avec « Finish ». Nous garderons les paramètres par défaut.
Sachez qu’il est possible de modifier les paramètres ultérieurement.
*Idéalement, gardez le nom qu’Android Studio vous propose. En effet, je vous disais précédemment que vous auriez probablement à tester votre application sur divers appareils et avec diverses versions d’API. On peut ainsi créer des émulateurs différents et les lancer en fonction des tests à effectuer. Alors, autant faire en sorte que le nom soit le plus évocateur possible !
B. Exécution
Voilà, notre émulateur est prêt et il s’affiche à présent dans la liste des émulateurs disponibles. Pour exécuter l’émulateur, cliquez sur la petite flèche verte.
Lorsqu’il aura démarré, un téléphone s’affichera. Je vous laisse le soin d’explorer les quelques options offertes sur la droite. Les deux que nous utiliserons principalement sont celles qui permettent de faire une rotation de l’appareil.
C. Lancer l’application
Voilà, tout est prêt, nous pouvons désormais lancer notre application ! Dans Android Studio, cliquez sur la flèche verte en haut de l’écran.
Choisissez l’émulateur qui est exécuté, puis faites « OK »
Il ne reste plus qu’à attendre que l’application se lance. Cela spannd un certain temps, car Android Studio commence par compiler le code, puis il le copie dans l’émulateur. Une fois fait, l’application est lancée.
Voici ce qui apparait à l’écran :
4. Pour résumer
Nous avons créé un projet avec une activité vide, puis nous avons vu de quoi elle était faite. Finalement, nous avons testé notre application avec l’émulateur. Elle n’est pas vraiment impressionnante pour le moment ! Mais nous allons arranger cela.
Dans le prochain chapitre, nous allons commencer à construire notre jeu. Nous commencerons par construire l’interface graphique, puis on lui donnera vie avec du code Java !
A bientôt pour le chapitre 3 !