Interface
Interface
Interface
− Par programme
Fichier .XML
Le balisage XML est contenu dans de simples fichiers
Les fichiers XML qui décrivent une interface sont:
au format texte identifiés à l'aide de l'extension de
placés dans le répertoire res/layout.
fichier .xml.
référencés par R.layout.nom_du_fichierXML.
Les activités peuvent utiliser la méthode
Ces fichiers XML peuvent ensuite être lus ou setContentView(R.layout.nom_du_fichierXML)
"analysés" par le système d'exploitation Android, ou pour mettre en place l'interface décrite par un tel fichier.
le code Java de votre application, et transformés en Le bloc de base pour la création d'interfaces utilisateur
structures d'objet Java. est un objet View créé à partir de la classe View qui
occupe une zone à l'écran et est responsable du dessin et
de la gestion des événements.
Forme générale d’un fichier XML
En utilisant le vocabulaire XML d'Android, vous pouvez
Un document XML est constitué par des éléments ayant chacun une
rapidement concevoir des mises en page d'interface utilisateur balise de début, un contenu et une balise de fin.
et les éléments d'écran qu'elles contiennent, de la même
manière que vous créez des pages Web en HTML, avec une
Un document XML doit avoir exactement un élément racine (une
série d'éléments imbriqués. balise qui renferme toutes les autres balises). XML fait la distinction
entre les lettres majuscules et minuscules.
Chaque fichier layout doit contenir exactement un élément
Un fichier XML « bien formé » doit remplir les conditions suivantes :
racine, qui doit être un objet View ou ViewGroup. • un document XML commence toujours par un prologue
• chaque balise d'ouverture a une balise de fermeture ;
• toutes les balises sont complètement imbriquées.
Une fois que vous avez défini l'élément racine, vous pouvez
ajouter des objets layout en page ou des widgets
supplémentaires en tant qu'éléments enfants pour créer Un fichier XML est dit valide s'il est bien formé et s'il contient un lien
vers un schéma XML. Il est valide par rapport à ce schéma.
progressivement une hiérarchie View qui définit votre layout.
Forme générale d’un fichier XML Forme générale d’un fichier XML
<Classe_du_conteneur_principal
Un document XML commence toujours par un xmlns:android="http://schemas.android.com/apk/res
prologue qui décrit le fichier XML. /android"
propriétés du conteneur principal>
Ce prologue peut être minimal, par exemple: <Classe de conteneur ou d'élément d'interface
<?xml version="1.0"?> propriétés du conteneur ou de l'élément d'interface/>
…
Ou peut contenir d'autres informations, par exemple
<Classe de conteneur ou d'élément d'interface
l'encodage : <?xml version="1.0" encoding="UTF- propriétés du conteneur ou de l'élément d'interface/>
8" standalone="yes"?>
</Classe_du_conteneur_principal>
View --- ViewGroup Par exemple, voici un Layout XML qui utilise un LinearLayout vertical
pour contenir un TextView et un Button:
Dans une application Android, l’interface utilisateur est <?xml version="1.0" encoding="utf-8"?>
construite à l’aide d’objets de type View et ViewGroup. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" >
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ViewGroup est une sous-classe de View, fournit un android:text="Hello, I am a Button" />
conteneur invisible qui contient d'autres Views ou
</LinearLayout>
d'autres ViewGroups, et organise la manière dont sont
présents les composants. Après avoir déclaré votre layout au format XML, enregistrez le fichier avec
l'extension .xml dans le répertoire res / layout / de votre projet Android afin
qu'il soit correctement compilé.
Position
Gravité des éléments: Les éléments sont placé dans le
layout en haut et à gauche par défaut.
Pour positionner un élément autre part, on utilise l'attribut :
"android:gravity qui peut prendre différentes valeurs :
–android:gravity="top"
–android:gravity="bottom"
–android:gravity="left"
–android:gravity="right“
–android:gravity="center_horizontal"
–android:gravity="center_vertical"
Exemple:
android:padding="9px" (la valeur précise l’espace situé
entre le contour de l’élément et son contenu).
android:layout_margin="9px" (la valeur précise
l’espace situé entre le contour de l’élément et le contour
de ses voisins).
Espacement Unités de mesure dans les fichiers XML
Il est aussi possible de créer un
décalage uniquement sur l'un Les dimensions des éléments d’interface (taille, marges,
des côtés du widget …) peuvent être exprimées en :
password:
Attributs de LinearLayout
Attribut Description
LinearLayout : Exemple
android:id C'est l'identifiant qui identifie de façon unique le layout Suivez les étapes suivantes pour modifier l'application Android
« Hello World » et pour montrer comment créer votre propre
android:baseline Cela doit être une valeur booléenne, "true" ou "false" et application Android en utilisant Linear Layout.
Aligned empêche le layout d'aligner les lignes de base de ses enfants.
android:baselineAlig Lorsque LinearLayout fait partie d'un autre layout alignée sur
nedChildIndex la ligne de base, il peut spécifier lequel de ses enfants doit être Etape Description
aligné sur la ligne de base.
1 Utiliserez Android Studio pour créer une application Android sous le
android:divider Ceci est à utiliser comme un diviseur vertical entre les
nom ‘Demo’ par exemple
boutons. Vous utilisez une valeur de couleur.
2 Modifiez le contenu par défaut du fichier res / layout /
android:gravity Ceci spécifie comment un objet doit positionner son contenu, activity_main.xml pour inclure quelques boutons dans le
à la fois sur les axes X et Y. conteneur linéaire (LinearLayout).
3 Exécutez l'application pour lancer l'émulateur Android et vérifier le
android:orientation Ceci spécifie la direction de l'arrangement. Vous utilisez résultat des modifications effectuées dans l'application.
"horizontal" pour une ligne, "vertical" pour une colonne.
android:weightSum Somme des poids de l'enfant
Exemple 1 Exemple 1
res/layout/activity_main.xml
MainActivity.java.
Poids RelativeLayout
android: layout_weight Permet d’attribuer un permet de spécifier comment les
poids à élément en termes de la quantité d'espace vues enfants sont positionnées:
qu‘il doit occuper sur l'écran.
les unes par rapport aux autres
Le poids par défaut est zéro. (par rapport aux éléments frères).
Button
Positionnement 1 Positionnement 2
Attribut Description Attribut Description
android:layout_above="@id/e" Positionner l’élément au-dessus de android:layout_alignLeft="@+id/e" Le bord gauche de l’élément est
l‘élément référencé par son ID. aligné avec le bord gauche de
android:layout_below="@id/e" Positionner l’élément au-desous de l‘élément référencé par son ID.
l‘élément référencé par son ID. android:layout_alignRight="@+id/e" Le bord droit de l’élément est aligné
android:layout_toLeftOf="@id/e" Positionner l’élément à gauche de avec le bord droit de l‘élément
l‘élément référencé par son ID. référencé par son ID.
android:layout_alignBaseLine="@+id/e" Indique que les lignes de base des 2
android:layout_toRightOf="@id/e" Positionner l’élément à droite de
éléments sont alignées
l‘élément référencé par son ID.
android:layout_alignStart="@+id/e" le bord de début de l’élément
android:layout_alignTop="@id/e" Le bord supérieur de l’élément est
corresponde au bord de début de
aligné avec le bord supérieur de
l‘élément référencé par son ID.
l‘élément référencé par son ID.
android:layout_toEndOf ="@+id/e" le bord de fin de l’élément
android:layout_alignBottom="@id/e" Le bord inférieur de l’élément est corresponde au bord de fin de
aligné avec le bord inférieur de l‘élément référencé par son ID.
l‘élément référencé par son ID.
Exemple 1 Exemple 2
<Button
<Button android:id="@+id/Ok_butt" Exit android:id="@+id/Ok_butt" android:text="OK"
android:layout_width="wrap_content" Exit
android:text="OK"
android:layout_width="wrap_content" android:layout_height="wrap_content"
OK OK
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
android:layout_alignParentStart="true" android:layout_margingTop=“20dp“
android:layout_margingTop=“20dp“ android:padding=“50dp"/>
android:padding=“50dp"/>
<Button android:id="@+id/Exit_butt" <Button android:id="@+id/Exit_butt"
android:text=“Exit" android:text=“Exit"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content“ android:layout_height="wrap_content“
android:layout_toRightOf="@+id/Ok_butt" /> android:layout_toRightOf="@+id/Ok_butt“
android:layout_alignTop="@+id/Ok_butt" />
Exemple 3 TableLayout
<Button Android TableLayout permet
android:id="@+id/Ok_butt" android:text="OK" d’organiser des groupes de vues en lignes
android:layout_width="wrap_content" et en colonnes.
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
OK L’attribut <TableRow> est utilisé pour
android:layout_alignParentStart="true"
Exit créer une ligne dans la table.
android:layout_margingTop=“20dp“
android:padding=“50dp"/>
Chaque ligne a zéro ou plusieurs cellules;
<Button chaque cellule peut contenir un objet
android:id="@+id/Exit_butt" View.
android:text=“Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content“
Les conteneurs TableLayout n'affichent
android:layout_toRightOf="@+id/Ok_butt“
pas de lignes de bordure pour leurs lignes,
android:layout_alignBottom="@+id/Ok_butt" />
colonnes ou cellules.
<TableRow
<TableRow android:layout_height="wrap_content"
android:layout_width="match_parent">
android:layout_height="wrap_content"
android:layout_width="match_parent"> <Button android:layout_width="match_parent"
android:layout_height="wrap_content" android:text="
Ligne 1 Colonne 1" android:background="#b0b0b0"
<Button android:layout_width="match_parent" android:padding="5dp"/>
android:layout_height="wrap_content" android:text="
<Button android:layout_width="match_parent"
Ligne 2 Colonne 1" android:background="#dcdcdc" android:layout_height="wrap_content" android:text="
android:padding="5dp"/> Ligne 1 Colonne 2" android:background="#dcdcdc"
android:padding="5dp"/>
</TableRow> </TableRow>
</TableLayout>
Exemples
Widgets de base
Les widgets sont un aspect essentiel de la personnalisation de
l'écran d'accueil. Ils sont des objets des données et des
fonctionnalités les plus importantes d'une application, accessibles
directement à partir de l'écran d'accueil de l'utilisateur.
Chaque type de widgets est une classe qui dérive de la classe "View".
o EditText o TextView
<EditText android:id="@+id/editText1“ <TextView android:id="@+id/TextView1“
android:layout_width="wrap_content“
android:layout_height="wrap_content" android:layout_width="wrap_content“
android:ems="10" android:hint="name" android:layout_height="wrap_content"
android:inputType="textPersonName" /> android:layout_centerHorizontal="true"
<EditText android:id="@+id/editText2"
android:text="Before Clicking"
android:layout_width="wrap_content" android:textColor="#f00"
android:layout_height="wrap_content" android:textSize="25sp"
android:ems="10" android:hint="password_0_9"
android:textStyle="bold|italic"
android:inputType="numberPassword" />
android:layout_marginTop="50dp" />
boolean b=ch.isChecked();
o o
RadioButton RadioGroup
<RadioButton android:id="@+id/RBut1 " <RadioGroup
android:layout_width=“match_parent " android:layout_width=“wrap_content "
android:layout_height="wrap_content"
android:layout_height="wrap_content" android:orientation= " vertical" >
android:text= " I am a radiobutton" />
RadioButton
android:layout_width=“wrap_content"
android:layout_height="wrap_content"
android:text= "OUI"
android:checked= “true" />
RadioButton
android:layout_width=“wrap_content"
android:layout_height="wrap_content"
• Pour vérifier si un RadioButtonest coché: android:text= “NON" />
RadioButton ch= (RadioButton) this.findViewById (R.id.RBut1);
</RadioGroup>
boolean b=ch.isChecked();
o Toast Gérer l’ évènement de clic
Andorid Toast peut être utilisé pour afficher
des informations à l’utilisateur pour une
courte période de temps. 1.Utiliser un click listener(l’interface
Un toast contient un message à afficher
OnClickListener)
rapidement et disparaît après un certain
temps sans intervention de l’utilisateur. Package android.view.View.OnClickListener
Vous pouvez également créer un toast
personnalisé, par exemple un toast affichant
une image. 2. Utiliser l’attribut
Un "toast" est une instance de la classe android:onClick dans un fichier xml
"Toast" (android.widget.Toast)
toast.show();