Chapitre 2 + TP2

Université Mohamed Cherif Messaàdia de Souk Ahras
Module : Développement des applications mobiles avancées 2-ème année Master Génie Logiciel
Support de cours préparé par Mr. ZAIDI Sofiane Année : 2018/2019
s.zaidi@univ-soukahras.dz
Chapitre 2 : Création d’interfaces utilisateur
Contenu du chapitre
1. Interfaces et ressources
2. Dispositions
3. Composants d’interface
4. Styles
5. Exercice TP2
2.1. Interfaces et ressources

2.2.1. Interfaces
Une application mobile sous Android consiste de deux parties : La partie statique, et la partie
dynamique. La première partie (statique) représente l’interface graphique de l’application, elle
est implémentée à base du langage XML, tandis que la deuxième partie (dynamique) représente
les activités de l’applications, elle est implémentée à base du langage JAVA.
L’interface graphique de l’application mobile sous Android est constituée des différents
éléments graphiques (ex. bouton, texte, zone d’édition…etc.). Toutes les classes des éléments
graphiques héritent la classe de base View. Chaque élément de l’interface graphique doit être
possédant d’un identifiant unique. Grace à cet identifiant on peut accéder à cet élément
graphique afin de mettre en place des interactions et traitements. La syntaxe suivante permet de
déclarer un nouvel identifiant dans un fichier XML.
Nom de Déclaration d’un nouvel Catégorie de L’identifiant d’un

l’attribut identifiant l’identifiant élément
android:id = @+id/nom_identifiant
La syntaxe suivante permet d’accéder à l’identifiant d’un élément depuis un fichier JAVA :
R.id.nom_identifiant, ou depuis un fichier XML : @id/nom_identifiant.
Les activités de l’application constituées des traitements et interactions à effectuer sur les
éléments graphiques. Pour créer une nouvelle activité en JAVA, il fallait respecter les points
suivants :
- L’activité doit être déclarée dans le manifeste de l’application.
- L’activité doit être une classe fille de la classe mère Activity.
- Au minimum, la méthode onCreate de la classe Activity doit être surchargée dans la
nouvelle classe à créer.
- Faire un appel à la méthode setContentView pour faire la liaison entre l’activité et
l’interface graphique.
Prenons l’exemple d’une interface créée dans le fichier module.xml. Pour pouvoir la lier à une
activité, la méthode onCreate doit contenir au minimum le code ci-dessous :
1
@ Override
public void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState) ;
setContentView (R.layout.module) ;
}
2.2.2. Ressources
Les ressources représentent les éléments constituant l’application, comme les images, vidéo,
texte…etc. Les ressources consistent aussi des descriptions en fichiers XML des éléments de
l’applications. Le répertoire res d’une application mobile développée sous Android contient
toutes les ressources de l’application. La figure 2.1 présente le répertoire res d’une application
Android.
Figure 2.1 : Répertoire res d’une application Android
2
Le tableau 2.1 présente une description des différents types de ressources du répertoire res.
Ressource Description
drawable-hdpi Images en haute définition
drawable-ldpi Images en basse définition
drawable-mdpi Images en moyenne définition
layout Description en XML des interfaces
values Définitions en XML de constantes : chaînes, tableaux, valeurs

numériques …)
anim Description en XML d’animations
menus Description en XML de menus pour l’application
xml Fichiers XML utilisés directement par l’application
raw Tous les autres types de ressources : sons, vidéos, …)
Tableau 2.1 : Différents types de ressources du répertoire res
Le répertoire res/values contient des fichiers XML (ex. colors.xml, strings.xml, styles.xml).
Les ressources de type value sont déclarées dans ces fichiers de la manière ci-dessous (voir la
figure 2.2). La figure 2.3 présente des exemples des fichiers colors.xml, strings.xml, styles.xml
<resources>
…
<type_ressource name="identificateur_ressource"> valeur_ressource </type_ressource>
…
</resources>
Figure 2.2 : Déclaration d’une ressource en XML
3
Fichier colors.xml
<?xml version="1.0" encoding="utf-8"?>

<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
Fichier strings.xml
<resources>
<string name="app_name">My Application</string>
</resources>
Fichier styles.xml
<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Figure 2.3 : Fichiers colors.xml, strings.xml, styles.xml d’une application Android
L’accès aux ressources de l’application depuis le code JAVA s’effectué grâce à deux classes :
la classe R, et la classe resources.
La classe R permet de référencier les ressources, elle est définie en code JAVA (le fichier
R.java) et contienne des classes internes. Chaque classe interne permettre de faire des références
à un type de ressource. Souvent le nom de la classe interne porte le même nom du type de la
ressource référenciée grâce à cette classe (ex. id, drawable, layout…etc.). La figure 2.4 présente
un exemple du code source de la classe R. Par exemple la classe interne layout permettre de
faire l’accès au fichier XML de l’interface graphique de l’application. Une ressource peut être
référencée dans un fichier XML grâce à l’instruction : "@type/identificateur". Par exemple :
@string/app_name. Une ressource peut être référencée aussi dans un code JAVA grâce à
l’instruction : R.type.identificateur. Par exemple : R.string.app_name.
4
public final class R {
public static final class drawable {
public static final int ic_action_search=0x7f020000;
public static final int ic_launcher=0x7f020001;
}
public static final class id {
public static final int menu_settings=0x7f080000;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class menu {
public static final int activity_main=0x7f070000;
}
public static final class string {
public static final int app_name=0x7f050000;
public static final int hello_world=0x7f050001;
public static final int menu_settings=0x7f050002;
public static final int title_activity_main=0x7f050003;
}
public static final class style {
public static final int AppTheme=0x7f060000;
}
}
Figure 2.4 : Exemple de la classe R
Les méthodes de la classe resources permettent de faire l’accès aux les ressources référencées
par la classe R. Il fallait créer une instance de la classe resources par la méthode getResources()
afin d’utiliser les différents méthodes de la classe resources comme :
- boolean getBoolean(int)
- int getInteger(int)
- int[] getArray(int)
- String getString(int)
- String[] getStringArray(int)
- int getColor(int)
- float getDimension(int)
- Drawable getDrawable(int)
Sachant que le paramètre de ces méthodes est une référence d’une ressource. L’exemple ci-
dessous représente l’accès à une ressource de type string (définie dans un fichier XML) dans
un code JAVA.
String titre = getResources().getString(R.string.app_name);
L’accès à l’interface graphique principale de l’application (Layout) depuis un code JAVA est
effectué à base de la fonction setContentView(R.layout.nom_du_fichier_xml).
2.2. Dispositions (Layout)

Une disposition est un groupe de vues (ViewGroup) permet de dimensionner et positionner les
vues (TextView, ImageView, EditText, Button, CheckBox…etc) sur l’écran (interface
graphique). Il existe plusieurs types de dispositions, chacune adoptante une stratégie
bien définie.
5
2.2.1. LinearLayout
Cette disposition aligne les vues dans une seule direction : verticale (en colonne) ou horizontale
(en ligne). Le code XML ci-dessous (Figure 2.5) présente un exemple d’une disposition de type
LinearLayout qui groupe deux boutons. L’interface graphique de ce code est présentée dans la
figure 2.6. Comme indique le code XML, android:orientation permettre de spécifier la
direction des vues (‘vertical’, ‘horizontal’), android:layout_width permettre de spécifier la
largeur de la disposition ou de la vue (‘fill_parent’, ‘wrap_content’), et android:layout_height
permettre de spécifier la hauteur de la disposition ou de la vue (‘fill_parent’, ‘wrap_content’).
‘fill_parent’ signifiée que la disposition ou la vue est la plus grande possible. ‘wrap_content’
signifiée que la disposition ou la vue est la plus petite possible.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="@+id/premier"
android:layout_height="wrap_content"
android:text="Premier bouton" />
<Button
android:id="@+id/second"
android:layout_height="wrap_content"
android:text="Second bouton" />
</LinearLayout>
Figure 2.5 : Exemple d’un code XML d’une disposition de type LinearLayout
Figure 2.6 : L’interface graphique du code XML de la figure 2.6
2.2.2. RelativeLayout
Les vues contenues dans une disposition de type RelativeLayout peuvent déclarer leur position
relativement par rapport à leur RelativeLayout parent ou par rapport aux autres vues. Par
exemple, une vue peut être positionnée dans le RelativeLayout grâce aux propriétés suivantes :
- android:layout_centerInParent="true"
- android:layout_centerHorizontal="true"
- android:layout_centerVertical="true"
- android:layout_alignParentLeft="true"
- android:layout_alignParentRight="true"
6
- android:layout_alignParentTop="true"
- android:layout_alignParentBottom="true"
Il est possible aussi de positionner une vue grâce aux autres vues dans le même
RelativeLayout à l’aide des propriétés suivantes :
- android:layout_alignLeft
- android:layout_alignRight
- android:layout_alignBottom
- android:layout_alignTop
La figure 2.7 présente un exemple d’un code XML qui définit une disposition de type
RelativeLayout. Cette dernière consiste de 4 vues (EditText, 2 Buttons, et ProgressBar). La
figure présente aussi l’interface graphique de ce code XML.
Figure 2.7 : Exemple d’une disposition de type RelativeLayout
2.2.3. TableLayout
Cette disposition positionne les vues sous forme d’un tableau. La figure 2.8 présente un exemple
d’un code XML d’une disposition de type TableLayout. La figure 2.9 présente l’interface
graphique de ce code XML.
7

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="@string/table_layout_4_open"
android:padding="3dip" />
<TextView
android:text="@string/table_layout_4_open_shortcut"
android:gravity="right"
</TableRow>
<TableRow>
<TextView
android:text="@string/table_layout_4_save"
<TextView
android:text="@string/table_layout_4_save_shortcut"
android:gravity="right"
</TableRow>
</TableLayout>
Figure 2.8 : Exemple d’un code XML d’une disposition de type TableLayout
Figure 2.9 : L’interface graphique du code XML de la figure 2.8
2.3. Composants d’interface

2.3.1. TextView : Il affiche un simple texte. La figure 2.10 présente un exemple de 4
TextView.
8
<?xml version= "1.0" encoding= "utf-8" ?>

<LinearLayout
xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" android:layout_w
idth= "fill_parent" android:layout_height= "fill_parent" >
<TextView android:id="@+id/text1"
android:text= "Plain" android:layout_width= "wrap_content" android:layout_height= "wrap_content" />
<TextView
android:text= "Serif" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:typ
eface= "serif" />
<TextView
android:text= "Bold" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:tex
tStyle= "bold" />
<TextView
android:text= "Italic" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:tex
tStyle= "italic"/> </LinearLayout>
Figure 2.10 : Exemple de 4 TextView
On peut changer le contenu d’un TextView dans le code JAVA comme suivant :
TextView tx = (TextView) findViewById(R.id.text1);
tx.setText("bbbbbb");
2.3.2. EditText : permet de saisir un texte. La figure 2.11 présente un exemple de 3 EditText.
On peut utiliser l’attribut android:inputType pour spécifier le type de texte : adresse,
téléphone, etc.
9
<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout

xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" android:layout_widt
h= "fill_parent" android:layout_height= "fill_parent" >
<EditText android:id= "@+id/title" android:text= "Développez des applications

Android" android:layout_width= "wrap_content" android:layout_height= "wrap_content" />
<EditText android:id= "@+id/phoneNumber" android:text= "05 12 34 56

78" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:typeface= "serif" andr
oid:phoneNumber= "true" />
<EditText
android:id= "@+id/password" android:text= "monPassword" android:layout_width= "wrap_content" android:layo
ut_height= "wrap_content" android:password= "true" /> </LinearLayout>
Figure 2.11 : Exemple de 3 EditText
2.3.3. Button : La classe Button permet de créer un bouton qui pourra être actionné par
l’utilisateur pour déclencher un traitement donné. La figure 2.12 présente un exemple de 2
Button.

xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "horizontal" android:layout_w
idth= "fill_parent" android:layout_height= "fill_parent" >
<Button
android:id= "@+id/okButton" android:text= "OK" android:layout_width= "wrap_content" android:layout_height=
"wrap_content" />
<Button
android:id= "@+id/CancelButton" android:text= "Annuler" android:layout_width= "wrap_content" android:layout
_height= "wrap_content" /> </LinearLayout>
Figure 2.12 : Exemple de 3 Button
10
2.3.4. CheckBox : Est une case à cocher. La figure 2.13 présente un exemple de 4 CheckBox.

xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" android:layout_widt
h= "fill_parent" android:layout_height= "fill_parent" >
<CheckBox
android:id= "@+id/plain_cb" android:text= "Plain" android:layout_width= "wrap_content" android:layout_height
= "wrap_content" />
<CheckBox
android:id= "@+id/serif_cb" android:text= "Serif" android:layout_width= "wrap_content" android:layout_height=
"wrap_content" android:typeface= "serif" />
<CheckBox
android:id= "@+id/bold_cb" android:text= "Bold" android:layout_width= "wrap_content" android:layout_height=
"wrap_content" android:textStyle= "bold" />
<CheckBox
android:id= "@+id/italic_cb" android:text= "Italic" android:layout_width= "wrap_content" android:layout_height
= "wrap_content" android:textStyle= "italic" /> </LinearLayout>
Figure 2.13 : Exemple de 4 CheckBox
Le tableau 2.2 présente autres types des composants graphiques, avec une portion de code
XML pour la création de ces composants.
Composant L’interface graphique Portion du code XML
graphique
ToggleButton <ToggleButton
android:id= "@+id/toggle1"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:textOn= "Allumé"
android:textOff= "Eteint" />
RadioGroup <RadioGroup
<RadioButton
android:id= "@id/option1"
android:text= "Noir"
android:checked= "false"
android:layout_gravity= "left" >
</RadioButton>
….
</RadioGroup>
ImageView <ImageView
android:id= "@+id/image"
android:src= "@drawable/logo"
android:layout_gravity= "center" />
11
ImageButton <ImageButton
android:id= "@+id/image"
android:src= "@drawable/logo"
android:layout_gravity= "center" />
ProgressBar <ProgressBar
android:id= "@+id/progress"
style= "?android:attr/progressBarStyleHorizontal"
android:layout_width= "fill_parent"
android:layout_height= "wrap_content" />
RatingBar <RatingBar
android:id= "@+id/gallery"
Spinner <Spinner
android:id= "@+id/saisons"
android:prompt= "@string/prompt"
android:entries= "@array/saisons" />
DatePicker <DatePicker android:layout_width= "wrap_content"

TimePicker <TimePicker
android:id= "@+id/time"
AnalogClock <AnalogClock android:layout_width= "wrap_content"

DigitalClock <DigitalClock android:layout_width= "wrap_content"

Tableau 2.2 : Différents types de composants graphiques
2.4. Styles
Un style permet de modifier les propriétés d’apparence d’une vue, comme : la police et la taille
de caractères pour un texte, couleur et image, géométrie par défaut des vue (taille, espacement,
remplissage…etc.).
12
Pour définir un nouveau style, il fallait ajouter une ressource de type style dans le fichier
styles.xml du répertoire res/values. Par exemple le code XML suivant permet de créer deux
ressources de type style nommées "MyTheme" et "MySubTheme".
<resources>
<style name="MyTheme">
<item name="android:textSize">12sp</item>
<item name="android:textColor">#111</item>
</style>
<style name="MySubTheme" parent="MyTheme"; >
<item name="android:textSize">8sp</item>
</style>
</resources>
L’attribut parent permet au style "MySubTheme" d’hériter les propriétés du style "MyTheme".
L’utilisation du style "MySubTheme" pour une vue de type TextView dans le fichier XML de
l’interface graphique (layout.xml) est faite comme suivant :
<TextView
style="@style/MySubTheme"
android:text="@string/hello" />
Un thème est un style appliqué partout dans l’application. Le thème doit être spécifié dans le
manifest de l’application (AndroidManifest.xml), comme il montre l’exemple suivant :
<application
android:theme="@style/MyTheme"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
…
/application>
2.5. Exercice TP2 : Partie I d’une application mobile de gestion des notes.
2.5.1. Enoncé
Le but principal de cet exercice est de construire une interface humain-machine (IHM)
présentant plusieurs composants graphiques Android (View). Cette IHM permet de calculer les
moyennes de quelques modules (d’une unité d’enseignement fondamentale) d’un étudiant en
2-éme année Master (Master 2/Informatique/Génie Logiciel) en demandant les notes des
travaux dirigés (TD), travaux pratiques (TP), et contrôle pour chaque module. L’application
doit calculer aussi la moyenne de l’unité d’enseignement fondamentale, ainsi le nombre de
crédits obtenus pour cette unité.
Pour l’instant, on va se contenter de faire l’interface graphique qui ressemblera à la figure
2.14.
13
Figure 2.14 : Version initiale de l’interface graphique de l’application mobile
1) Indiquez les composants graphiques Android qui interviennent dans cette IHM.
2) Construire cette IHM avec l'environnement Eclipse et le plug-in Android (ou bien
Android studio). On demande d'écrire le moins de code JAVA possible. Les chaînes de
caractères seront plutôt définies dans le fichier strings.xml.
14

Chapitre 2 + TP2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 2 + TP2

Transféré par

Droits d'auteur :

Formats disponibles

Université Mohamed Cherif Messaàdia de Souk Ahras

Chapitre 2 : Création d’interfaces utilisateur

2.1. Interfaces et ressources

Nom de Déclaration d’un nouvel Catégorie de L’identifiant d’un

Figure 2.1 : Répertoire res d’une application Android

drawable-hdpi Images en haute définition

drawable-ldpi Images en basse définition

drawable-mdpi Images en moyenne définition

layout Description en XML des interfaces

values Définitions en XML de constantes : chaînes, tableaux, valeurs

anim Description en XML d’animations

menus Description en XML de menus pour l’application

xml Fichiers XML utilisés directement par l’application

raw Tous les autres types de ressources : sons, vidéos, …)

Tableau 2.1 : Différents types de ressources du répertoire res

Figure 2.2 : Déclaration d’une ressource en XML

<?xml version="1.0" encoding="utf-8"?>

Figure 2.3 : Fichiers colors.xml, strings.xml, styles.xml d’une application Android

Figure 2.4 : Exemple de la classe R

2.2. Dispositions (Layout)

Figure 2.6 : L’interface graphique du code XML de la figure 2.6

Figure 2.7 : Exemple d’une disposition de type RelativeLayout

<?xml version="1.0" encoding="utf-8"?>

Figure 2.9 : L’interface graphique du code XML de la figure 2.8

2.3. Composants d’interface

<?xml version= "1.0" encoding= "utf-8" ?>

Figure 2.10 : Exemple de 4 TextView

<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout

<EditText android:id= "@+id/title" android:text= "Développez des applications

<EditText android:id= "@+id/phoneNumber" android:text= "05 12 34 56

Figure 2.11 : Exemple de 3 EditText

<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout

Figure 2.12 : Exemple de 3 Button

<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout

Figure 2.13 : Exemple de 4 CheckBox

DatePicker <DatePicker android:layout_width= "wrap_content"

AnalogClock <AnalogClock android:layout_width= "wrap_content"

DigitalClock <DigitalClock android:layout_width= "wrap_content"

Figure 2.14 : Version initiale de l’interface graphique de l’application mobile

Vous aimerez peut-être aussi