ANDROID: LES LAYOUTS XML
MOHAMED BOURAOUI
[email protected]
Les interfaces graphiques simples
LES INTERFACES GRAPHIQUES SIMPLES
EXEMPLE
ImageButton
TextView
CheckBox
RadioButton
ToggleButton
RatingBar
LES CONTENEURS
LinearLayout: dispose les lments de gauche droite ou du
haut vers le bas
RelativeLayout: les lments enfants les uns par rapport aux
autres
TableLayout: disposition matricielle
FrameLayout: disposition en haut gauche en empilant les
lments (utiliss conjointement avec les fragments)
Webview :affiche le contenu d'une page web
CONTENEURS : ATTRIBUTS PRINCIPAUX
Orientation
Sens de placement des vues dans un conteneur
android:orientation = vertical | horizontal
Taille
Surface prise par la vue
android:layout_width = ??px | fill_parent | wrap_content
android:layout_height = ??px | fill_parent | wrap_content
Les units dp et sp sont indpendants de la rsolution
de lcran, Il est recommand dutiliser dp pour les
objets et sp pour les polices du texte.
Gravit
Alignement d'une vue dans son conteneur
android:layout_gravity = left | center_horizontal | top | bottom | right
LINEARLAYOUT: EXEMPLE
RELATIVELAYOUT: EXEMPLE
RELATIVELAYOUT: ATTRIBUTS
Placement par rapport au conteneur
android:layout_alignParentBottom="b" (o b vaut true ou false)
android:layout_alignParentLeft="b" (o b vaut true ou false)
android:layout_alignParentRight="b" (o b vaut true ou false)
android:layout_alignParentTop="b" (o b vaut true ou false)
android:layout_centerHorizontal="b" (o b vaut true ou false)
android:layout_centerInParent="b" (o b vaut true ou false)
android:layout_centerVertical="b" (o b vaut true ou false)
Placement par rapport aux autres lments
android:layout_above="@+id/ident"/
android:layout_below="@+id/ident"/
android:layout_toLeftOf="@+id/ident"/
android:layout_toRightOf="@+id/ident"/
android:layout_alignLeft="@+id/ident"/
android:layout_alignRight="@+id/ident"/
android:layout_alignTop="@+id/ident"/
android:layout_alignBottom="@+id/ident"/
TABLELAYOUT : DISPOSITION MATRICIELLE
<TableLayout>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2"
/>
</TableRow>
</TableLayout>
SCROLLVIEW
Ce layout permet de dfiler le contenu par une barre de dfilement
vertical si le contenu dpasse sa longueur. Pour appliquer ce layout, on
met son intrieur un autre type de layout (LinearLayout par
exemple) dans laquelle on met un contenu.
<?xml version ="1.0" ?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="2"
android:text="@string/texteAndroid"
android:textColor="@android:color/black" />
</LinearLayout>
</ScrollView>
HORIZONTALSCROLLVIEW
Ce layout nous permettra de dfiler le contenu mais cette fois-ci
dune manire horizontale. Exemple:
HORIZONTALSCROLLVIEW (2)
<?xml version ="1.0"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_weight="0.07"
android:src="@drawable/contact" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_weight="0.07"
android:src="@drawable/support" />
</LinearLayout>
</HorizontalScrollView>
LES LABELS DE TEXTE
Dclaration dans le layout
<TextView
android:id="@+id/le_texte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:layout_gravity="center"/>
Crer dynamiquement
LinearLayout gabarit = new LinearLayout(this);
gabarit.setGravity(Gravity.CENTER);
// centrer les lments
graphiques
gabarit.setOrientation(LinearLayout.VERTICAL);
// empiler vers le
bas !
TextView texte = new TextView(this);
texte.setText(Crer linterface dans le code");
LES ZONES DE TEXTE
Dclaration dans le layout
<EditText android:text=""
android:id="@+id/EditText01"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</EditText>
Crer dynamiquement
EditText edit = new EditText(this);
edit.setText("Edit me");
gabarit.addView(edit);
LES ZONES DE TEXTE : VNEMENTS
Intercepter les vnements de saisie
edit.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before,
int count) {
// do something here
}
);
LES IMAGES
Dclaration dans le layout
<ImageView
android:id="@+id/logoISET"
android:src="@drawable/iset"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
></ImageView>
Crer dynamiquement
ImageView image = new ImageView(this);
image.setImageResource(R.drawable.iset);
gabarit.addView(image);
LES BOUTONS
Dclaration dans le layout
<Button android:text="Go !"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
Intercepter lvnement
de clic
Button b = (Button)findViewById(R.id.Button01);
b.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), Cest un
clic!",Toast.LENGTH_LONG).show();
}
});
GESTION DES VNEMENTS : LES
LISTENERS
La gestion des vnements est assure par des interfaces Java, dont le
scnario est:
1. Associer lobjet sur lequel
on veut grer un ou plusieurs
vnements linterface
adquate, et on redfinit les
mthodes de cette dernire
avec le code Java qui sera
excut le moment ou
lvnement se produit.
2. linterface reste lcoute
des ventuels vnements.
3. un certain vnement
compatible se produit.
4. Linterface excutera alors le
code contenu dans la
mthode adquate.
RCAPITULATIF DES VNEMENTS
Evnements gnraux:
Tous les lments dinterface (conteneurs et widgets)possdent les
mthodes suivantes :
RCAPITULATIF DES VNEMENTS
Evnements spcifiques:
Pour EditText et TextView
LES LISTES
Limportance dune liste vient du besoin de drouler un nombre
important dlments. Pour ce faire, il suffit de crer un layout
linaire et dy implanter une ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout >
<ListView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_weight="1" />
</LinearLayout>
LES LISTES (2)
Etant donn qu'une liste peut contenir des lments graphiques
divers et varis, les lments de la liste doivent tre insrs
dans un ListAdapter.
Exemple : Une liste de chaines de caractres:
1. Cration du layout dun lment de la liste montexte.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:text="TextView"
android:id="@+id/montexte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
</TextView>
LES LISTES (2)
2. Layout de la liste
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="@+id/maliste">
</ListView>
</LinearLayout>
LES LISTES (4)
3. Instancier la ListeView
ListView list = (ListView)findViewById(R.id.maliste);
4. Ajouter dynamiquement un ArrayAdapter la
ListeView list
ArrayAdapter<String> tableau = new ArrayAdapter<String>(
list.getContext(), R.layout.maligne);
for (int i=0; i<40; i++) {
tableau.add("Ligne n " + i);
}
list.setAdapter(tableau);
LES LISTES (4)
Rsulta
t:
LES LISTES : EXEMPLE PLUS COMPLEXE
Lorsque les listes contiennent un layout plus complexe qu'un
texte, il faut utiliser un autre constructeur de ArrayAdapter:
ArrayAdapter(Contextcontext,intresource,inttextViewResourceId)
Ressource : Lidentificateur du layout appliquer chaque ligne.
textViewRessourceId: Lidentificateur de la zone de texte inclue
dans ce layout
LES LISTES : EXEMPLE PLUS COMPLEXE (1)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout>
1. Cration du layout
<TextView >
dun lment de la liste
</TextView>
montexte.xml
<LinearLayout
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:gravity="end"
android:layout_gravity="center">
<ImageView android:id="@+id/monImage"
android:layout_height="wrap_content"
android:contentDescription="demo"
android:layout_width="wrap_content"
android:src="@android:drawable/ic_menu_compass">
</ImageView>
</LinearLayout>
</LinearLayout>
LES LISTES : EXEMPLE PLUS COMPLEXE (2)
2. Layout de la liste
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:layout_height="fill_parent"
android:id="@+id/maliste"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
LES LISTES : EXEMPLE PLUS COMPLEXE (3)
3. Instancier la ListeView
ListView list = (ListView)findViewById(R.id.maliste);
4. Ajouter dynamiquement un ArrayAdapter la
ListeView list
ArrayAdapter<String> tableau = new ArrayAdapter<String>(
list.getContext(), R.layout.maligne, R.id.monTexte);
for (int i=0; i<40; i++) {
tableau.add("Ligne n " + i);
}
list.setAdapter(tableau);
LES LISTES : EXEMPLE PLUS COMPLEXE (4)
Rsulta
t:
INCLURE LES LAYOUTS
Les interfaces peuvent inclure dautres interfaces pour favoriser
la rutilisabilit des layouts. Pour linclusion, on utilise le mot cl
include
Exemple
Included.xml
principale.xml
principale.xml
<RelativeLayout>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/champ_txt
android:text="Ecrire ici 30 caractres" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/txt"/>
<include android:id="@+id/include01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
layout="@layout/included"
></include>
</RelativeLayout>
