Introduction aux vues sous Android ~ Android For Arab

Ce tutoriel a pour but d’expliquer la base du fonctionnement des vues sur Android et pour cela nous allons créer un petit programme qui reprendra les bases des interfaces graphiques sous Android.
La création d’interfaces est indispensable lors de la conception d’une application dédiée aux smartphones car de nouveaux critères sont à prendre en compte dont :

Les différentes tailles d’écran.
Les différentes résolutions etc…

Vue d’ensemble

La classe centrale et la base pour réaliser une vue sous Android composent la classe « View« .

Les vues

Cette classe est le bloc basique pour les interfaces utilisateurs (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.

Exemples de vues

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

Button (http://developer.android.com/reference/android/widget/Button.html) : Un bouton cliquable.
CheckBox (http://developer.android.com/reference/android/widget/CheckBox.html) : Une checkbox.
EditText (http://developer.android.com/reference/android/widget/EditText.html) : Un champ de texte éditable.
DatePicker(http://developer.android.com/reference/android/widget/DatePicker.html) : Sélection de dates.
RadioButton(http://developer.android.com/reference/android/widget/RadioButton.html) : Représente les boutons radios.
Toast (http://developer.android.com/reference/android/widget/Toast.html) : Un pop up message qui s’affiche sur l’écran.
ImageButton(http://developer.android.com/reference/android/widget/ImageButton.html): 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.

Les différents layouts

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 le 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="10dp" />
 
<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="10dp"/>
 
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="Email" android:paddingTop="10dp"
android:textColor="#000000" android:layout_gravity="center_horizontal" />
 
<EditText android:id="@+acountcreation/email" android:layout_width="200dp"
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="10dp" android:layout_gravity="center_horizontal" />
 
<EditText android:id="@+acountcreation/password" android:layout_width="200dp"
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="20dp"
android:layout_gravity="center"/>
 
</LinearLayout>

LinearLayout :
- android:orientation : Orientation verticale pour le Linear Layout.
- android:layout_width et android:layout_height : Hauteur et largeur du Layout, définie à celle des parents.
- 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 »
ImageView : élément qui sert à afficher une image
- android:layout_height : Définir la hauteur de l’élément.
- android:id : Identifiant de l’élément (utilisé pour l’interaction avec l’élément).
- android:layout_width : Largeur de l’élément.
- android:src : Image source utilisée pour l’ImageView.
- android:layout_marginTop : Marge externe du haut.
Button
- android:layout_gravity : Position de l’élément (center, left, right…).
- android:text : Texte à afficher dans l’élément.
TextView
- android:textColor : Couleur du texte.
- android:paddingTop : Marge interne du haut.
Et voici les deux images que j’ai utilisé pour cet exemple :
- Background
- 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 :

Conclusion

En conclusion, ce tutoriel vous fournit une base pour la création de vues simples, d’autres tutoriaux plus avancés sur le création de vue seront disponibles au fur et à mesure.

Android For Arab

samedi 8 octobre 2011