Programmation Mobile
Partie .II. Interfaces Graphiques
DSI 32
3ème année
Enseignante : Amna Mehrez
1
Plan
❖ Les Intents (suit de la partie 2 du cours)
❖ Vues et gabarits
❖ Inclusion de gabarits
❖ Les listes
❖ Les fragments
❖ Les barres d’action
❖ Animations et helpers
2 Cours Développement Mobile Amna Mehrez
Les Intents
3 Cours Développement Mobile Amna Mehrez
Types de transmission d’Intent
4 Cours Développement Mobile Amna Mehrez
Structure d’un Intent
5 Cours Développement Mobile Amna Mehrez
Action d’Intent prédéfinies
6 Cours Développement Mobile Amna Mehrez
Intent Filter
7 Cours Développement Mobile Amna Mehrez
Les différents types d’Intents
8 Cours Développement Mobile Amna Mehrez
Type d’Intent
9 Cours Développement Mobile Amna Mehrez
Transfert de données entre activités
bundle package tnahy les erreurs;tkhalik idha sar mochkla f pc tkhali
les donnee
10 Cours Développement Mobile Amna Mehrez
Exercice : Utilisation des Intents pour passer
d’une activité à une autre et envoyer des données
via putExtra
11 Cours Développement Mobile Amna Mehrez
Exercice
extend:yjiib m ressource khater fichier li nkhdmou fyh howa l
mere
12 Cours Développement Mobile Amna Mehrez
Exercice
13 Cours Développement Mobile Amna Mehrez
Exercice
14 Cours Développement Mobile Amna Mehrez
Vues et Gabarits
15 Cours Développement Mobile Amna Mehrez
Vues et Gabarits
● Les éléments graphiques héritent de la classe View
● On peut regrouper des éléments graphiques dans une ViewGroup.
● Des ViewGroup particuliers sont prédéfinis : Les gabarits(layout) qui
proposent une prédisposition des objets graphiques :
○ LinearLayout : dispose les éléments de gauche à droite ou du haut vers le bas
○ RelativeLayout : les éléments enfants sont placés les uns par rapport aux autres
○ TableLayout : disposition matricielle
○ FrameLayout : disposition en haut à gauche en empilant les éléments
○ GridLayout : disposition matricielle avec N colonnes et un nombre infini de lignes
● Les déclarations se font principalement en XML ce qui évite les
instanciations Java
16
Cours Développement Mobile Amna Mehrez
Attributs des Gabarits
● Les plus importants attributs sont :
○ android:layout_width et android:layout_height :
■ ="match_parent" : l'élément remplit tout l'élément parent
■ ="wrap_content" : prend la place minimum nécessaire à l'affichage
○ android:orientation : définit l'orientation d'empilement
○ android:gravity : définit l'alignement des éléments
17 Cours Développement Mobile Amna Mehrez
Exemple de Gabarit
● Exemple de LinearLayout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="@+id/accueilid"
>
</LinearLayout>
18 Cours Développement Mobile Amna Mehrez
ViewGroup
● Exemple de ViewGroup :
○ Un ViewGroup contient des éléments graphiques. Voici un exemple pour construire un
gabarit linéaire :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/andro
id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="@+id/accueilid"
>
<TextView android:id="@+id/le_texte"
android:text="@string/hello" />
<TextView android:id="@+id/le_texte2"
android:text="@string/hello2" />
</LinearLayout>
19 Cours Développement Mobile Amna Mehrez
ViewGroup
● Exemple de ViewGroup :
○ Pour empiler une image et un texte :
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/andro
id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="@+id/accueilid"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/mon_image" />
<TextView android:id="@+id/le_texte"
android:text="@string/hello" />
</FrameLayout>
20 Cours Développement Mobile
L’interface comme ressource
● Une interface graphique définie en XML sera aussi générée comme une
ressource dans la classe statique R.
● Le nom du fichier xml, par exemple accueil.xml, permet de retrouver le
layout dans le code java au travers de R.layout.accueil.
● Pour associer la vue graphique à l’activité principale de l’application :
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acceuil);
}
21 Cours Développement Mobile Amna Mehrez
L’interface comme ressource
● Le layout reste modifiable au travers du code, comme tous les autres
objets graphiques.
● Pour cela, il est important de spécifier un identifiant dans la définition
XML du gabarit :
android:id="@+id/accueilid"
○ Le "+" signifie que cet id est nouveau et doit être généré dans la classe R.
○ Un id sans "+" signifie que l'on fait référence à un objet déjà existant.
22 Cours Développement Mobile Amna Mehrez
23
L’interface comme ressource
● En ayant généré un id, on peut accéder à cet élément et agir dessus au
travers du code Java :
LinearLayout l =
(LinearLayout)findViewById(R.id.accueilid);
l.setBackgroundColor(Color.BLACK);
24 Cours Développement Mobile Amna Mehrez
Les Labels de Textes
● En XML :
<TextView
android:id="@+id/le_texte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:layout_gravity="center"
/>
25 Cours Développement Mobile Amna Mehrez
Les Labels de Textes
● Par la programmation :
public class Activity2 extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout gabarit = new LinearLayout(this);
gabarit.setGravity(Gravity.CENTER); // centrer les
éléments graphiques
gabarit.setOrientation(LinearLayout.VERTICAL); //
empiler vers le bas
TextView texte = new TextView(this);
texte.setText("Programming creation of interface !");
gabarit.addView(texte);
setContentView(gabarit);
}
}
26 Cours Développement Mobile Amna Mehrez
Les zones de texte
● En XML :
<EditText android:text=""
android:id="@+id/EditText01"
android:layout_width="match_parent"
android:layout_height="wrap_content">
● </EditText>
● Par la programmation :
EditText edit = new
EditText(this);
edit.setText("Edit me");
gabarit.addView(edit);
27 Cours Développement Mobile Amna Mehrez
Les zones de texte
● Interception d’évènements :
edit.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start,
int before, int count)
{//This method is called to notify //you that, within s,
the count characters beginning at start have just
//replaced old text that had length before.
// Do something here
}
);
28 Cours Développement Mobile Amna Mehrez
Les Images
● En XML :
<ImageView
android:id="@+id/logoESB"
android:src="@drawable/esb"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
</ImageView>
● Par la programmation :
ImageView image = new ImageView(this);
image.setImageResource(R.drawable.esb);
gabarit.addView(image);
29 Cours Développement Mobile Amna Mehrez
Les Boutons
<Button android:text="Go !"
● En XML : android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
● La gestion des événements de click se font par l'intermédiaire d'un
listener :
Button b = (Button)findViewById(R.id.Button01);
b.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), "Stop !",
Toast.LENGTH_LONG).show();
} });
30 Cours Développement Mobile Amna Mehrez
Inclusion de Gabarits
31 Cours Développement Mobile Amna Mehrez
Inclusion de Gabarits
● Les interfaces peuvent aussi inclure d'autres interfaces, permettant de
factoriser des morceaux d'interface. On utilise dans ce cas le mot clef
include :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include android:id="@+id/include01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="@layout/acceuil"></include>
</LinearLayout>
32 Cours Développement Mobile Amna Mehrez
Inclusion de Gabarits
● Si le gabarit correspondant à accueil.xml contient lui aussi un
LinearLayout, on risque d'avoir deux imbrications de LinearLayout
inutiles car redondant :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
">
<TextView ... />
<TextView ... />
</LinearLayout>
</LinearLayout>
33 Cours Développement Mobile Amna Mehrez
Merge de Gabarits
● Explication et solution
○ Un layout doit contenir un unique root element, du type View ou ViewGroup. On ne peut
pas mettre une série de TextView sans root element. Pour résoudre ce problème, on peut
utiliser le tag « merge ». Si l'on réécrit le layout accueil.xml comme cela :
<merge
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView ... />
<TextView ... />
</merge>
34 Cours Développement Mobile Amna Mehrez
Merge de Gabarits
● L’inclusion de celui-ci dans un layout linéaire transformera :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
">
<include android:id="@+id/include01"
layout="@layout/acceuil"></include>
</LinearLayout>
en :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
">
<TextView ... />
<TextView ... />
</LinearLayout>
35 Cours Développement Mobile Amna Mehrez
Positionnement Avancé
● Objectif : Placer les éléments graphiques d’une manière indépendante de la
taille / orientation de l’écran
● Exemple : Réaliser une liste d’items contenant chacun un texte à gauche et une
icône à droite alignée avec le texte
● Principe : Imbrication de LinearLayout
○ Un 1er layout contiendra l’ensemble des éléments (orientation « horizontal » et gravité «
center »). Puis inclure le texte.
○ Inclure ensuite un LinearLayout consécutif au texte avec gravité « right » et une gravité de
layout « layout_gravity » à « center » pour aligner ses éléments.
36 Cours Développement Mobile Amna Mehrez
Positionnement Avancé (suite)
● Le Layout décrit précédemment ressemble à :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_width="match_parent"
android:gravity="center">
<TextView ...></TextView>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent"
android:gravity="right"
android:layout_gravity="center">
<Image .../>
</LinearLayout></LinearLayout>
37 Cours Développement Mobile Amna Mehrez
Les Listes
38 Cours Développement Mobile Amna Mehrez
Les Listes
● Au sein d'un gabarit, on peut implanter une liste que l'on pourra dérouler
si le nombre d'éléments est important.
● Si l'on souhaite faire une liste plein écran, il suffit juste de poser un
layout linéaire et d'y implanter une ListView.
● Le XML du layout est donc :
<LinearLayout ...>
<ListView android:id="@+id/listView1" ...>
</ListView>
</LinearLayout>
39 Cours Développement Mobile Amna Mehrez
Les Listes
● Etant donné qu'une liste peut contenir des éléments graphiques divers et variés,
les éléments de la liste doivent être insérés dans un ListAdapter
● Il faut aussi définir le layout qui sera utilisé pour afficher chaque élément du
ListAdapter.
● La classe ListAdapter :
○ Configure la source de données du [ListView] ;
○ Gère l'affichage des différents éléments du [ListView] ;
○ Gère les événements de ces éléments ;
● Exemple: Une liste de chaine de caractères
○ Dans ce cas, on crée un nouveau layout montexte et on ajoute dynamiquement un ArrayAdapter à
la liste listView1. Le layout suivant doit être placé dans montexte.xml :
<TextView ...>
</TextView>
40 Cours Développement Mobile Amna Mehrez
Les Listes
● Le code de l'application qui crée la liste peut être le suivant :
ListView list = (ListView)findViewById(R.id.listView1);
ArrayAdapter<String> tableau = new
ArrayAdapter<String>(list.getContext(),
R.layout.montexte);
for (int i=0; i<40; i++) {
tableau.add("Item " + i);
}
list.setAdapter(tableau);
41 Cours Développement Mobile Amna Mehrez
Liste de layouts plus complexes
● Lorsque les listes contiennent un layout plus complexe qu'un texte, il
faut utiliser un autre constructeur de ArrayAdapter (ci-dessous) où
resource est l'id du layout à appliquer à chaque ligne et
textViewResourceId est l'id de la zone de texte inclus dans ce layout
complexe.
● A chaque entrée de la liste, la vue générée utilisera le layout complexe et
la zone de texte contiendra la string passée en argument à la méthode
add.
ArrayAdapter (Context context, int resource, int
textViewResourceId)
42 Cours Développement Mobile Amna Mehrez
Liste de layouts plus complexes
● Le code de l'exemple précédent doit être adapté comme ceci
ListView list = (ListView)findViewById(R.id.maliste);
ArrayAdapter<String> tableau = new
ArrayAdapter<String>(
list.getContext(), R.layout.ligne,
R.id.monTexte);
for (int i=0; i<40; i++) {
tableau.add("item" + i); }
list.setAdapter(tableau);
● Avec le layout de liste suivant (ligne.xml) :
<LinearLayout ...>
<TextView ... android:id="@+id/monTexte"/>
<LinearLayout> <ImageView /> </LinearLayout>
</LinearLayout>
43 Cours Développement Mobile Amna Mehrez
Application : 1ère Interface graphique
● Objectif : Créer une interface graphique contenant un texte et un bouton
44 Cours Développement Mobile Amna Mehrez
Application : 1ère Interface graphique
● Fichier activity_main.xml à ajouter au niveau de res/layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:layout_width=« match_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<TextView android:layout_width=« match_parent"
android:layout_height="wrap_content"
android:text="This is my first Android Application!" />
<Button android:layout_width=« match_parent"
android:layout_height="wrap_content"
android:text="And this is a clickable button!" />
</LinearLayout>
45 Cours Développement Mobile Amna Mehrez
Application : 1ère Interface graphique
● Code (MainActivity.java) connectant l’activité à l’interface graphique
définie au niveau du fichier activity_main.xml
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
46 Cours Développement Mobile Amna Mehrez
Application : 2ème interface
● Fichier XML
47 Cours Développement Mobile Amna Mehrez
Application : 2ème interface
● Fichier XML (suite)
48 Cours Développement Mobile Amna Mehrez
Application : 2ème interface
● Fichier strings.xml
49 Cours Développement Mobile Amna Mehrez
Application : 2ème interface
● Fichier MainActivity.java
50 Cours Développement Mobile Amna Mehrez
Les Fragments
51 Cours Développement Mobile Amna Mehrez
