Applications mobiles
Kamal Mehaoued
Université de Béjaia
Troisième année licence informatique
2017/2018
Kamal Mehaoued (dep info) applications mobiles 2017/2018 1 / 47
Table des matières
1 Introduction
2 Les vues et les gabarits
3 Les composants graphiques
Zone de texte
Zone d’édition
Case à cocher
Bouton
Toggle Button
Date Picker
Time Picker
ImageView
Image Button
Horloge analogique
Horloge numérique
Rating Bar
Kamal Mehaoued (dep info) applications mobiles 2017/2018 2 / 47
Introduction
Introduction
Les interfaces prennent une place de plus en plus importante dans le
choix d’une application par l’utilisateur
Le succès d’une application auprès d’un utilisateur dépend du succès
de son interface graphique
Il ne peut y avoir de bonne application sans une bonne interface
graphique
Kamal Mehaoued (dep info) applications mobiles 2017/2018 3 / 47
Les vues et les gabarits
Les Vues
le composant graphique élémentaire sous android est la vue classe View.
Créer une vue revient donc à créer un objet graphique.
Une vue constitue le composant graphique élémentaire dans la
plate-forme android
Tous les composants graphiques (boutons, cas à cocher ...) héritent de
la classe View
Créer une vue revient à créer un objet graphique
Plusieurs vues peuvent être regroupées dans une seule structures
arborescente ViewGroup
Cette structure peut à son tour regrouper d’autres éléments
ViewGroup
Kamal Mehaoued (dep info) applications mobiles 2017/2018 4 / 47
Les vues et les gabarits
Les gabarits
Un gabarit, Layout, est une extension de la classe ViewGroup.
C’est un conteneur qui aide à positionner les objets au sein d’une
interface.
Les gabarits (layout) peuvent s’imbriquer les uns dans les autres.
Un gabarit parent contient un gabarit enfant
un gabarit enfant est contenu dans un gabarit parent
Kamal Mehaoued (dep info) applications mobiles 2017/2018 5 / 47
Les vues et les gabarits
Les gabarits
Selon le gabarit utilisé, les composants qui s’y trouvent peuvent être
disposés différemment.
LinearLayout
Permet d’aligner de gauche à droite ou du haut vers le bas, les éléments
qui s’y trouveront. Selon la valeur de la propriété orientation, nous pouvons
indiquer au gabarit dans quel sens afficher ses composants enfants.
Si la valeur de orientation est horizontal, l’affichage se fait de gauche
à droite
Si la valeur de orientation est vertical, l’affichage se fait du haut vers
le bas
Kamal Mehaoued (dep info) applications mobiles 2017/2018 6 / 47
Les vues et les gabarits
Les gabarits
RelativeLayout
Les composants s’y trouvant seront disposés les uns par rapport aux autres.
Le premier composant(enfant) sert de référence aux autres
FrameLayout
Chaque enfant est positionné dans le coin supérieur gauche de l’écran et
affiché au dessus des enfants précédents en les cachant partiellement ou
entièrement. Ce gabarit est utilisé pour l’affichage d’un élément.
TableLayout
Permet de positionner les composants(enfants) d’un gabarit en ligne et
colonnes comme dans un tableau
Kamal Mehaoued (dep info) applications mobiles 2017/2018 7 / 47
Les vues et les gabarits
Exemple d’un gabarit linéaire en XML
< !– Mon premier gabarit –>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent"
>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 8 / 47
Les vues et les gabarits
Les gabarits
Les gabarits possèdent des propriétés communes telles que :
layout_width : permet de spécifier le comportement de remplissage en
largeur. Sa taille peut être précisée explicitement
layout_height : permet de spécifier le comportement de remplissage
en hauteur . Sa taille peut être précisée explicitement.
fill_parent : spécifie que le gabarit doit prendre toute la place
disponible sur la largeur et la hauteur du gabarit père. Si le gabarit
père est l’écran lui même alors le gabarit enfant va occuper tout
l’écran.
wrap_content : Dans ce cas le gabarit prend la place qui lui est
nécessaire.
Kamal Mehaoued (dep info) applications mobiles 2017/2018 9 / 47
Les vues et les gabarits
Création d’interface utilisateur
La création d’une interface se fait par la création de deux éléments
Définition de l’interface graphique utilisateur de façon déclarative dans
un fichier XML
Définition de la logique de fonctionnement de l’interface dans une
classe d’activité
Cette séparation fait de sorte qu’un spécialiste en graphique n’interfère
pas avec le code du développeur
Kamal Mehaoued (dep info) applications mobiles 2017/2018 10 / 47
Les vues et les gabarits
Définition d’interface
Une bonne pratique est de définir l’interface graphique dans la déclaration
xml. Sachant qu’il est possible de la définir dans le code du développeur.
Exemple :
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent"
<TextView
android :layout_width="fill_parent"
android :layout_height="wrap_content"
android :id="@+id/monText"
/>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 11 / 47
Les vues et les gabarits
Définition d’interface
L’équivalent dans le code du développeur :
import [Link] ;
import [Link] ;
public class Main extends Activity {
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState) ;
setContentView([Link]) ;
}
}
Kamal Mehaoued (dep info) applications mobiles 2017/2018 12 / 47
Les vues et les gabarits
Récupérer et utiliser un élément de l’interface
import [Link] ;
import [Link] ;
import [Link] ;
public class Main extends Activity {
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState) ;
setContentView([Link]) ;
TextView monTexte =
(TextView)findViewById([Link]) ;
[Link]("Bonjour tout le monde !") ;
}
}
Kamal Mehaoued (dep info) applications mobiles 2017/2018 13 / 47
Les vues et les gabarits
L’équivalent dans le code du développeur sans la définition xml :
import [Link] ;
import [Link] ;
import [Link] ;
public class Main extends Activity {
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState) ;
TextView monTextView = new TextView(this) ;
setContentView(monTextView) ;
[Link]("Bonjour tout le monde !") ;
}
}
Kamal Mehaoued (dep info) applications mobiles 2017/2018 14 / 47
Les vues et les gabarits
Créer une interface sans définition XML avec un gabarit
import [Link] ;
import [Link] ;
import [Link] ;
import [Link] ;
public class Main extends Activity {
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState) ;
LinearLayout monLinearLayout = new LinearLayout(this) ;
[Link]([Link]) ;
TextView monTextView1 = new TextView(this) ;
TextView monTextView2 = new TextView(this) ;
[Link](monTextView1) ;
[Link](monTextView2) ;
setContentView(monLinearLayout) ;
[Link]("Bonjour tout le monde !") ;
[Link]("Ceci est mon 2eme texte") ;
}
Kamal Mehaoued (dep info) applications mobiles 2017/2018 15 / 47
Les composants graphiques
Les composants graphiques
Le fichier .java de notre activité est dorénavant celui-ci :
Avec [Link], le fcihier ou est déclarée notre interface graphique.
import [Link] ;
import [Link] ;
import [Link] ;
import [Link] ;
public class MyActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState) ;
setContentView([Link]) ;
}
}
Kamal Mehaoued (dep info) applications mobiles 2017/2018 16 / 47
Les composants graphiques Zone de texte
zone de texte
TextView est une vue basique, une simple zone de texte :
Considérons l’exemple suivant avec quatre TextView positionnés
verticalement.
Figure – exemple de zone de texte
Kamal Mehaoued (dep info) applications mobiles 2017/2018 17 / 47
Les composants graphiques Zone de texte
zone de teste suite
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<TextView
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 :typeface="serif" />
Kamal Mehaoued (dep info) applications mobiles 2017/2018 18 / 47
Les composants graphiques Zone de texte
zone de texte suite
<TextView
android :text="Bold"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :textStyle="bold" />
<TextView
android :text="Italic"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :textStyle="italic"
/>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 19 / 47
Les composants graphiques Zone de texte
zone de texte suite
en exécutant le code de l’activité précédente, nous obtenons :
Figure – exemple de zone de texte
Kamal Mehaoued (dep info) applications mobiles 2017/2018 20 / 47
Les composants graphiques Zone d’édition
zone d’édition
L’EditText est une extension du [Link] vue est une zone d’édition.
Considérons l’exemple suivant :
Figure – exemple de zone d’édition
Kamal Mehaoued (dep info) applications mobiles 2017/2018 21 / 47
Les composants graphiques Zone d’édition
zone d’édition suite
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<EditText
android :id="@+id/title"
android :text="android"
android :layout_width="wrap_content"
android :layout_height="wrap_content" />
Kamal Mehaoued (dep info) applications mobiles 2017/2018 22 / 47
Les composants graphiques Zone d’édition
zone d’édition suite
<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"
android :phoneNumber="true" />
<EditText
android :id="@+id/password"
android :text="monPassword"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :password="true" />
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 23 / 47
Les composants graphiques Zone d’édition
zone d’édition suite
Toujours en exécutant le code de l’activité, nous aurons :
Figure – exemple de zone d’édition
Kamal Mehaoued (dep info) applications mobiles 2017/2018 24 / 47
Les composants graphiques Case à cocher
Case à cocher
La classe CheckBox est une case à cocher.
Considérons l’exemple suivant des cases à cocher :
Figure – exemple de case à cocher
Kamal Mehaoued (dep info) applications mobiles 2017/2018 25 / 47
Les composants graphiques Case à cocher
Case à cocher suite
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="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"
Kamal Mehaouedandroid
(dep info) :typeface="serif"
applications/>
mobiles 2017/2018 26 / 47
Les composants graphiques Case à cocher
Case à cocher suite
<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>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 27 / 47
Les composants graphiques Case à cocher
Case à cocher suite
Toujours en exécutant le code de l’activité, nous aurons :
Figure – exemple de cases à cocher
Kamal Mehaoued (dep info) applications mobiles 2017/2018 28 / 47
Les composants graphiques Bouton
Bouton
La classe Button permet de créer un bouton qui pourra être actionné par
l’utilisateur afin de déclencher un événement.
Considérons l’exemple suivant :
Figure – exemple de boutton
Kamal Mehaoued (dep info) applications mobiles 2017/2018 29 / 47
Les composants graphiques Bouton
Bouton suite
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="horizontal"
android :layout_width="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>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 30 / 47
Les composants graphiques Bouton
Bouton suite
Toujours en exécutant le code de l’activité, nous aurons :
Figure – exemple de bouton
Kamal Mehaoued (dep info) applications mobiles 2017/2018 31 / 47
Les composants graphiques Toggle Button
ToggleBouton
Un Toggle button est un bouton poussoir avec deux états vrai ou faux. A
chaque état correspond un texte visuel. Considérons l’exemple suivant :
Figure – exemple de toggle boutton
Kamal Mehaoued (dep info) applications mobiles 2017/2018 32 / 47
Les composants graphiques Toggle Button
Toggle button
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns :
android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<ToggleButton
android :id="@+id/toggle1"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :textOn="Allumé"
android :textOff="Eteint" />
<ToggleButton android :id="@+id/toggle2"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :textOn="On"
Kamal Mehaouedandroid
(dep info) :textOff="Off" />mobiles
applications 2017/2018 33 / 47
Les composants graphiques Date Picker
Date Picker
Elle offre une vue facilitant la saisie d’une date
Figure – Date Picker
Kamal Mehaoued (dep info) applications mobiles 2017/2018 34 / 47
Les composants graphiques Date Picker
Date Picker
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<DatePicker
android :id="@+id/date"
android :layout_width="wrap_content"
android :layout_height="wrap_content"/>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 35 / 47
Les composants graphiques Time Picker
Time Picker
Il a le même focntionnement que le DatePicker mais il est destiné à la
saisie de l’heure.
Figure – Time Picker
Kamal Mehaoued (dep info) applications mobiles 2017/2018 36 / 47
Les composants graphiques Time Picker
Time Picker
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<TimePicker
android :id="@+id/time"
android :layout_width="wrap_content"
android :layout_height="wrap_content" />
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 37 / 47
Les composants graphiques ImageView
ImageView
L’ImageView est un vue dont la représentation est une image. La source de
l’image peut provenir du répertoire layout ou être référencée par une URI.
ImageView intègre des fonctionnalités de transformation.
Figure – Exemple d’Image View
Kamal Mehaoued (dep info) applications mobiles 2017/2018 38 / 47
Les composants graphiques ImageView
ImageView
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<ImageView android :id="@+id/image"
android :src="@drawable/logo"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :layout_gravity="center"/>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 39 / 47
Les composants graphiques Image Button
ImageButton
ImageButton est une sous-classe d’ImageView laquelle en plus de pouvoir
afficher une image, elle est est capable de jouer le rôle d’un bouton et être
en interaction avec l’utilisateur.
Figure – Exemple de Bouton image
Kamal Mehaoued (dep info) applications mobiles 2017/2018 40 / 47
Les composants graphiques Image Button
ImageButton
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<ImageButton
android :id="@+id/image"
android :src="@drawable/logo"
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :layout_gravity="center"/>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 41 / 47
Les composants graphiques Horloge analogique
La classe AnalogClock est une simple horloge analogique permettant
d’afficher l’heure actuelle.
Figure – Exemple d’horloge analogique
Kamal Mehaoued (dep info) applications mobiles 2017/2018 42 / 47
Les composants graphiques Horloge analogique
AnalogClock
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<AnalogClock
android :layout_width="wrap_content"
android :layout_height="wrap_content" />
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 43 / 47
Les composants graphiques Horloge numérique
La classe DigitalClock est une simple horloge numérique permettant
d’afficher l’heure actuelle.
Figure – Exemple d’horloge numérique
Kamal Mehaoued (dep info) applications mobiles 2017/2018 44 / 47
Les composants graphiques Horloge numérique
DigitalClock
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<DigitalClock
android :layout_width="wrap_content"
android :layout_height="wrap_content" />
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 45 / 47
Les composants graphiques Rating Bar
RatingBar
Le RatingBar est un composant graphique permettant une notation de
façon visuelle
Figure – Exemple d’un Rating Bar
Kamal Mehaoued (dep info) applications mobiles 2017/2018 46 / 47
Les composants graphiques Rating Bar
RatingBar
< ?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns :android="http ://[Link]/apk/res/android"
android :orientation="vertical"
android :layout_width="fill_parent"
android :layout_height="fill_parent">
<RatingBar
android :id="@+id/gallery"
android :layout_width="wrap_content"
android :layout_height="wrap_content"/>
</LinearLayout>
Kamal Mehaoued (dep info) applications mobiles 2017/2018 47 / 47
