SpinnerAdapter et ListAdapter sont des interfaces qui héritent de Adapter ❚ Spinner 19 Spinner ❚ C'est le composant graphique Android similaire au Combo box X\data\res\values\themes xml du sdk qui contient : qui redirige en fait sur
| Previous PDF | Next PDF |
[PDF] Interface graphique sous Android - IGM
Interface graphique sous Android res/layout : définition XML d'agencements de vues graphiques (sous forme Rendu graphique dans la thread principale
[PDF] Chapitre 3 Les interfaces utilisateurs avec Android - Cedric-Cnam
Les IHM graphiques avec Android Bibliothèque propre Pas AWT, ni Swing, ni Java ME / LCDUI Le premier est l'architecture de l'interface i e le placement des
[PDF] Chapitre 3 bis Les interfaces utilisateurs avancés avec Android
SpinnerAdapter et ListAdapter sont des interfaces qui héritent de Adapter ❚ Spinner 19 Spinner ❚ C'est le composant graphique Android similaire au Combo box X\data\res\values\themes xml du sdk qui contient : qui redirige en fait sur
[PDF] Annexe Android Studio (33)
Génération de variante et de multiple APK Non Oui Complétion de code et refactorisation Base Avancé Éditeur d'interface graphique Oui Oui Signature
[PDF] Développement dApplications Mobiles sous Android - LIRMM
Ressources limitées - Batterie (énergie), interface graphique, CPU, périphériques d'IO, Android Studio : https://developer android com/studio/ index html 18
[PDF] Programmation sous Android
Une fois le logiciel ouvert, cliquez sur le bouton Android SDK Manager pour ouvrir l'outil Layout Name : nom du fichier qui contiendra l'interface graphique qui
[PDF] Programmation Android L3 informatique - LIM
l'IDE Android Studio (attention : Eclipse+ADT deprecated) Déploiement : Composant élémentaire des interfaces graphiques sous Android : instance de la
[PDF] Interface graphique XML - Ivan Madjarov
L'interface graphique est définie dans des fichiers XML présents dans le dossier res/layout d'un projet Android Studio Interface graphique avec XML IvMad
[PDF] TP : Initiation au développement sur Android
Minimum required SDK : API 14 (Ice Cream Sandwich) Next [Blank activity] Adaptons à présent l'interface graphique au besoins de notre application :
[PDF] tp android corrigé
[PDF] tuto android studio
[PDF] le jet d'eau de genève exercice
[PDF] état d'agrégation définition
[PDF] condensation solide
[PDF] exemple de sublimation
[PDF] fluide frigorigène
[PDF] "extraits de romans célèbres"
[PDF] récit policier exemple
[PDF] norme photo visa canada
[PDF] photo format passeport canada
[PDF] programmation linéaire dualité exercices corrigés
[PDF] photo immigration canada
[PDF] photo visa canada maroc
© JMF (Tous droits réservés) 1
Chapitre 3 bis
Les interfaces utilisateurs
avancés avec Android© JMF (Tous droits réservés) 2
Les IHM des smartphones
Pas seulement clavier écran
Mais écran tactile
GPSEnregistrement de messages audio (notes audio)
Prendre des photos, des vidéos, les envoyer par le réseau (MMS) SMS© JMF (Tous droits réservés) 3
Révision de l'épisode
précédent En Android, on construit les IHM plutôt avec un fichier XML rangé dans res\layout mon_ihm.xml contenant par exemple : Ce fichier est repéré dans le code Java par R.layout.nomBaseFichier et on positionne l'IHM de l'activité à l'aide de ce fichier par setContentView(R.layout.nomBaseFichier); On récupère un composant graphique particulier de l'IHM par la méthode "miracle" findViewById(R.id.idDuComposant); Remarque : les R. sont des int qui ont été généré par l'environnement dans le fichier R.java© JMF (Tous droits réservés) 4
Taille : différence entre px,
px : Pixels - corresponds to actual pixels on the screen in : Inches - based on the physical size of the screen mm : Millimeters - based on the physical size of the screen pt : Points - 1/72 of an inch based on the physical size of the screen source : http://stackoverflow.com/questions/2025282/difference-of-px-dp-dip-and-sp-in-android© JMF (Tous droits réservés) 5
Taille : différence entre px,
dp : Density-independent Pixels - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp" En fait en général dp = (resolution en dpi/160) px . Sur un écran de résolution de 160 dpi, dp = px mais si la résolution est 320 dpi, on a plutôt1 dp = 2 pixels
Conclusion ;: expression en dp => le système convertit cette unité en pixels physiques => l'image aura la même taille quel que soit l'écran source :© JMF (Tous droits réservés) 6
Taille : différence entre px,
sp : Scale-independent Pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preferences source : http://stackoverflow.com/questions/2025282/difference-of-px-dp-dip-and-sp-in-android© JMF (Tous droits réservés) 7
Les bouton radios
A l'intérieur d'une boite de regroupement : le RadioGroupUn android.widget.RadioGroup est un ViewGroup
est, par exemple, codé par :© JMF (Tous droits réservés) 8
Gestion des événements
C'est similaire aux boutons "poussoirs"
Avec le code précédent :
rb1 = (RadioButton) findViewById(R.id.RB1); rb1.setOnClickListener(new RadioGroup.OnClickListener() { public void onClick(View v){ // code lancé lorsque l"utilisateur sélectionne // le premier bouton radio© JMF (Tous droits réservés) 9
Styles et Thèmes
Un style est un ensemble de propriétés précisant l'aspect de composants graphiques (View) Il est défini dans un fichier XML séparé de l'IHM Cette notion est similaire au CSS (Cascading StyleSheets) pour le web avec la même philosophie : séparer le contenu de l'aspect De même que pour les CSS, ces informations de style sont hiérarchiséesUn thème est un style pour une Activity
Une activity ayant un thème associé transmets les indications du thème à toutes les View contenus dans l'activité source :© JMF (Tous droits réservés) 10
Séparer contenu et aspect
Au lieu d'écrire
on écrira plutôt et les informations de style sont repérées par l'identificateurCodeFont
CodeFont est en fait une entrée (i.e. un élement XML) dans un fichier de style© JMF (Tous droits réservés) 11
Fichier de styles
Un fichier de styles est un fichier XML de nom quelconque rangé dans res/values. Son noeud racine doit être resources. Exemple Chaque style est un élément XML style. Le nom du style est la valeur de l'attribut name. Il contient une suite de sous éléments item précisant une partie du style. Le corps de la balise item est la valeur de cet item Les styles peuvent être rangés par arborescence. On le précise par l'attribut(optionnel) parent
© JMF (Tous droits réservés) 12
Héritage des styles
Définir une nouvelle valeur pour un attribut de style écrase l'ancienne valeur (si elle existe) pour cet attribut On peut hériter de styles prédéfinis par Android et, dans ce cas, on utilise parent comme dans : On peut hériter de ses propres styles et, dans ce cas, on utilise la notation . comme dans : Le style défini est CodeFont.Red. Il récupère les valeurs du style CodeFont. On l'utilise comme dans @style/CodeFont.Red On peut créer une arborescence de style comme CodeFont.Red.Big© JMF (Tous droits réservés) 13
Les thèmes
Un style appliqué à un Viewgroup ne se propage pas pour les composants contenus dans le ViewGroup Un thème appliqué à une activité est propagé à tous les composants de l'activité Les indications de thème sont écrits dans le AndroidManifest.xml à l'aide l'attribut android:theme de la balise application : On peut utiliser les thèmes prédéfinis d'Android :Les styles et thèmes proposés par Android sont accessibles à partir de http://developer.android.com/guide/topics/ui/themes.html#Platfo
rmStyles© JMF (Tous droits réservés) 14
Composants IHM avancés
Certains composants graphiques permettent d'afficher beaucoup d'itemspar des mécanismes de défilement. Ce sont :|les Spinner, les Gallery, les GridView, les ListView|Il y en a d'autres. Voir à Apis Demos | Views
© JMF (Tous droits réservés) 15
AdapterView et Adapter
Les composants graphiques qui affichent un ensemble d'items sont desAdapterViews
Ces composants sont très utiles si les données qu'ils affichent ne sont pas connues à la création du programme mais seront chargées dynamiquement Pour fournir les items à ces composants graphiques, on utilise des Adapter Comme AdapterView est en fait AdapterViewAdapter
L'Adapter sert de lien avec les données à afficher et l'AdapterView. Bref c'est le design pattern adapter Les AdapterView gèrent aussi les événements (i.e. les interactions) sur le composant graphique avec lequel ils sont associés. C'est à la fois un design pattern vue et controleur© JMF (Tous droits réservés) 16
AdapterView, Adapter et
compagnie ! (1/2) android.widget.AdapterView© JMF (Tous droits réservés) 17
AdapterView, Adapter et
compagnie ! (2/2)On a donc :
© JMF (Tous droits réservés) 18
Tutoriaux pour les
AdapterView
Beaucoup de documentation existe pour les AdapterView Dans la documentation "officielle", on a des tutoriaux sur ces composants à partir de la définition de leur classe :Spinner :
spinner.html Gallery : est, en fait, dépréciée à partir de l'API 16. Il faut utiliser desHorizontalScrollView et des ViewPager
GridView :
idview.htmlListView :
stview.html© JMF (Tous droits réservés) 19Spinner
C'est le composant graphique Android similaire au Combo box d'autres bibliothèques. C'est un bouton menuUn clic sur amène
© JMF (Tous droits réservés) 20
Spinner : construction de
Les étapes sont :|1°) récupérer le composant Spinner du fichier d'IHM|2°) construire la liste des items|3°) créer l'adapter associé à cette liste|4°) associer l'adapter au Spinner
A partir de
1°) est obtenu par
Spinner : construction de
2°) construire la liste des items est obtenu par :
3°) créer l'adapter associé à cette liste est obtenu par :
Remarque : Le format
android.R.layout.simple_spinner_item est un format donné par la bibliothèque d'Android. Ce n'est pas un fichier d'IHM de l'application. D'ailleurs il n'y a pas android.R pour les fichiers XML d'une application mais simplement R. ListArrayAdapter aspnMusketeers =
new ArrayAdapter© JMF (Tous droits réservés) 22
Spinner : construction de
Le code précédent fait apparaître :
Ce n'est pas bien beau ! On ajoute plutôt
pour avoir Remarque : android.R.layout.simple_spinner_dropdown_item est aussi un format donné par la bibliothèque Android4°) associer l'adapter au Spinner est obtenu par :
© JMF (Tous droits réservés) 23
Spinner : gestion des
événements
Le listener associé à un Spinner est un OnItemSelectedListener (et pas un OnClickListener) Être un ItemSelectedListener nécessite de donner un corps à deux méthodes : public void onItemSelected (AdapterView parent, View view, int position, long id) avec parent : l'AdapterView sur lequel l'interaction s'est produite view : le composant graphique dans l'AdapterView qui a été sélectionné position : l'indice de view dans l'AdapterView id : l'identificateur de l'item sélectionné est la méthode invoquée quand un item du Spinner est sélectionné. Elle est invoquée seulement si un nouveau choix a été fait Remarque : parent.getItemAtPosition(position) retourne la donnée associée à l'item sélectionné© JMF (Tous droits réservés) 24
source : [3] page 197 Spinner spnMusketeers = (Spinner) findViewById(R.id.spnMusketeers); // Positionne les items du Spinner ListArrayAdapter aspnMusketeers =
new ArrayAdapter© JMF (Tous droits réservés) 25Gallery
Fait apparaître ses éléments comme des tableaux dans une gallerie (d'art)Le défilement des items est horizontal
L'élément principal est centré et ses voisins "en arrière plan"Est un Spinner particulier :
Voir démo projet HelloGallery
source : [3] page 198© JMF (Tous droits réservés) 26
Les items d'une Gallery
Comme une Gallery est un AdapterView, les items d'une Gallery sont fournis par un Adapter. Comme les éléments d'une Gallery ne sont pas des String, on utilise pour cela la classe abstraite android.widget.BaseAdapter On indique le composant graphique fabriqué pour le position ième élement de l'adapter par la méthode public View getView (int position, View convertView, ViewGroup parent) où position est le numéro (commençant à 0) de l'élément dans l'adapter Pour une Gallery, la présentation "image sélectionné centrée, les voisines en arrière plan" est donné par une propriété Android Theme_galleryItemBackground. Il faut positionner cette valeur pour chaque image créée pour chaque item source : [3]© JMF (Tous droits réservés) 27
Gallery : le code (1/6)
Il faut déjà avoir un ensemble d'images ! (à déposer dans res/drawable)Le fichier IHM (res/layout/main.xml) contient :
L'activité qui affiche la Gallery a essentiellement pour code : arguments :|parent : l'AdapterView qui a reçu le clic de l'utilisateur|view : la View qui a reçu le clic|position : l'indice de cette View dans l'adapter|id : l'identifiant de la View qui a reçu le clic© JMF (Tous droits réservés) 28
Gallery : le code (2/6)
L'adapter associé à la Gallery est donc un objet de la classe MonImageAdapter
Pour placer chaque item de la Gallery, il faut préciser un layout. On utilise le placement prédéfini galleryItemBackground. On a alors le fichier res/values/attrs.xml qui décrit l'affichage des items La classe MonImageAdapter commence comme :
R.drawable.sample_1, ...
© JMF (Tous droits réservés) 29
Gallery : le code (3/6)
La classe MonImageAdapter continue par son constructeur : Le contexte c est nécessaire pour d'autres méthodes de la classe Un android.content.res.TypedArray un ensemble de valeur de type de style. On récupère celle associée au style "gallery item pour l'application" et on la positionne dans la donnée membre mGalleryItemBackground Il est conseillé de toujours appeler recycle() sur un TypedArray pour une éventuelle réutilisation (c'est pas le cas ici mais bon ;-)) public MonImageAdapter(Context c) { mContext = c; TypedArray attr = mContext.obtainStyledAttributes(R.styleable.HelloGallery); mGalleryItemBackground = attr.getResourceId( R.styleable.HelloGallery_android_galleryItemBackground, 0); attr.recycle(); © JMF (Tous droits réservés) 30
Gallery : le code (4/6)
Lorsqu'on construit son propre Adapter comme ici notre MonImageAdapter pour un AdapterView, il faut indiquer le composant graphique qui sera affiché comme position ième item de cet AdapterView. Ceci est indiqué à l'aide de la méthode View getView(int position, ...) qui retourne un tel composant graphique Cette méthode getView() est appelée automatiquement par l'envirionnment d'exécution et retourne la View pour l'item d'indice position © JMF (Tous droits réservés) 31
Gallery : le code (5/6)
Voici la méthode getView() pour la classe MonImageAdapter : Ele construit une ImageView à partir des images dans res/drawable, indique la taille de cette image 150x100 pixels, précise que l'image originelle doit être tout entière contenue dans ce rectangle 150x100 (FIT_XY), positionne un fond chatoyant pour une image, bref un cadre (par mGalleryItemBackground). Elle retourne enfin cette ImageView public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView = new ImageView(mContext);
imageView.setLayoutParams(new Gallery.LayoutParams(150, 100)); return imageView; © JMF (Tous droits réservés) 32
Gallery : le code (6/6)
Il faut donner un corps aux méthodes getCount(), getItem(), getItemId() qui sont abstraites dans la classe de base BaseAdapter, d'où leur code :
Question Java : pourquoi return un int convient pour retourner un Object dans la méthode getItem() ?
public int getCount() { return mImageIds.length; public Object getItem(int position) { return position; public long getItemId(int position) { return position; Réponse : c'est l'autoboxing de Java 1.5, un objet "enveloppe" Integer est fabriqué à partir de l'int et est retourné © JMF (Tous droits réservés) 33
Interaction sur une
Gallery
On gère les interactions utilisateurs sur une Gallery à l'aide d'un OnItemClickListener. Le code d'interaction peut être : La méthode
public void onItemClick (AdapterView parent, View view, int position, long id) à implémenter a pour © JMF (Tous droits réservés) 34GridView
Fait apparaître ses éléments dans une grille (tableur) ligne-colonne Le défilement des items est horizontal ou vertical L'arborescence des classes est :
Démo projet HelloGridView
© JMF (Tous droits réservés) 35
GridView : le code (1/2)
Il est similaire à celui de la Gallery
Le fichier IHM (res/layout/main.xml) est :
La classe MonImageAdapter commence par :
GridView : le code (2/2)
La méthode getView() est :
// Créé une ImageView pour chaque item référencé dans l"Adapterquotesdbs_dbs13.pdfusesText_19