UV1- ANDROID

Cours 4 – comment construire une interface

Ecrans

• Android doit s’adapter à différents écrans • Il les classe en quatre catégories :

– Small : 2,5 pouces ou 6,35 cm – Normal : 4 pouces ou 10 cm – Large : 7 pouces ou 18 cm – Xlarge : 10 pouces ou 25 cm

• Android classe aussi les écrans selon leur densité de pixels : – Ldpi (faible) : 120 dpi – Mdpi (moyenne) : 160 dpi – Hdpi (haute): 240 dpi – Xhdpi (très haute) : 320 dpi

ncontant 2

Ecrans

• Note : les dp ou dip à ne pas confondre avec les dpi

– Dp ou dip : density independent pixel

– Proportionnelle à la résolution de l’écran donc varie avec l’écran.

Donc il est préférable d’utiliser les dip

ncontant 3

Interface

• Activités et layout

– Chaque écran que voit l’utilisateur est implémenté par une classe qui hérite de la classe Activity

– Une et une seule activité est lancée au démarrage de l’application

– Chaque activité est déclarée dans le Manifest.xml avec la balise <activity>

ncontant 4

Interface

• Pour concevoir une interface, deux modes :

– Déclaratif : dans des fichiers xml nommés fichiers de Layout

– Programmatique : dans le code java de l’activité

• Chaque fichier layout sera liée à l’activité par la méthode setcontentView

ncontant 5

Interface

• La classe ViewGroup est une vue qui permet de contenir d’autres vues. On l’appellera un conteneur de vues

• L’interface utilisateur d’une activité est composée d’un ensemble de vues et de conteneurs de vues avec une hiérarchies qui permet d’ordonner l’affichage des vues

ncontant 6

Interface

• Les éléments graphiques proviennent de la classe View

• Ces éléments peuvent être regroupés dans une ViewGroup

• Des ViewGroup particuliers sont prédéfinis : ce sont des gabarits(layout)

ncontant 7

Les Layouts

• Ce sont des conteneurs de vues prédéfinis fournis par Android.

• Il permet une mise en page des vues, les unes par rapport aux autres ou par rapport au conteneur parent

ncontant 8

Les Layouts

ncontant 9

• LinearLayout: dispose les éléments de gauche à droite ou du haut vers le bas

• RelativeLayout: les éléments enfants sont placés les uns par rapport aux autres

• TableLayout: disposition sous forme de tableau

• FrameLayout: disposition en haut à gauche en empilant les éléments

Les Layouts

ncontant 10

• GridLayout: disposition matricielle avec N colonnes et un nombre infini de lignes

Les déclarations se font principalement en XML, ce qui évite de passer par les instanciations Java.

Les Layouts

Attributs des gabarits

Les attributs des gabarits permettent de spécifier des attributs supplémentaires. Les plus importants sont:

• android:layout_width et android:layout_height:

="match_parent": l'élément remplit tout l'élément parent

="wrap_content": prend la place minimum nécessaire à l'affichage

ncontant 11

Interface

• android:orientation: définit l'orientation d'empilement

• android:gravity: définit l'alignement des éléments

ncontant 12

Interface

Exemple : que va donnez ceci ? <LinearLayout android:orientation="vertical" android:layout_width="368dp" android:layout_height="495dp" android:id="@+id/accueilid" android:gravity="center" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="8dp" android:weightSum="1"> <TextView android:id="@+id/le_texte" android:text=« Bonjour" android:layout_width="188dp" android:layout_height="108dp" android:layout_weight="0.91" /> <TextView android:id="@+id/le_texte2" android:layout_width="169dp" android:layout_height="111dp" android:layout_weight="0.09" android:text=« Re-Bonjour" /> </LinearLayout>

ncontant 13

Interface

ncontant 14

Interface

Et cela ?

Si on enlève android:gravity="center"

On obtient les deux zones textes toujours l’une au dessus de l’autre mais alignés à gauche

ncontant 15

Interface

• Si on a android:orientation="horizontal"

• On obtient les deux zones textes côte à côte

ncontant 16

Les widgets

• Est un composant de l’interface grapique qui peut ou pas interagir avec l’utilisateur

• Ils peuvent avoir un identifiant : @+id/nom

• Ils font partie du paquetage android:widget

ncontant 17

Les widgets

• Le textView qui permet d’afficher une chaine de caractères que l’utilisateur peut modifier.

• EditText : champ de texte de saisie

• Le button, checkbox, radiobutton et radiogroup

• Les listes déroulantes (spinner), les barres de progression (progressbar), les images (imageview) etc

ncontant 18

Les widgets

• Exemple :

<TextView

android:layout_width=« wrap_content"

android:layout_height="wrap_content"

android:text="@string/textView"

android:textSize="18dp"

android:textColor="#991166" />

ncontant 19

Les widgets

ncontant 20

Les widgets

• Les différents éléments que vous créez sont par défaut serrés les uns contre les autres. Vous pouvez augmenter l’espacement à l’aide de la propriété android:padding (padding top, left, right et bottom). La valeur précise l’espace situé entre le contour de l’élément et son contenu réel. Par exemple pour un bouton c’est l’espacement entre le contour du bouton et son texte.

ncontant 21

Widget

ncontant 22