Créer un nouvel écran Android (10/x)

L'interface utilisateur d'une application Android est constituée d'un ensemble d'objets de type View ouViewGroup .

View est la classe mère de tous les composants graphiques appelés widgets (champ de texte, bouton, checkbox...). Un objet View contient différentes propriétés pour déterminer sa taille, sa mise en page, le scrollings, son affichage, les interactions avec l'utilisateur...
ViewGroup hérite de View et est la classe mère des layouts qui permettent d'afficher des objets View de manière linéaire, tabulaire ou relative.
L'élément de base d'une interface sera donc un ViewGroup qui pourra contenir d'autres ViewGroup ou des Views, le tout constituant un arbre.

Créer un nouvel écran
La description de l'interface graphique peut se faire au format xml dans des fichiers placés dans le répertoire /res/layout de votre projet. Eclipse propose s'ailleurs un GUI Builder pour vous aider à créer vos écrans. Dans Eclipse utiliser le Wizard : "New" > "New Android Xml File"

Sélectionner le layout que vous voulez appliquer. Une fois ouvert dans l'IDE, vous pouvez 

• en haut à l'aide des listes déroulantes, voir le rendu sur différents formats de device, de versions d'Android, 
• ajouter par Drag & Drop des composants de la Palette à gauche.

Vous pouvez également visualiser le fichier XML et utiliser la complétion pour ajouter des éléments

Interagir entre une Activity et un écran

Le fichier XML est interprété par le système Android, afin d’être retranscrit en Java et compilé. Vous pouvez à la fois définir des éléments dans le fichier au format layout et à la fois dans votre code Java. Mais il est préférable comme dans toute application de séparer les couches de présentation des couches métiers. 

Dans un premier temps vous devez rattacher le layout principal à votre Activity dans la méthode onCreate(). 

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main_layout);
}

R.layout.main_layout définit la référence au fichier de ressource  main_layout.xml

Un id technique est généralement associé à un composant graphique

<TextView

            android:id="@+id/equipeTextView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/foo"

            android:textAppearance="?android:attr/textAppearanceLarge" />

Et vous pourrez le rattacher à votre Activity pour interagir avec celui-ci. Vous pouvez également initier  et récupérer sa valeur, définir un listener pour être à l'écoute d'un évènement utilisateur sur ce composant...

TextView equipeTextView = (TextView) findViewById(R.id.equipeTextView);

Button saveButton = (Button) findViewById(R.id.saveButton);

// Ajout d'un listener sur le bouton pour traiter le click dessus

saveButton.setOnClickListener(new View.OnClickListener() {

   public void onClick(View v) {

saveEvent();

   }

});

Vous pouvez prendre une exemple plus complet en vous basant sur deux fichiers de l'application FeuilleDeMatch

https://github.com/javamind/FeuilleDeMatch/blob/master/src/com/ehret/scoresheet/ScoreSheetAdder.java

https://github.com/javamind/FeuilleDeMatch/blob/master/res/layout/addmatch.xml

Article précédent / Sommaire / Article suivant