Introduction aux vues sous Android

Image non disponible

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.

Commentez Donner une note à l'article (4)

Article lu   fois.

Les deux auteurs

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Vue d'ensemble

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

1.1. Les vues

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 ».

Image non disponible

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

1.2. Exemples de vues

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 radios.
  • 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.

1.3. 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 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) :

 
Sélectionnez

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) :

 
Sélectionnez

<?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 :
  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 ».
  • ImageView : élément qui sert à afficher une image ;
  1.            android:layout_height : définir la hauteur de l'élément ;
  2.            android:id : identifiant de l'élément (utilisé pour l'interaction avec l'élément) ;
  3.            android:layout_width : largeur de l'élément ;
  4.            android:src : image source utilisée pour l'ImageView ;
  5.            android:layout_marginTop : marge externe du haut.
  • Button ;
  1.            android:layout_gravity : position de l'élément (center, left, right) ;
  2.            android:text : texte à afficher dans l'élément.
  • TextView ;
  1.            android:textColor : couleur du texte ;
  2.            android:paddingTop : marge interne du haut.
  • Et voici les deux images que j'ai utilisées pour cet exemple :
  1.            Background ;
  2.            Icone d'Android.

Sans oublier le fichier AndroidManifest.xml

 
Sélectionnez

<?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 :

Image non disponible

II. Conclusion

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

III. Remerciements

Je tiens à remercier tout particulièrement Feanorin qui a mis ce tutoriel au format Developpez.com.
Merci également à ClaudeLELOUP d'avoir pris le temps de le relire et de le corriger.

IV. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.