Les bases de l'interface utilisateur

Introduction

Les applications Android proposent, pour la majorité d’entre elles, une interface utilisateur. Celle-ci va permettre une interaction à double sens entre l’utilisateur et l’application de façon visuelle, tactile et sonore.

Ce chapitre présente les bases de la construction d’interface utilisateur. Nous commencerons par détailler le concept de layout d’activité et analyser les différentes options pour construire une interface utilisateur. Nous verrons ensuite en détail les fondements de la construction graphique des interfaces, et étudierons quelques composants parmi les plus utilisés dans les écrans d’une application. Enfin, nous nous pencherons sur les concepts propres aux activités sous Android (cycle de vie des activités, sauvegarde et restauration de l’état), et terminerons par une présentation de la gestion des piles d’activités, notion indispensable pour l’optimisation de la navigation dans les applications les plus complexes.

Il est d’usage de parler de clic pour désigner l’action de pression et de relâchement rapide d’un bouton d’un dispositif de pointage comme une souris par exemple. Bien que la plupart des terminaux Android se passent avantageusement de souris, le terme de clic sera utilisé pour décrire le contact du doigt sur l’écran...

Concepts de base

public class MonActivitePrincipale extend Activity { 
[...] 
} 

<activity android:icon="ressource drawable" 
         android:label="ressource texte" 
         android:name="chaîne de caractères" 
         ... > 
   ... 
</activity> 

<action android:name="android.intent.action.MAIN" /> 
<category android:name="android.intent.category.LAUNCHER" /> 

[...] 
 <application android:icon="@mipmap/icon" 
              android:label="@string/app_name"> 
   <activity android:name=".MonActivitePrincipale" 
             android:label="@string/app_name"> 
     <intent-filter> 
       <action...

Layouts

Les layouts sont des conteneurs de vues (ViewGroup) prédéfinis fournis par Android. Chaque layout propose un style de mise en page différent permettant aux vues de se positionner les unes par rapport aux autres ou par rapport au conteneur parent.

Les principaux layouts prédéfinis sont FrameLayout, LinearLayout, RelativeLayout et TableLayout. Ils offrent respectivement une structure de positionnement des vues par plan, linéaire, relative et sous forme de tableau.

Attention de ne pas faire l’amalgame entre les fichiers de layout, définis dans le répertoire /res/layout/, et ces conteneurs de vues : les fichiers de layout sont les fichiers permettant de composer l’interface visuelle d’une activité en mode déclaratif. Les conteneurs de vue, FrameLayout, LinearLayout et autres, sont les objets qui structurent la mise en page. Typiquement, un fichier de layout contient, en premier élément, un conteneur de vues (que ce soit un FrameLayout, un TableLayout ou plus souvent, un LinearLayout ou un RelativeLayout).

FrameLayout

Conteneur réduit à sa plus simple expression. Tout ce qu’il contient sera dessiné à partir du coin en haut à gauche. Les derniers éléments enfants ajoutés seront dessinés par-dessus les plus anciens.

Exemple

<FrameLayout 
   xmlns:android="http://schemas.android.com/apk/res/android" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent"> 
 
   <View 
       android:layout_width="100dp" 
       android:layout_height="50dp" 
       android:background="#ff0000"/> 
 
   <View 
       android:layout_width="75dp" 
       android:layout_height="25dp" 
       android:background="#0000ff"/> 
 
</FrameLayout> 

LinearLayout

Conteneur dont les éléments enfants sont disposés, suivant la valeur de l’attribut orientation, soit :

Widgets

Un widget est un composant de l’interface graphique qui peut ou non permettre l’interaction avec l’utilisateur.

De base, Android fournit un ensemble de composants permettant la création d’interfaces graphiques plus ou moins complexes.

<Type_de_widget 
    android:id="@[+][paquetage:]id/nom_ressource" 
    android:layout_width="dimension" 
    android:layout_height="dimension" 
    ... 
/> 

public View findViewById (int id) 

public void onCreate(Bundle savedInstanceState) { 
   super.onCreate(savedInstanceState); 
   setContentView(R.layout.layout_principal); 
   Button btn = (Button) findViewById(R.id.button_cliquez_moi); 
} 

public void onCreate(Bundle savedInstanceState) {  ...

Activités

Nous l’avons vu précédemment, une activité est un composant applicatif indépendant qui possède la plupart du temps une interface utilisateur. Dans le cas le plus représentatif, une activité présente un écran à l’utilisateur afin d’interagir avec lui. Une application très simple peut n’avoir qu’une seule activité alors qu’une plus complexe peut en posséder plusieurs. Cependant, une seule activité de l’application est active à la fois, l’écran qu’elle gère étant celui que voit l’utilisateur.

Rappelons que pour définir une activité, il faut créer une classe qui hérite de la classe Activity et implémenter, le cas échéant, les méthodes héritées.

L’exécution d’une activité s’opère dans le processus léger, ou thread, principal du processus de l’application. Ce thread est également appelé thread de l’interface utilisateur (UIThread) car lui seul permet de modifier l’interface utilisateur. Toute modification de l’interface depuis un thread concurrent génère une erreur.