Programmation Mobile

sous Android

2ITE – Semestre 3

ENSAJ 2
I. Approche de développement mobile
 Approche de développement mobile

• Web
• Hybride
• Native

ENSAJ 4
 Approches de développement mobile

Software Source Resources

Code Application Source Code (e.g. images)

Native Java, C#,

Objcetve C,
etc
SDK Tools
 
 
Executable
 
Compiler, Linker Packager
(Binary)
Hybride  
 
 
 
 
Android SDK,   .apk,
Xcode,  
Distributable .xap, .app,
Windows Phone,  
Package etc
etc  
Web
 Développement spécifique à chaque plateforme
 Nécessite un SDK + connaissance d'un langage spécifique
 Mode online et offline
 Utilise toutes les fonctionnalités du mobiles (GPS, voix, notifications, contacts...)

The most traditional methods of developing an application will be to target native applications
ENSAJ 5
with native philosophy, the native target and purposely native technology.
 Approches de développement mobile

WebView
Native  
 
 Encapsulation d'une
  WebApp dans une
HTML CSS
  MobileApp
 
JS   Resources
 Ce modèle de
Hybride  
  bridge
JavaScript développement
(provided by  framework) reste un
 
 
compromis ...
 
Hybrid App Framework
Web  Utilisation d’un
langage interprété
Mobile Os and native APIs
(ex : Java Script)

ENSAJ 6
 Approches de développement mobile

   
Native  
 
Web Services

Mobile Device
Browser

Hybride Files DataBase

Web  Navigateur web

 Langage du web (HTML/JS/CSS/PHP ...)
 Nécessite obligatoirement une connexion internet
 Limites aux possibilités du navigateur

12/19/20
ENSAJ 217
 Arbre de décision

Doit-elle être Doit-elle

publiée sur les Non fonctionner en A-t-elle besoin
principaux mode Hors Oui de beaucoup de
Oui APPSTORE ? lignes ? fonctionnalités
natives?

Oui Non
Non
Native App

Voulez-vous la
Oui Oui Doit-elle être
vendre ?
Native App / très fluide?
Hybrid App
Oui
Non Web App Non
Oui
Oui

Est-ce une
Application Voulez-vous
très simple ? beaucoup
Oui d’animation?
Hybrid App
Non
Non
Non
Application Native ou
Hybride

Sera-t-elle Voulez-vous être Non

utilisée toujours à jour
avec les
fréquemment
dernières
par
l’utilisateur ?
versions d’OS ?
12/19/20 12/19/20
ENSAJ 21 21
 Approches de développement mobile

Comparaison des trois approches

  Native Hybrid Approach Web
Approach Approach
Device Access Full Full Partial
Speed Very fast Native speed Fast
App Development cost Expensive Reasonable Reasonable

AppStore Yes Yes No

Approval Process Mandatory Low overhead None
Quality of UX Excellent Not as good as native apps Very good

Quality of apps High Medium to low Medium

Security High Not good Depends on browser
security
Potential users Limited to a particular Large – as it reaches to users Maximum including
mobile platform of different platforms smartphones, tablets and
other feature phones

Skills/tools needed for cross- Objective-C, Java, C, HTML, CSS, Javascript, HTML, CSS, Javascript
platform apps C++, C#, VB.net Mobile development
  framework (like PhoneGap)

ENSAJ 9
II. Plateforme Android
 Android et le monde de l’IT
Développement d’applications

1 2 3

Le système L’application
L'appareil d’exploitation

ENSAJ 11
 Android et le monde de l’IT
C’est quoi Android ?

Android : est un système d’exploitation pour appareils mobiles.

Android est organisé en 5 couches :

⑤ Applications de base

④ ADT : Android Development Kit

③ Machine virtuelle Java

② Bibliothèques logicielles : WebKit, OpenGL, SQLite ou FreeType

① Noyau Linux + les pilotes

ENSAJ 12
Android est distribué en open source sous licence Apache.
 Android et le monde de l’IT
Version Android

Oreno
ENSAJ 13
Android 8.0
 Android et le monde de l’IT
Open Handset Alliance
- Association de 34 compagnies, qui opèrent dans le mode des NTIC, dont l’objectif est de
promouvoir et de développer Android en tant que premier système d’exploitation mobile
- La philosophie du système : open source, gratuit, facile à développer, facile à vendre,
flexible et ingénieux.

ENSAJ 14
 Android et le monde de l’IT
Marché des smartphones

 Croissance des ventes des Smartphones / décroissances des téléphones mobiles classiques
 Les ventes de tablettes explosent

□ Parts des marchés

ENSAJ 15
III. Interface utilisateur et éléments graphiques
 Interface utilisateur et éléments graphiques

Méta-modèle d’une application Android

ENSAJ 17
 Interface utilisateur et éléments graphiques

Etats d’une Activity :

Une activité, vis-à-vis du code, est séparée en 2 morceaux: un fichier XML, et un fichier JAVA.

Le fichier XML :
• Interface graphique de l’activity
• Conception de l’IHM : design et ergonomie
• Declaration des elements graphiques :
View, Buttons, Layouts, …etc
• Déclaration des identifiants des éléments
graphiques

Le fichier Java :
• Le contrôle des éléments déclarés dans le
fichier XML
• Chaque activity est liée à un seul et unique
ENSAJ 18
fichier XML qui définit son interface graphique
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android

Des fichiers XML avec des descriptions de mise en page sont utilisés pour
définir l'interface utilisateur pour les activités. Les fichiers sont placés dons le
dossier : /res/layout
 View : classe ancêtre de tous les composants graphiques
 Implantations élémentaires de View:
• TextView : affiche une chaîne
• EditText : permet la saisie d'une chaîne (propriété inputType pour le type d'entrée attendu)
• Button : bouton cliquable, variante de type interrupteur avec ToggleButton
• CheckBox : case à cocher
• RadioButton : bouton radio regroupable dans un RadioGroup
• CheckedTextView : chaîne cochable (implante Checkable)
• ProgressBar : barre de progression variante avec étoiles de notation avec ratingBar
• SeekBar : barre de réglage
• SearchView : champ de recherche avec proposition de suggestions
• ImageView : affichage d'une ressource image
• ImageButton : bouton avec image
• VideoView : affichage contrôlable de vidéo ENSAJ 19
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android

 Déclaration des views :

– Déclaration TextView en XML

– Déclaration TextView en JAVA FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher)

– Rendu de la vue :

ENSAJ 20
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android

 Déclaration des views :

– Déclaration du Checkbox en XML

– Déclaration du Checkbox en JAVA

– Rendu de la vue :

ENSAJ 21
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
1- LinearLayout :

Ce layout se charge de mettre les vues sur une même ligne, selon une certaine
orientation. L'attribut pour préciser cette orientation est « Android: orientation » .
On peut lui donner deux valeurs :

• vertical pour que les composants soient placés de haut en bas (en colonne)
• horizontal pour que les composants soient placés de gauche à droite (en ligne)
Code XML :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical/horizontal" >
...
...
</LinearLayout>
ENSAJ 22
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
1- LinearLayout :

ENSAJ 23
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
1- Démo 1 : Réaliser l’interface suivante

ENSAJ 24
 Interface utilisateur et éléments graphiques
TextView
Parent LinearLayout

1st Child LinearLayout

EditText
2nd Child LinearLayout

TextView

Button

ENSAJ 25
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
2- RelativeLayout :
De manière totalement différente, ce layout propose plutôt de placer les composants les
uns par rapport aux autres. Il est même possible de les placer par rapport
au RelativeLayout parent. Il permet en particulier de

• Placer les éléments du layout les uns par rapport aux autres : Below, Above,
toLeft, toRight, ..etc
• Placer les éléments dans une position bien définie au sein du layout: Top ,
Bottom, Right, Left, center Horizontal, Center Vertical

Code XML :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
...
</RelativeLayout> ENSAJ 26
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts

ENSAJ 27
 Interface utilisateur et éléments graphiques
TextView
Parent RelativeLayout

1st Child RelativeLayout

EditText
2nd Child RelativeLayout

TextView

Button

ENSAJ 28
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
3- TableLayout :
Dernier layout de base, il permet d'organiser les éléments en tableau, comme en HTML,
mais sans les bordures.
Code XML :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
…
…
</TableRow>
<TableRow>
…..
….
</TableRow>
</TableLayout>
ENSAJ 29
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts

ENSAJ 30
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow android:padding="5dp">
<TextView
android:layout_height="wrap_content"
android:text="New Product Form"
android:typeface="serif"
android:layout_span="2"
android:gravity="center_horizontal"
android:textSize="20dp" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Code:"
android:layout_column="0"/>
<EditText
android:id="@+id/prod_code"
android:layout_height="wrap_content"
android:layout_column="1"/>
</TableRow>

ENSAJ 31
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
4- GridLayout :
Ce layout vient compléter le tablelayout en proposant de fusionner des cellules.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" >
    <Button
        android:layout_column="3"
        android:text="/" />
    <Button android:text="1" />
<!-- Other numbers -->
    <Button android:text="9" />
    <Button
        android:layout_rowSpan="3"
        android:text="+" />
    <Button
        android:layout_columnSpan="2"
        android:text="0" />
    <Button android:text="00" />
    <Button
        android:layout_columnSpan="3"
        android:text="=" />
</GridLayout>
ENSAJ 32
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
4- GridLayout :
<Button
        android:layout_column="3"
        android:text="/" />
 
     <Button android:text="1" />

<Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" />
 
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />

ENSAJ 33
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
5- FrameLayout :
 Il s'agit du layout le plus basique. Il permet de superposer des éléments, par exemple le
logo Android avec un texte sur cette image.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="match_parent"
android:layout_width="match_parent"/>

<TextView
android:text="Tutorial Android"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="#003399"
android:layout_height="match_parent "
android:layout_width="match_parent "
android:gravity="center"/>
</FrameLayout> ENSAJ 34
 Interface utilisateur et éléments graphiques
Les interfaces graphiques sous Android
 Les Layouts
6- ScrollView
Un ScrollView vous permet de mettre le contenu à l'intérieur de celui-ci, et si le contenu
dépasse la taille de la ScrollView, il permettra à l' utilisateur de faire défiler.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
……
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />

</LinearLayout>
</ScrollView> ENSAJ 35
 Interface utilisateur et éléments graphiques
Notions communes aux différents layout

• android:layout_gravity : pour positionner un élément à gauche, au milieu ou

à droite par rapport à son conteneur (permet de centrer du texte au milieu
de l'écran)
• android:inputType : les zones de saisie de texte peuvent être typées : simple
texte , numéro de téléphone, adresse email, mot de passe, ....

Par exemple android:inputType="textPassword« 

• android:hint : permet de saisir dans une zone de texte une explication sur la
zone de texte. Par exemple, indiquer qu'il s'agit de saisir son login.
• android:layout_weight : permet de donner du poids à un élément, ce qui
signifie que l'élément occupera plus ou moins d'espace

ENSAJ 36
 Interface utilisateur et éléments graphiques
Gestion des activités
 Cycle de vie d’une Activity
Une application Android est composée d’un ensemble de 4 éléments qui interagissent
entre eux.
Ces éléments sont : « Activité », « Service », « Broadcast Reciever » et « Content
Provider ».

ENSAJ 37
 Interface utilisateur et éléments graphiques
Gestion des activités
 Cycle de vie d’une Activity

1. L’activité est le premier composant essentiel permettant de gérer le cycle de

vie d'une application et l'interactivité avec l'utilisateur moyennant une
interface graphique.
2. Par extension, on dit que l’activité est grosso modo la forme disponible sur
l’écran.
3. Elle offre à l’utilisateur l’interface (écran) pour interagir avec l’application.
4. Chaque écran de l’application représente une activité.
5. Une application Android est composée d’une ou de plusieurs activités (un jeu
sur plusieurs écrans).
6. Une seule activité est lancée à la fois.

ENSAJ 38
 Interface utilisateur et éléments graphiques
Gestion des activités
 Description des états
- État « start » : Quand l’activité n’est pas encore
référencée en mémoire, elle est dans un état « start
».

- État « Resume » : une activité qui a le focus, Cette

activité se trouve au sommet de la pile.

- État « Pause » : une activité qui n’a pas le focus mais

reste visible à l’écran, est dans un état « Pause ».

- E- État « Stopped » : une activité qui n’est pas visible

à l’écran mais existe quand même en mémoire, est
dans un état « Stopped ».

- État « Destroyed » : quand l’activité n’est plus en

mémoire, elle est détruite.

ENSAJ 39
 Interface utilisateur et éléments graphiques
Navigation entre les activités
 Pile des activités

Quand une Activity se lance, elle se met tout en haut de la pile d'activités :
Cette pile a une structure de données de type « LIFO », c'est-à-dire qu'il n'est possible
d'avoir accès qu'à un seul élément de la pile, le tout premier élément, aussi
appelé sommet.

ENSAJ 40
 Interface utilisateur et éléments graphiques
Navigation entre les activités
 Les Intents :
Les objets de type Intent permettant de faire communiquer vos activités entre elles,
mais pas seulement : une activité communique des informations également à des
services de cette manière.
Vous utiliserez donc un intent pour :
- Une activité de votre application lance une seconde activité de votre programme (ou
d'un autre programme Android).
- Une activité de votre application lance un service de votre programme (ou d'un autre
programme).
- Un broadcast receiver reçoit un intent de l'OS lui-même ou d'une autre application
(type l'utilisateur vient de changer la langue ou le time zone).

Intent intent = new Intent(Mactivity_A.this, Mactivity_B.class);

startActivity(intent);

ENSAJ 41
 Interface utilisateur et éléments graphiques
Intents

Sur nos boutons déclenchant une action, il faut créer un intent pointant vers l'activité
voulue et lancer l'activité.

on crée l'intent pointant vers l'activité voulue : 

Intent intent = new Intent(this, Activity2.class); 

on fournit à l'intent les paramétres afin que l'activité recevant l'intent ait ces
informations : 
intent.putExtra(EXTRA_LOGIN, strUserName);
on démarre l'activité : startActivity(intent);
ENSAJ 42
 Interface utilisateur et éléments graphiques
Intents

ENSAJ 43
 Interface utilisateur et éléments graphiques
Intents
@Override
public void onClick(View v) {
final Context context = this;
Intent intent = new Intent(context, Screen2.class);
HashMap<String, String> data = new HashMap<>();
data.put("nom", nom.getText().toString());
data.put("email", email.getText().toString());
data.put("phone", phone.getText().toString());
data.put("adresse", adresse.getText().toString());
data.put("ville", ville.getSelectedItem().toString());
intent.putExtra("data", data);
startActivity(intent);
} Screen 2

Navigation Intent i = getIntent();

Serializable s = getIntent().getSerializableExtra("data");
if (s != null) {
HashMap data = (HashMap) s;
nom.setText("Nom : " + data.get("nom"));
email.setText("Email : " + data.get("email"));
phone.setText("Phone : " + data.get("phone"));
adresse.setText("Adresse : " + data.get("adresse"));
ville.setText("Ville : " + data.get("ville"));
} else {
}

ENSAJ 44
 Interface utilisateur et éléments graphiques
Gestion des activités
 Exemple Ecran de démarrage :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.d("Create","onCreate");
Thread t = new Thread(){
public void run(){
try {
sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}finally {
Intent intent = new Intent(getApplicationContext(), MainActivity2.class);
startActivity(intent);
}
}
};
t.start();
}
@Override
protected void onPause() {
super.onPause();
Log.d("Fin","Activité en pause");
finish(); ENSAJ 45
}
 Interface utilisateur et éléments graphiques
Spinner
Déclaration dans le fichier strings.xml

<array name="villes">
<item>Casa</item>
<item>Rabat</item>
<item>Fes</item>
<item>Figig</item>
</array>

Déclaration d’un spinner qui va contenir

la liste des villes

<Spinner
android:entries="@array/villes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ville" />

ENSAJ 46
 Interface utilisateur et éléments graphiques
Alert
 AlertDialog

1. AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);

2. alertDialogBuilder.setMessage("Are you sure,You wanted to make decision");
3. alertDialogBuilder.setPositiveButton("yes", new DialogInterface.OnClickListener() {
4. @Override
5. public void onClick(DialogInterface arg0, int arg1) {
6. Toast.makeText(MainActivity.this, "You clicked yes button", Toast.LENGTH_LONG).show();
7. }
8. });
9. alertDialogBuilder.setNegativeButton("No",new DialogInterface.OnClickListener() {
10. @Override
11. public void onClick(DialogInterface dialog, int which) {
12. finish();
13. }
14. });
15. AlertDialog alertDialog = alertDialogBuilder.create();
16. alertDialog.show();

ENSAJ 47
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
Les ListViews sont comme toutes les autres listes où nous avons une série d'éléments
alignés de manière verticale. Dans Android, ces listes sont utilisées de nombreuses
façons, généralement comme des menus pour accéder à différents écrans.

ENSAJ 48
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
La gestion des listes se divise en deux parties distinctes :
- Adapter : Les objets qui gèrent les donnée, On peut considérer un adaptateur comme
un intermédiaire entre les données et la vue qui représente ces données.
- AdapterView : gère l’affichage des données

ENSAJ 49
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView

Réalisation d’une liste simple se fait en 5 étapes :

1. Déclaration de la liste dans le fichier XML de

l’activity

2. Créer la vue type : le layout qui va être utilisé par

chaque ligne de la liste

3. Déclarer le tableau des données qui va peupler

les éléments de la liste

4. Instancier le « Adapter » qui va associer les

données et les vues

5. Attribuer le « Adapter » à votre ListView crée

ENSAJ 50
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
1. Déclaration de la liste dans le fichier XML de l’activity
Dans le fichier : /res/layout/main.xml , il faut déclarer la liste comme suit :

Code XML :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
         <ListView
              android:id="@+id/list"
              android:layout_height="wrap_content"
              android:layout_width="match_parent">
         </ListView>
 
</LinearLayout>
ENSAJ 51
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
2. Créer la vue type : le layout qui va être utilisé par chaque ligne de la liste
Créer le fichier : /res/layout/list_layout.xml , et créer le layout de la liste comme suit :

Code XML :

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16sp" >
</TextView>

ENSAJ 52
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
3. Déclarer le tableau des données qui va peupler les éléments de la liste:
Dans la class Java de votre Activity, créer la liste des données qui vont peupler la liste :

Code Java :
public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

String listItems[] = { "List Item 1", "List Item 2", "List Item 3",

"List Item 4", "List Item 5", "List Item 6", "List Item 7",
"List Item 8", "List Item 9", "List Item 10", "List Item 11",
"List Item 12" };
}
ENSAJ 53
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
4. Instancier le « Adapter » qui va associer les données et les vues
Dans la class Java de votre Activity, créer le Adapter de la liste :

Code Java :
public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String listItems[] = { "List Item 1", "List Item 2", "List Item 3",
"List Item 4", "List Item 5", "List Item 6", "List Item 7",
"List Item 8", "List Item 9", "List Item 10", "List Item 11",
"List Item 12" };
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,R.layout.list_layout, listItems);
} ENSAJ 54
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
5. Attribuer le « Adapter » à votre ListView crée

Code Java :
public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String listItems[] = { "List Item 1", "List Item 2", "List Item 3",
"List Item 4", "List Item 5", "List Item 6", "List Item 7",
"List Item 8", "List Item 9", "List Item 10", "List Item 11",
"List Item 12" };
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,R.layout.list_layout, listItems);
list.setAdapter(adapter);
} ENSAJ 55
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView
Réalisation d’une liste simple se fait en 5 étapes :
Aperçu du rendu ci après.

 Listeners
list.setOnItemClickListener(this);

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Toast.makeText(getApplicationContext(),
((TextView) view).getText(), Toast.LENGTH_SHORT).show();

parent The AdapterView where the click happened.

view The view within the AdapterView that was clicked (this will
be a view provided by the adapter)
position The position of the view in the adapter.
id The row id of the item that was clicked. ENSAJ 56
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView personnalisée

Réalisation d’une liste personnalisée se fait en 5

étapes :

1. Déclaration de la liste dans le fichier XML de

l’activity

2. Créer la vue personnalisée : le layout qui va être

utilisé par chaque ligne de la liste

3. Déclarer les données qui vont peupler les

éléments de la liste

4. Instancier le « Adapter » qui va associer les

données et les vues

5. Attribuer le « Adapter » à votre ListView crée

ENSAJ 57
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView personnalisée
1. Déclaration de la liste dans le fichier XML de l’activity
Dans le fichier : /res/layout/main.xml , il faut déclarer la liste comme suit :

Code XML :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
         <ListView
              android:id="@+id/list"
              android:layout_height="wrap_content"
              android:layout_width="match_parent">
         </ListView>
 
</LinearLayout>
ENSAJ 58
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView personnalisée
2. Déclaration de la liste dans le fichier XML de l’activity
Créer le fichier : /res/layout/list_layout.xml , et créer le layout de la liste .
Il faut créer le design suivant qui va être le même pour tous les éléments de la liste.
TextView

Parent RelativeLayout
ImageView

ImageView

TextView

ENSAJ 59
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView personnalisée
2. Déclaration de la liste dans le fichier XML de l’activity
Code source fichier : /res/layout/list_layout.xml
<RelativeLayout <TextView
xmlns:android="http://schemas.android.com/apk/res/androi android:id="@+id/title"
d" android:layout_width="wrap_content"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:text="title"
android:layout_height="wrap_content"
android:textSize="16dp"
android:orientation="vertical"
android:textStyle="bold" />
android:padding="5dp" > <TextView
android:id="@+id/desc"
<ImageView android:layout_width="wrap_content"
android:id="@+id/thumb" android:layout_height="wrap_content"
android:layout_width="80dp" android:layout_marginTop="5dp"
android:layout_height="80dp" android:text="desc vers "
android:contentDescription="@string/app_name" /> android:textSize="12dp" />
</LinearLayout>
<LinearLayout <ImageView
android:id="@+id/arrow"
android:layout_width="wrap_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" android:layout_alignParentRight="true"
android:layout_marginLeft="10dp" android:layout_centerVertical="true"
android:layout_marginRight="5dp" android:layout_marginRight="5dp"
android:layout_toLeftOf="@+id/arrow" android:contentDescription="@string/app_name"
android:layout_toRightOf="@+id/thumb" android:src="@drawable/arrow_next" />
android:orientation="vertical" > ENSAJ</RelativeLayout> 60
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView personnalisée
3. Déclaration des données de la liste

Code Java :

private String title[] = { "Cup Cake", "Donut", "Eclair", "Froyo",

"Ginger Bread", "Honey Comb", "Icecream Sandwich", "Jelly Bean" };

private String desc[] = { "version: 1.5", "version: 1.6",

"version: 2.0 & 2.1", "version: 2.2", "version: 2.3",
"version: 3.0", "version: 4.0", "version: 4.1" };

private int thumb[] = { R.drawable.cupcake, R.drawable.donut,

R.drawable.eclair, R.drawable.froyo, R.drawable.gingerbread,
R.drawable.honeycomb, R.drawable.icecreamsandwich,
R.drawable.jellybean, };

ENSAJ 61
 Interface utilisateur et éléments graphiques
@Override
Les éléments graphiques complexes public long getItemId(int position) {
// TODO Auto-generated method stub
 ListView personnalisée return position;
}
4. Instancier le « Adapter » @Override
public View getView(int position, View convertView,
Créer la classe suivante : ViewGroup parent) {
class VersionAdapter extends BaseAdapter { // TODO Auto-generated method stub

private LayoutInflater layoutInflater; View listItem = convertView;

int pos = position;
public VersionAdapter(MainActivity activity) { if (listItem == null) {
// TODO Auto-generated constructor stub listItem = layoutInflater.inflate(R.layout.list_item, null);
layoutInflater = (LayoutInflater) activity }
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
} ImageView iv = (ImageView)
listItem.findViewById(R.id.thumb);
@Override TextView tvTitle = (TextView) listItem.findViewById(R.id.title);
public int getCount() { TextView tvDesc = (TextView)
// TODO Auto-generated method stub listItem.findViewById(R.id.desc);
return title.length;
} // set the views in the layout
iv.setBackgroundResource(thumb[pos]);
@Override tvTitle.setText(title[pos]);
public Object getItem(int position) { tvDesc.setText(desc[pos]);
// TODO Auto-generated method stub return listItem;
return position; }
}

ENSAJ 62
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 ListView personnalisée
Il faut attribuer le Adapter a la liste pour finalement
avoir le rendu ci-après :

list.setAdapter(new VersionAdapter(this));

LayoutInflater class is used to instantiate

layout XML file into its corresponding View
objects. In other words, it takes as input an
XML file and builds the View objects from it.

ENSAJ 63
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 TabHost

Pour mettre en place des onglets dans une

vue, vous avez besoin des widgets et des
conteneurs suivants :

 TabHost est le conteneur général pour les

boutons et les contenus des onglets.
 TabWidget implémente la ligne des
boutons des onglets, qui contient les labels
et, éventuellement, des icônes.
 FrameLayout est le conteneur des
contenus des onglets : chaque contenu
d’onglet est un fils du FrameLayout.

ENSAJ 64
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 TabHost public class MainActivity extends TabActivity {
private TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost = getTabHost();
TabHost.TabSpec sec1 = tabHost.newTabSpec("Page 1");
sec1.setIndicator("Photo 1");
sec1.setContent(new Intent(this, Activity2.class));
tabHost.addTab(sec1);
TabHost.TabSpec sec2 = tabHost.newTabSpec("Page 2");
sec2.setIndicator("Photo 2");
sec2.setContent(new Intent(this, Activity3.class));
tabHost.addTab(sec2);
TabHost.TabSpec sec3 = tabHost.newTabSpec("Page 3");
sec3.setIndicator("Photo 3");
sec3.setContent(new Intent(this, Activity4.class));
tabHost.addTab(sec3);
tabHost.setCurrentTab(0);
}
ENSAJ 65
}
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 TabHost public class MainActivity extends TabActivity {
private TabHost tabHost;
On retrouve notre TabHost via un @Override
appel à la méthode getTabHost(). protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
On crée ensuite une instance de setContentView(R.layout.main);
TabSpec via un appel à tabHost = getTabHost();
newTabSpec() auquel on passe un TabHost.TabSpec sec1 = tabHost.newTabSpec("Page 1");
marqueur. On appelle les sec1.setIndicator("Photo 1");
méthodes setContent() et sec1.setContent(new Intent(this, Activity2.class));
setIndicator() de cette instance, tabHost.addTab(sec1);
puis la méthode addTab() de TabHost.TabSpec sec2 = tabHost.newTabSpec("Page 2");
l’objet TabHost pour lui ajouter le sec2.setIndicator("Photo 2");
TabSpec. sec2.setContent(new Intent(this, Activity3.class));
tabHost.addTab(sec2);
Enfin, on choisit l’onglet qui TabHost.TabSpec sec3 = tabHost.newTabSpec("Page 3");
s’affichera initialement, à l’aide de sec3.setIndicator("Photo 3");
la méthode setCurrentTab() (la sec3.setContent(new Intent(this, Activity4.class));
valeur 0 désigne le premier tabHost.addTab(sec3);
onglet). tabHost.setCurrentTab(0);
}
ENSAJ 66
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
 TabHost and Menu
public class MainActivity extends ActionBarActivity {

tabHost = (TabHost)findViewById(R.id.tabhost);
LocalActivityManager lam = new LocalActivityManager(this, false);
lam.dispatchCreate(savedInstanceState);
tabHost.setup(lam);

TabHost.TabSpec sec1 = tabHost.newTabSpec("Page 1");

sec1.setIndicator("Photo 1");
sec1.setContent(new Intent(this, Activity2.class));
tabHost.addTab(sec1);

TabHost.TabSpec tab3 = tabHost.newTabSpec("Page3");

tab3.setIndicator("",getResources().getDrawable(R.mipmap.emotic4));
tab3.setContent(R.id.tab3);
tabHost.addTab(tab3);

ENSAJ 67
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes
menu_main.xml
 Menu
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="@+id/save"
android:orderInCategory="100"
android:icon="@drawable/edit"
android:title="Save"
app:showAsAction="never" />
<item
android:id="@+id/edit"
android:orderInCategory="100"
android:icon="@drawable/save"
android:title="Exit"
app:showAsAction="ifRoom" />
<item
android:id="@+id/exit"
android:icon="@drawable/exit"
android:orderInCategory="100"
android:title=« Location"
app:showAsAction="ifRoom" />
</menu>
ENSAJ 68
 Interface utilisateur et éléments graphiques
Les éléments graphiques complexes public class MainActivity extends ActionBarActivity {
@Override
 Menu protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
onCreateOptionMenu : Permet de créer }
le menu à partir de fichier XML et le @Override
public boolean onCreateOptionsMenu(Menu menu) {
rajoute de la bar de menu. // Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
OnOptionItemsSelected : Présent un return true;
}
écouteur sur un élément de menu. Si un
@Override
click survient sur un élément de menu le public boolean onOptionsItemSelected(MenuItem item) {
traitement approprié sera lancé. int id = item.getItemId();
switch(id) {
case R.id.save :
Toast.makeText(this, "save", Toast.LENGTH_LONG).show();
Intent in = new Intent(this, MainActivity2.class);
startActivity(in);
return true;
case R.id.location :
Toast.makeText(this, "locate", Toast.LENGTH_LONG).show();
return true;
case R.id.exit :
Toast.makeText(this, "exit", Toast.LENGTH_LONG).show();
return true;
}
return super.onOptionsItemSelected(item);
ENSAJ } 69
}
 Interface utilisateur et éléments graphiques
Les unités

• sp for font sizes

• dip for everything else, where dip == dp
ENSAJ 70