Les interface graphiques sous android

5
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

description

Layout de base sous Androud

Transcript of Les interface graphiques sous android

Page 1: Les interface graphiques sous android

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

Page 2: Les interface graphiques sous android

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.

Page 3: Les interface graphiques sous android

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.

Page 4: Les interface graphiques sous android

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>

Page 5: Les interface graphiques sous android

M.Houssem LAHIANI