Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
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