Ressources informatiques

Créer une interface simple Android

Documentation : developer.android.com : Build a Simple User Interface

Objectif : Créer une application permettant d'afficher dans une zone de texte (TextView) un message saisi dans une zone d'édition de texte (EditText). C'est un bouton (Button) appelé Copier qui permettra d'effectuer cette opération. Un bouton Effacer effacera le contenu de la zone d'édition de texte.

Créez une application Android

Suivez la docucmentation pour créer votre application Android

Créer l'interface

• Ouvrez app > res > layout > activity_main.xml : description de l'interface de l'activité principale modifiable graphiquement (Design) ou en XML (Text)
• Pour avoir plus de place, cliquez sur View > Tool Windows > Project
• Si besoin, cliquez sur Design pour passer du mode XML au mode graphique
• Cliquez sur : et sélectionnez Blueprint
• Dans la barre d'outil, les symboles suivants doivent être présents :
• Cliquez sur Default Margins dans la barre d'outils et sélectionnez 16
• Sélectionnez la zone de texte Hello World, puis cliquez droit et choissisez Delete pour la supprimer.

Zone de texte

• Glissez la zone de texte (textView) : Widgets > TextView dans Component Tree.
• Modifiez la valeur de sa propriété text en la laissant vide pour qu'il n'y ait aucun texte d'affiché
• Cliquez sur la zone de texte. Au milieu de chaque coté apparaît un cercle : des cotés haut, droit et gauche tirez la flèche jusqu'au bord correspondant afin de fixer les marges haute, droite et gauche.
• Fixez la propriété layout_height (hauteur du composant) à 48dp

Zone d'édition de texte

• Glissez la zone d'édition (editText) : Text > Plain Text dans Component Tree.
• Positionnez sa propriété : text (texte affiché à la création) à la valeur Saisissez un texte
• Cliquez sur le composant. Au milieu de chaque coté apparaît un cercle : tirez la flèche sur les cotés haut, droit et gauche jusqu'au bord correspondant afin de fixer les marges
• Fixez la propriété layout_height (hauteur du composant) à 48dp
• Fixez la propriété inputType à text

Les boutons

• Positionnez les deux boutons, le bouton Effacer à gauche de l'interface et le bouton Copier à droite de l'interface : Widgets > Button
• Modifiez le texte affiché dans les boutons en modifiant leur propriété text
• Fixez les marges haute et gauche du bouton EFACCER
• Fixez les marges haute et droite du bouton COPIER
• Il est utile de modifier la propriété id de chacun de ces deux boutons afin de les identifier plus facilement dans le code Java.
  • Affectez à la propriété id du bouton EFACCER la valeur boutonEffacer
  • Affectez à la propriété id du bouton COPIER la valeur boutonCopier
• Il est nécessaire d'indiquer quelle méthode (fonction) sera appelée dans le code Java lorsque l'on clique sur chacun de ces boutons. Pour cela, il faut positionner leur propriété onClick :
  • Affectez à la propriété onClick du bouton EFACCER la valeur onClickBoutonEffacer
  • Affectez à la propriété onClick du bouton COPIER la valeur onClickBoutonCopier

Résultat obtenu :

Ecrire le code de l'application

Il faut modifier le fichier MainActivity.java

Créer des attributs privés dans la classe MainActivity afin de mémoriser la référence des composants de l'interface auquels il sera nécessaire d'accéder.

private EditText zoneDeSaisie;
private TextView zoneDeTexte;

Affecter, dans la méthode onCreate(), à ces attributs la référence des composants

// Associer les attributs avec les composants de l'IHM
zoneDeSaisie = (EditText) findViewById(R.id.editText);
zoneDeTexte = (TextView) findViewById(R.id.textView);

La méthode findViewById() permet de rechercher la référence d'un composant par son identifiant. Le suffixe de l'identifiant (après R.id) doit être l'id défini pour chacun des composants dans le fichier app > res > layout > activity_main.xml

Créez les methodes appelées lorque l'on clique sur chacun des boutons

Chacune de ces méthodes doit avoir le nom défini dans la propriété onClick des boutons

/** Fonction appelée lorsqu'on clique sur le bouton effacer */
public void onClickBoutonEffacer(View view) {
   zoneDeTexte.setText("");
}

/** Fonction appelée lorsqu'on clique sur le bouton copier */
public void onClickBoutonCopier(View view) {
   zoneDeTexte.setText(zoneDeSaisie.getText());
}

• La méthode setText() d'un objet de la classe TextView permet de modifier le texte affiché dans l'objet.
• La méthode getText() d'un objet de la classe EditText permet d'obtenir le texte affiché dans l'objet.

Le code complet :

package com.masociete.appli2;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private EditText zoneDeSaisie;
    private TextView zoneDeTexte;

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

        // Associer les attributs avec les composants de l'IHM
        zoneDeSaisie = (EditText) findViewById(R.id.editText);
        zoneDeTexte = (TextView) findViewById(R.id.textView);
    }

    /** Fonction appelée lorsqu'on clique sur le bouton effacer */
    public void onClickBoutonEffacer(View view) {
        zoneDeTexte.setText("");
    }

    /** Fonction appelée lorsqu'on clique sur le bouton copier */
    public void onClickBoutonCopier(View view) {
        zoneDeTexte.setText(zoneDeSaisie.getText());
    }
}

Exécuter l'application

Résutat obtenu :