4. Propriétés de l'écran
Un écran a des propriétés physiques comme la taille
et la résolution.
la taille de l'écran - une distance entre deux coins
opposés des écrans, habituellement mesurées en
pouces.
Résolution - un certain nombre de points
horizontalement et verticalement, ce qui l'écran est
capable d'afficher, en pixels.
Exemple :
Ecran HTC Desire smartphone : Taille de l'écran 3,7 pouces,
résolution = 800x480 pixels.
1 inch = 2.54 cm, 1 cm = 0.39370079 in
1 inch = 2.54 cm, 1 cm = 0.39370079 in
5. Propriétés de l'écran (unités de mesure)
Pour le développement d'application Android, il y en a 6 unités de mesure :
dp : Density Independent Pixel ( Densité de pixels indépendant) - Unité abstraite qui
est basés sur la densité physique de l'écran. Cette unité est égale à 160 DPI (Points
par pouce) par écran. Cette dimension sera utilisé pour la mise en page des éléments.
Elle permet aux applications de se ressemblent sur différents écrans et résolutions.
sp : Scale independent Pixel (Echelle de pixels indépendant) - Utilisé pour les tailles
de polices. On pourrait comparé cette unité aux em du développement web. La police
peut être plus ou moins grosse suivant les préférences utilisateurs.
pt : Point - 1/72 of an inch. basé sur la taille physique de l'écran.
px : Pixels - Corresponds aux pixels réels de l'écran. Cette unité de mesure n'est pas
recommandées car le rendu sur les différents types d'écran peut être différents. Le
nombre de pixels par pouce peut varier suivant les appareils.
mm : Millimètre - basée sur la taille physique de l'écran
in : Inches (Pouces) - basée sur la taille physique de l'écran.
6. La base de l'IHM (Classe View)
La vue est l'élément de base de l'IHM
tous les composants graphiques
Héritent de cette classe View
ViewGroup contient
plusieurs View
Pattern Composite
7. Les layouts
Les layouts sont de type ViewGroup (conteneurs de
composants graphiques)
gèrent le placement des composants
Attributs XML obligatoires
largeur et hauteur (layout_width et layout_heigth)
fill_parent: remplit l'espace du conteneur parent, moins la marge
wrap_content: se dimensionne en fonction du contenu du
composant
match_parent: est remplacé par fill_parent depuis la version 8
les valeurs absolues: dip, px, mm, in, …
8. Paramètres de Layout
Divers propriétés sont disponibles sur les layouts
pour paramétrer l'affichage (en fonction des
layouts)
Il faut penser en terme
d'orientation
de remplissage
de poids
de gravité
9. Orientation
L’orientation (android:orientation) précise si un LinearLayout
représente une ligne (horizontal) ou une colonne (vertical)
pour une colonne.
En code java setOrientation() avec une paramètre constante
HORIZONTAL ou VERTICAL.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="@+id/view1" >
View =(LinearLayout)findViewById(R.id.view1);
view.setOrientation(LinearLayout.HORIZONTAL);
10. Modèle de remplissage
Les widgets sont, par défaut, serrés les uns contre les autres. Vous
pouvez augmenter l’espace intercalaire à l’aide de la propriété
android:padding (ou en appelant la méthode setPadding() de l’objet
Java correspondant au widget).
Pour utiliser des valeurs différentes en fonction des côtés, utilisez les
propriétés android:paddingLeft, android:paddingRight,
android:paddingTop et android:paddingBottom
11. Propriétés pour les marges externes
android:layout_marginBottom
android:layout_marginLeft ,
android:layout_marginRight
android:layout_marginTop
Exemple avec TableLayout :
margin left = 10 dp
margin top = 20 dp
12. Poids
comment deux widgets se partagent l'espace disponible ?
layout_weigth indique la proportion par widget
si 1 pour deux widgets l'espace libre est divisé en 2
si 1 pour un widget, et 2 pour le second, le second utilisera deux fois
moins d'espaces que le premier
layout_weigth=1 pour les deux boutons
layout_weigth = 1 pour B1
layout_weigth = 3 pour B2
layout_weigth = 1 pour B1
layout_weigth = 3 pour B2
layout_weigth = 2 pour B3
13. Gravité
Le paramètre layout_gravity gère le placement du widget dans le
layout. Il serait plus pratique de le démontrer à l'aide du
FrameLayout. Tous les éléments mis en elle, sont par défaut positionné
dans le coin en haut à gauche et ne sont pas alignés en aucune façon. Il
s'adapte très utile pour montrer les paramètres d'alignement.
<?xml version="1.0" encoding="utf8"?>
<LinearLayout … >
<FrameLayout
android:id="@+id/frameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:text="gravity = top left/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:text="gravity = top right"/> ….
14. Positions relatives par rapport à un conteneur
layout_alignParentTop : haut du widget aligné avec
celui du conteneur
layout_alignParentBottom : bas du widget aligné
avec celui du conteneur
layout_alignParentLeft : bord gauche du widget
aligné avec celui du conteneur
layout_alignParentRigth : bord droit du widget aligné
avec celui du conteneur
layout_alignCenterHorizontal : widget centré
horizontalement
layout_alignCenterVertical : widget centré
verticalement
15. Position relative des widgets
Le contrôle du placement d'un widget par
rapport à un autre est effectué par :
android:layout_above le widget doit être placé
au-dessus de celui qu'il désigne
android:layout_below le widget doit être placé
sous celui qu'il désigne
android:layout_toLeftOf le widget doit être placé
à gauche de celui qu'il désigne
android:layout_toRightOf le widget doit être
placé à droite de celui qu'il désigne
andr
oi
d:
l
ayout
_t
oRi
ght
O f
= "@ + i
d/
bt
nLogi
n"
16. Alignement d'un widget
Alignement d'un widget par rapport à un autre
android:layout_alignTop le haut du widget est
aligné avec le haut du widget désigné
android:layout_alignBottom le bas du widget est
aligné avec le bas du widget désigné
android:layout_alignLeft le bord gauche du
widget est aligné avec le bord gauche du widget
désigné
android:layout_alignRight le bord droit du widget
est aligné avec le bord droit du widget désigné
android:layout_alignLBaseLine les lignes de base
des deux widgets doivent être alignées
<TextView android:id="@+id/labelURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="URL:"
android:layout_alignBaseline="@+id/entry"
android:layout_alignParentLeft="true"/>
<EditText
android:id="@id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/labelURL"
android:layout_alignParentTop="true"/>
18. Les Menus
Android supporte deux types de menu
les menus d'activité
les menus contextuels
La construction des menus peut être effectuée
Dynamiquement par programmation (programmatique)
Statiquement par déclaration dans un fichier XML
(déclarative)
méthode à privilégier
19. Menu : déclaration dans un fichier XML
La déclaration des menus est effectuée dans un fichier XML
situé dans res/menu
La syntaxe est simple
la racine menu accepte des balise
item pour un élément de menu
menu pour déclarer un sous-menu
Deux niveaux maximum (menu sous-menu )
Principaux attributs de la balise item
title: titre de l'élément de menu
icon: icône de l'élément de menu
onClick: méthode de l'activité à invoquer (depuis Android 3)
checked: présélection de l'élément du menu
21. Construction dynamique
Exemple (suite)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
SubMenu submenu = menu.addSubMenu(99, 777, 101, "Signets");
submenu.add(99, 778, 101, "AdrooidNote");
submenu.add(99, 779, 101, "JavaNote"));
menu.getItem(0).setIcon(R.drawable.bookmarks);
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
menu.getItem(0).setTitle("Agenda" +
System.currentTimeMillis());
return super.onPrepareOptionsMenu(menu);
}
transformer le
fichier menu.xml
en menu
transformer le
fichier menu.xml
en menu
22. Événement lors d'un choix (clique) dans un menu
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.agenda: Toast.makeText(this, "Agenda",
Toast.LENGTH_SHORT).show(); break;
case R.id.rdv: Toast.makeText(this, "RDV " + System.currentTimeMillis(),
Toast.LENGTH_SHORT).show(); break;
case R.id.rappel : Toast.makeText(this, "Rappel " +
System.currentTimeMillis(),
Toast.LENGTH_SHORT).show(); break;
case 777: Toast.makeText(this, "Signets", Toast.LENGTH_SHORT).show(); break;
case 778: Toast.makeText(this, "AdrooidNote", Toast.LENGTH_SHORT).show();
break;
case 779: Toast.makeText(this, "JavaNote", Toast.LENGTH_SHORT).show();break;
}
return super.onOptionsItemSelected(item);
}
23. Menu Contextuel
Un menu contextuel apparaît si l'utilisateur effectue un appui long sur
l'écran
Il faut donc que l'appui long soit géré par le widget possédant le
menu contextuel
méthode registerForContextMenu: appeler cette méthode après
setContentView, lorsque la vue est construite.
la méthode reçoit l'identifiant du widget sur lequel ajouter le menu contextuel
La création du menu est effectuée dans la méthode
onCreateContextMenu
La méthode onContextItemSelected est utilisée pour traiter le choix
de l'utilisateur
24. Création d’un menu contextuel
RelativeLayout view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = ((RelativeLayout) findViewById(R.id.view1));
registerForContextMenu(view);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo
menuInfo) {
this.onCreateOptionsMenu(menu);
super.onCreateContextMenu(menu, v, menuInfo);
}
@Override
protected void finish() {
unregisterForContextMenu(view);
super.finish();
}
@Override
protected void finish() {
unregisterForContextMenu(view);
super.finish();
}
Vous pour spécifier une
autre façon de présenté le
menu
Vous pour spécifier une
autre façon de présenté le
menu
25. Evénement lors du choix dans le menu
contextuel
@Override
public boolean onContextItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.agenda:
Toast.makeText(this, "Context Menu (Agenda)",
Toast.LENGTH_SHORT).show();
break;
case 777:
Toast.makeText(this, "context Menu (Signets)",
Toast.LENGTH_SHORT).show();
break;
}
return super.onContextItemSelected(item);
}
@Override
public boolean onLongClick(View v) {
v.showContextMenu();
return false;
}
26. Résumé : méthodes relatives aux menus et
menus contextuels
onCreateOptionsMenu - est invoqué que lorsque le menu est affiché pour la première
fois. Crée un menu et n'est pas plus utilisé. Nous ajoutons des éléments de menu ici.
onPrepareOptionsMenu - invoqué à chaque fois avant d'afficher le menu. Nous apportons
des changements au menu déjà existant si cela est nécessaire.
onOptionsItemSelected(MenuItem) appelée lors d'un choix dans un menu de
l'activité. Le paramètre est le choix effectuéon
onOptionsMenuClosed(Menu) appelée lors de la fermeture d'un menu de l'activité. Le
paramètre est le menu fermé.
onCreateContextMenu(ContextMenu, View, ContextMenu.ContextMenuInfo) appelée
lorsqu'un menu contextuel est affiché. Le 1er paramètre est ce menu contextuel, le
2ème est l'élément d'interface auquel il est associé, le dernier donne des informations sur le
contenu de l'élément d'interface qui a causé l'apparition du menu contextuel
27. Résumé : méthodes relatives aux menus et
menus contextuels
registerForContextMenu(View) associe un menu contextuel à
l'élément passé en paramètre
unregisterForContextMenu(View) supprime l'association du
menu contextuel à l'élément passé en paramètre
onContextItemSelected(MenuItem) appelée lors d'un choix
dans un menu contextuel. Le paramètre est le choix effectué.
onContextMenuClosed(ContextMenu) appelée lors de la
fermeture d'un menu contextuel.Le paramètre est le menu fermé.
29. Widgets de sélection (ListView)
Les cases à cocher ou boutons radio
permettent des sélection sur une petite
groupe d'items
ListView (comme Spinner, Gallery, …)
Permet la sélection sur une large groupe
d'items.
Il peut aussi afficher plus d'informations
30. Widgets de sélection (Vues – Adaptateurs)
Le développement autour de ces widgets utilise
des layouts spécifiques
Android fournit des layouts de base
nous pouvons développer les nôtres
des adaptateurs de données
permet de remplir le composant graphique avec le contenu d'une source
de données
tableau, liste, base de données
Database
Database
Adapteur
Adapteur
ligne de données
liaison et mise en
forme des données
ListView
ListView
31. ListView
ListView est de type ViewGroup et constituée de lignes
chaque ligne est une vue enfant du ViewGroup qui prend en
charge l'affichage des données d'un élément de la liste.
Les données à afficher sont de provenance divers
la liste utilise un ListAdpater qui lie la vue aux données
Android fournit plusieurs ListAdapter
ArrayAdapter<T> pour les données de type tableau
CursorAdapter pour les données stockées en base
SimpleCursorAdapter pour les données de type String ou
image stockées en base
etc.
32. ListView et Activity
ListView peut être géré par une activité
ListActivity simplifie la gestion de
l'activité en fournissant des méthodes
support
récupère une ListView depuis les
ressources layout
Qui doit être identifiée par @android:id/list
33. ListView et adaptateur
La classe ListView possède une méthode setAdapter(...) qui lie
la vue avec les données
L’adaptateur possède son propre constructeur
si l'activité hérite de ListActivity, la méthode est dans l'activité.
en cas d'utilisation des layout par défaut l'identifiant de la
ListView doit être android:id/list
< Li
st
Vi
ew
andr
oi
d:
i
d= "@ androi
d:
i
d/
l
i
st
"
andr
oi
d:
l
ayout
_w i
dt
h= "fi
l
l
_parent
"
andr
oi
d:
l
ayout
_hei
ght= "fi
l
l
_cont
ent
"/
>
34. Exemple ListView avec ArrayAdapter<T>
public class MainActivity extends ListActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] values = new String[] { "Android", "iPhone",
"WindowsMobile",
"Blackberry", "WebOS", "Ubuntu",
"Windows7", "Max OS X",
"Linux", "OS/2" };
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, values);
setListAdapter(adapter);
}
@Override
protected void onListItemClick(ListView l,View v,int
position,long id) {
String item = (String) getListAdapter().getItem(position);
Toast.makeText(this, item + " selected",
Toast.LENGTH_LONG).show();
}
• android.R.layout.simple_list_item_1 : layout par défaut pour les lignes. Il
comprend un objet unique de type TextView
• android.R.layout.simple_list_item_2 : comprend deux objets de type
TextView, le second en dessous du premier dans une taille plus petite
• android.R.layout.simple_list_item_1 : layout par défaut pour les lignes. Il
comprend un objet unique de type TextView
• android.R.layout.simple_list_item_2 : comprend deux objets de type
TextView, le second en dessous du premier dans une taille plus petite