M.Houssem LAHIANI 
Cours de programmation sous Android 
Responsable de matière : Monsieur Houssem Lahiani. 
Chapitre 2 : L...
M.Houssem LAHIANI 
Chapitre 2 : Les interfaces graphiques sous Android 
Les interfaces sont définies via des fichiers XML....
M.Houssem LAHIANI 
II. RelativeLayout 
Le principe du RelativeLayout est de placer les éléments selon d’autres éléments du...
M.Houssem LAHIANI 
III. AbsoluteLayout 
Android fournit également le conteneur AbsoluteLayout, dont le contenu est disposé...
M.Houssem LAHIANI
Prochain SlideShare
Chargement dans…5
×

Les interface graphiques sous android

750 vues

Publié le

Layout de base sous Androud

Publié dans : Mobile
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
750
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
44
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les interface graphiques sous android

  1. 1. M.Houssem LAHIANI Cours de programmation sous Android Responsable de matière : Monsieur Houssem Lahiani. Chapitre 2 : Les interfaces graphiques sous android Plan du chapitre Chapitre 2 : Les interfaces graphiques sous Android ......................................................................................................... 2 I. LinearLayout ................................................................................................................................................................ 2 1. Orientation du Layout ............................................................................................................................................. 2 2. Taille des éléments .................................................................................................................................................. 2 II. RelativeLayout ........................................................................................................................................................ 3 1. Positionnement relatif au conteneur...................................................................................................................... 3 2. Position relative aux autres éléments .................................................................................................................... 3 III. AbsoluteLayout ........................................................................................................................................................ 4 IV. TableLayout ............................................................................................................................................................. 4
  2. 2. M.Houssem LAHIANI Chapitre 2 : Les interfaces graphiques sous Android Les interfaces sont définies via des fichiers XML. Ce format permet d'avoir un éditeur graphique d'interface et d'avoir une vraie séparation entre votre code Java (comportement) et votre interface. Tout ce qui est fait en XML pourrait également être fait en Java, cependant le code serait beaucoup plus verbeux et complexe à maintenir. Les interfaces développées en Java sont principalement utilisé comme le visuel d'un écran doit être généré dynamiquement en fonction des données (un formulaire dynamique par exemple). Il existe plusieurs types de layouts parmi lesquels : I. LinearLayout Ce layout permet de placer les composants « les uns après les autres ». Il faut ensuite savoir de quelle manière (verticalement ou horizontalement). Plusieurs propriètés sont disponibles pour permettre aux développeurs de personnaliser ce Layout. 1. Orientation du Layout C’est la première chose que vous précisez quand vous créez votre LinearLayout (android:orientation). Cette option spécifie la façon dont seront alignés les éléments contenus dans ce Layout. Deux options sont disponibles :  Verticale : Oriente les éléments sur une ligne verticale.  Horizontale : Oriente les éléments sur une ligne horizontale. 2. Taille des éléments Le LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur et largeur). Donc ils doivent définir les deux propriétés suivantes :  android:layout_width  android:layout_height Ces deux propriétés peuvent prendre 3 types de valeur :  Une taille fixe : par exemple 50px (pixels). Donc quel que soit la taille de l’écran, l’élément occupera exactement 50px.  fill_parent : Dans ce cas on demande au composant d’occuper tout l’espace disponible chez son conteneur parent (après le placement des autres widgets).  wrap_content : Lorsqu'un layout a cette propriété, sa taille dépend directement de la taille des composants qu'il contient. Pour demander au Widget d’occuper une taille naturelle (la taille de son contenu pour le texte par exemple). S’il est trop gros par rapport à la taille disponible. Android s’occupera par exemple de couper le texte s’il n’y a plus de place.
  3. 3. M.Houssem LAHIANI II. RelativeLayout Le principe du RelativeLayout est de placer les éléments selon d’autres éléments du conteneur. Voici les différents moyens qui sont à votre disposition pour le placement des éléments dans le cas d’un RelativeLayout : 1. Positionnement relatif au conteneur Dans cette relation, vous pouvez lier un élément à son conteneur :  android:layout_alignParentTop (true / false) : Cette option permet de préciser si le haut de l’élément doit être aligné avec celui de son conteneur.  Même principe pour : android:layout_alignParentBottom, android:layout_alignParentLeft et android:layout_alignParentRight.  android:layout_centerHorizontal : Indique si l’élément doit être centré horizontalement dans son conteneur.  Même principe pour : android:layout_centerVertical.  android:layout_centerInParent : Vous permet d’indiquer que l’élément doit être centré horizontalement et verticalement dans le conteneur. 2. Position relative aux autres éléments Afin de pouvoir référencer le positionnement d’un élément par rapport à un autre, vous disposez d’un moyen simple et efficace, il s’agit des identificateurs (ID). Donc voilà comment vous pouvez utiliser un ID :  A la déclaration d’un élément : android:id= “@+id/idElem”  A l’utilisation : @id/idElem Maintenant que les bases sont posées, voici les différentes options disponibles :  android:layout_above : Indique que l’élément sera placé au-dessus de celui indiqué par son id.  android:layout_below : Indique que l’élément sera placé en dessous de celui indiqué par son id.  android:layout_toLeftOf : Indique que l’élément sera placé à gauche de celui indiqué par son id.  android:layout_toRightOf : Indique que l’élément sera placé à droite de celui indiqué par son id.  android:layout_alignTop : Indique que le haut de notre élément est aligné avec le haut de l’élément indiqué.  android:layout_alignBottom : Indique que le bas de notre élément est aligné avec le bas de l’élément indiqué.  android:layout_alignLeft : Indique que le côté gauche de notre élément est aligné avec le côté gauche de l’élément indiqué.  android:layout_alignRight : Indique que le côté droit de notre élément est aligné avec le côté droit de l’élément indiqué.  android:layout_alignBaseLine : Indique que les lignes de base des 2 éléments sont alignées.
  4. 4. M.Houssem LAHIANI III. AbsoluteLayout Android fournit également le conteneur AbsoluteLayout, dont le contenu est disposé en fonction de coordonnées spécifiques – on lui indique où placer un fils en précisant ses coordonnées X, Y, et Android le positionne à cet endroit sans poser de question. Ceci a l’avantage de fournir un positionnement précis; en revanche, cela signifie également que les vues n’auront un aspect correct que sur des écrans d’une certaine dimension, à moins d’écrire beaucoup de code pour ajuster les coordonnées en fonction de la taille de l’écran. Les écrans Android pouvant avoir n’importe quelle taille et ces tailles évoluent continuellement, l’utilisation d’AbsoluteLayout risque de devenir assez problématique. IV. TableLayout Dernier layout de base, il permet d'organiser les éléments en tableau, comme en HTML, mais sans les bordures. Voici un exemple d'utilisation de ce layout : <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- 2 columns --> <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dip" > <TextView android:id="@+id/textView1" android:text="Column 1" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button1" android:text="Column 2" /> </TableRow> <!-- edittext span 2 column --> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dip" > <EditText android:id="@+id/editText1" android:layout_span="2" android:text="Column 1 &amp; 2" /> </TableRow> </TableLayout>
  5. 5. M.Houssem LAHIANI

×