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.
Ce tutoriel nécessite la lecture du tutoriel présentant le développement 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 composants importants et fréquemment utilisées.

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 :

  • FrameLayout : Ce layout est très simple et permet d’afficher un élément dans votre interface. Vous pouvez l’utiliser pour ajouter plusieurs éléments et jouer sur leur visibilité.
  • 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().
  • 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.
  • GridLayout : Permet d’organiser une vue sous forme d’un tableau composé de plusieurs lignes / colonnes. Il permet aussi d’étendre une colonne sur plusieurs cases ou de laisser des cases vides.

On peut déclarer les Layouts par code Java ou par XML. La déclaration en XML convient pour les interfaces statiques et la déclaration Java convient aux interfaces dynamiques. Vous pouvez combiner les deux types de déclarations

Exemple

Voici la déclaration du Layout de notre principale vue (activity_main.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 (match_parent) pour dire que cela représente la taille du parent ou wrap_content 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.activity_main);
    }
}
  • Dans la méthode OnCreate, on définit la vue à l’aide de la méthode setContentView et on lui affecte R.layout.activity_main 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 activity_main.xml) :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/android_picture"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/normal_padding"
        android:src="@drawable/android"
        android:contentDescription="@string/image_content_description" />

    <Button
        android:id="@+id/create_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/small_padding"
        android:text="@string/create_account" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="@dimen/normal_padding"
        android:text="@string/email"
        android:textSize="@dimen/normal_text_size"
        android:textColor="@color/black_color" />

    <EditText
        android:id="@+id/user_email"
        android:layout_width="@dimen/large_padding"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:layout_gravity="center" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="@dimen/normal_padding"
        android:textSize="@dimen/normal_text_size"
        android:text="@string/password"
        android:textColor="@color/black_color" />

    <EditText
        android:id="@+id/user_password"
        android:layout_width="@dimen/large_padding"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/connect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/normal_padding"
        android:text="@string/connect" />

</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.
  • 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. Les différentes tailles utilisées sont déclarées dans le fichier dimens.xml (dossier values) et utilisées en suivant la syntaxe @dimen/nom_de_la_variable
    • android:contentDescription : utiliser pour la description du contenu de l’image (utile pour l’accessibilité de l’application)
  • Button
    • android:layout_gravity : Position de l’élément (center, left, right…).
    • android:text : Texte à afficher dans l’élément. Toute les chaines de caractères utilisées sont déclarées dans le ficher strings.xml et utilisées à l’aide de la syntaxe @string/nom_de_la_chaine
  • TextView
    • android:textColor : Couleur du texte. Toute les couleurs utilisées sont déclarées dans le fichier colors.xml et utilisées à l’aide de la syntaxe @color/nom_de_la_couleur.
    • android:paddingTop : Marge interne du haut.
    • android:textSize : Définie la taille du text.
  • EditText
    • android:inputType : Type du texte qui sera saisie dans la zone d’édition (adresse email pour la première zone d’édition et mot de passe pour la seconde).
  • Et voici l’image que j’ai utilisé pour cet exemple :

Voici les différents fichiers de ressources utilisés dans cette application :

  • colors.xml : Couleurs utilisées dans l’application
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="black_color">#000</color>
    </resources>
    
  • dimens.xml : Dimensions utilisées dans l’application. Pour les différentes tailles déclarées dans votre application, utilisez les tailles en dp (density independant pixel) pour la taille des composants et les tailles en sp (scale independant pixel) pour la taille des polices et non de tailles en pixels (px). Les tailles en dp / sp garantissent les mêmes proportions dans vos interfaces quelques soit la densité de l’écran cible (Bonne pratique pour la compatibilité de votre application)
    <resources>
        <dimen name="padding_small">8dp</dimen>
        <dimen name="padding_medium">8dp</dimen>
        <dimen name="padding_large">16dp</dimen>
        
        <dimen name="normal_text_size">15sp</dimen>	
        <dimen name="normal_padding">20dp</dimen>
        <dimen name="large_padding">100dp</dimen>
        <dimen name="small_padding">10dp</dimen>
    </resources>
    
  • strings.xml : Utiliser pour déclarer les chaines de caractères
    <resources>
    
        <string name="app_name">FirstAndroidView</string>
        <string name="hello_world">Hello world!</string>
        <string name="menu_settings">Settings</string>
        <string name="title_activity_main">MainActivity</string>
        <string name="image_content_description">Un Android avec un chien</string>
        <string name="create_account">Créer un compte</string>
        <string name="email">Adresse email</string>
        <string name="password">Mot de passe</string>
        <string name="connect">Se connecter</string>
    </resources>
    

Sans oublier le fichier AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tutos.android.ui"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <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.
Les sources du projets sont disponibles à l’adresse suivante

Categories: Tutoriels

45 Responses so far.


  1. intissar dit :

    je suis débutante en android

  2. [...] Dans cette partie je vais survoler la création de vue sous Android, car c’est expliqué ici et ici. Nous allons ajouter tout d’abord les libs restlet que vous trouverez ici. Cette [...]

  3. [...] bien comprendre cette partie, nous allons partir du tutoriel “Introduction aux vues sous Android”, donc du code de ce tutoriel. Pour ceux n’ayant pas fait ce tutoriel, voici le code [...]

  4. samah dit :

    où se trouve la suite du cours?

Leave a Reply


Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.