Introduction aux vues sous Android

Cette classe est le bloc basique pour les interfaces utilisateur (disposition d'écran, interaction). Une ou plusieurs vues peuvent être regroupées dans ce que l'on appelle « ViewGroup ».

Ces groupes de vues sont utilisés pour gérer la mise en page des interfaces graphiques.

Dans cette partie, je vais vous donner quelques exemples de vues importantes et fréquemment utilisées.

• Button: un bouton cliquable.
• CheckBox : une checkbox.
• EditText : un champ de texte éditable.
• DatePicker: sélection de dates.
• RadioButton : représente les boutons radio.
• Toast: un pop up message qui s'affiche sur l'écran.
• ImageButton : une image qui se comporte comme un bouton.
• SlidingDrawer : un élément qui se présente sous forme d'un tiroir qu'on ouvre et ferme. Pour aller plus loin sur cet élément, un tutoriel est disponible ici.

Sous Android, la notion de mise en page est reliée à la notion de « Layout » . Cette dernière représente l'agencement des différents éléments graphiques dans votre interface. Voici quelques exemples de layouts :

• LinearLayout : il organise les différents éléments de votre interface sur une ligne ou sur une colonne. La direction peut être définie à l'aide de la méthode setOrientation() ;
• AbsoluteLayout : cette mise en page vous laisse définir les coordonnées exactes des éléments qui la composent ;
• RelativeLayout : il permet de définir la position des éléments en fonction de la position de leurs éléments parents. On ne peut pas avoir de dépendance circulaire dans la taille dans le RelativeLayout ;
• TableLayout : cette mise en page peut se faire en colonne et en ligne.

On peut déclarer les Layouts par code Java ou par XML. Je recommande l'utilisation des déclarations XML pour toutes les déclarations de vues.

Voici la déclaration du Layout de notre principale vue (ecran_d_acceuil.xml) qui se trouvera dans le répertoire « res/layout ».

• android:orientation : pour l'orientation de notre LinearLayout (Vertical ou Horizontal).
• android:layout_width et android:layout_height : fill_parent pour dire que cela représente la taille du parent ou wrap_context pour dire qu'elle prend la taille de contenu.

Voici le fichier pour notre activité principale (MainViewActivity pour notre exemple) :

package com.tuto.android.view;
 
import android.app.Activity;
import android.os.Bundle;
 
public class MainViewActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ecran_d_acceuil);
    }
}

• Dans la méthode OnCreate, on définit la vue à l'aide de la méthode setContentView et on lui affecte R.layout.ecran_d_acceuil qui représente notre vue, déclarée dans le dossier « Layout ».
• R signifie qu'on utilise une ressource qui se trouve dans le dossier « res ».
• Toutes les ressources qui se trouvent dans le dossier « res » sont précompilées et des liens sont générés dans le dossier R.java.

Voici un exemple d'une vue complète (toujours dans notre ecran_d_acceuil.xml) :

<?xml version="1.0" encoding="utf-8">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="@drawable/bg">
 
<ImageView android:layout_width="fill_parent" android:id="@+acountcreation/title"
android:layout_height="wrap_content"
android:src="@drawable/android" android:layout_marginTop="10px" />
 
<Button android:layout_width="wrap_content" android:layout_gravity="center"
android:id="@+acountcreation/createAcount" android:layout_height="wrap_content"
android:text="Créer un compte" android:layout_marginTop="10px"/>
 
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="Email" android:paddingTop="10px"
android:textColor="#000000" android:layout_gravity="center_horizontal" />
 
<EditText android:id="@+acountcreation/email" android:layout_width="200px"
android:layout_height="wrap_content" android:layout_gravity="center"/>
 
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Mot de passe" android:textColor="#000000"
android:paddingTop="10px" android:layout_gravity="center_horizontal" />
 
<EditText android:id="@+acountcreation/password" android:layout_width="200px"
android:layout_height="wrap_content" android:password="true"
android:layout_gravity="center"/>
 
<Button android:layout_width="wrap_content" android:id="@+acountcreation/connect"
android:layout_height="wrap_content"
android:text="Se connecter" android:layout_marginTop="20px"
android:layout_gravity="center"/>
 
</LinearLayout>

• LinearLayout :
• ImageView : élément qui sert à afficher une image ;
• Button ;
• TextView ;
• Et voici les deux images que j'ai utilisées pour cet exemple :

1.            android:orientation : orientation verticale pour le Linear Layout ;
2.            android:layout_width et android:layout_height : hauteur et largeur du Layout, définie à celle des parents ;
3.            android:background : définir le background de notre vue. Ici c'est le fichier « bg.png », qui se trouve dans les différents dossiers « res/drawable ».
4.            android:layout_height : définir la hauteur de l'élément ;
5.            android:id : identifiant de l'élément (utilisé pour l'interaction avec l'élément) ;
6.            android:layout_width : largeur de l'élément ;
7.            android:src : image source utilisée pour l'ImageView ;
8.            android:layout_marginTop : marge externe du haut.
9.            android:layout_gravity : position de l'élément (center, left, right) ;
10.            android:text : texte à afficher dans l'élément.
11.            android:textColor : couleur du texte ;
12.            android:paddingTop : marge interne du haut.
13.            Background ;
14.            Icone d'Android.

Sans oublier le fichier AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
      xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.tuto.android.view"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon"
                     android:label="@string/app_name">
        <activity android:name=".MainViewActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Et voici le résultat :