• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/09/2021

Référencez les éléments graphiques dans votre activité

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'interface graphique est prête, il est temps maintenant de se pencher sur le code Java de l'activité. Ouvrez le fichier MainActivity situé dans le répertoire java/nom.de.votre.package

Affichez l'interface

La classe MainActivity a été créée automatiquement par Android Studio lors de la création du projet, lorsque nous avons choisi le modèle Empty Activity. La seule méthode implémentée est la suivante :

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

La méthode onCreate() est appelée lorsque l'activité est créée (nous verrons plus en détail le cycle de vie d'une activité à la fin de ce cours). La ligne qui nous intéresse ici est la ligne n° 4 : la méthode setContentView() permet de déterminer quel fichier layout utiliser.

Le fichier layout à utiliser est précisé avec une syntaxe particulière : R.layout.nom_du_fichier (sans l'extension XML). Petite explication : lors de la compilation du projet, Android Studio génère une classe Java appelée R (pour Resources), qui contient l'ensemble des identifiants de toutes les ressources du projet. Ces ressources peuvent être des fichiers layout, des chaînes de caractères, etc. Nous verrons à quoi ressemble cette classe après avoir compilé le projet.

Référencez les éléments graphiques

Déclaration des variables

Pour rappel, nous avons trois éléments graphiques dans notre interface :

  • le texte d'accueil ;

  • le champ de saisie du prénom ;

  • le bouton de validation.

Afin de pouvoir interagir avec ces éléments, il est nécessaire de les référencer dans le code. Commençons par ajouter dans la classe MainActivity les trois variables correspondantes :

private TextView mGreetingTextView;
private EditText mNameEditText;
private Button mPlayButton;

Lorsque vous commencerez à saisir un type (par exemple TextView), vous constaterez qu'il apparaît en rouge. Pourquoi ? Parce que ce type est inconnu : il faut importer la classe où ce type est défini. Par exemple, pour le type TextView, il faut importer la classe TextView située dans le package android.widget, en saisissant la ligne suivante en haut du fichier :

import android.widget.TextView;

Heureusement, Android Studio est là pour vous prêter main-forte : dès qu'il détecte la saisie d'un type inconnu (il faut toujours se méfier des types inconnus, mes parents me l'ont toujours dit), il vous propose d'importer automatiquement la classe correspondante en appuyant sur ALT + Entrée. Ainsi, le type devient connu et vos parents sont rassurés.

importez automatiquement la classe correspondante en appuyant sur ALT + Entrée
importez automatiquement la classe correspondante en appuyant sur ALT + Entrée

Identification des éléments graphiques

Il manque néanmoins une petite chose dans le fichier layout : imaginez que vous ayez cinq éléments TextView les uns à la suite des autres. Comment les distinguer ? En leur ajoutant un identifiant, bien sûr ! Pour cela, l'attribut à utiliser est android:id, et sa valeur doit être "@+id/votre_identifiant". Notez bien que l'identifiant doit toujours être préfixé par "@+id/". Par exemple :

<TextView
android:id="@+id/main_textview_greeting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:text="Welcome! What's your name?" />
<EditText
android:id="@+id/main_edittext_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:hint="Please type your name" />
<Button
android:id="@+id/main_button_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="16dp"
android:text="Let's play" />

Branchement des variables

Voilà, nous pouvons maintenant référencer les trois éléments graphiques qui nous intéressent dans le code. La méthode à utiliser pour cela est findViewById(). Elle prend en paramètre l'identifiant de la vue qui nous intéresse, et renvoie la vue correspondante. Comme pour le fichier layout, la syntaxe à utiliser pour le paramètre est spécifique : il faut préciser R.id.identifiant_de_vue.

Voici l'exemple de code que vous pouvez ajouter dans la méthode onCreate() :

mGreetingTextView = findViewById(R.id.main_textview_greeting);
mNameEditText = findViewById(R.id.main_edittext_name);
mPlayButton = findViewById(R.id.main_button_play);

Nos trois éléments graphiques sont référencés, nous allons pouvoir commencer à jouer avec !

Récapitulons en vidéo

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

En résumé

  • On ne peut utiliser la méthode findViewById() qu’après avoir utilisé la méthode setContentView().

  • Pour obtenir les Widgets dans l’Activity, la méthode à appeler est findViewById().

  • Un Widget doit avoir un attribut id dans le layout pour être référençable dans l’Activity.

Dans ce chapitre, nous avons vu comment référencer les éléments graphiques dans l'activité. Voyons maintenant comment interagir avec l'utilisateur et répondre à ses différentes actions.

Exemple de certificat de réussite
Exemple de certificat de réussite