Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'

Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android Chapitre 2.1 Android2ee Par Mathias Seguy Date de publication : 18 septembre 2014 Ce chapitre vous explique comment utiliser les éléments graphiques fondamentaux d'Android. Il fait partie du livre "Android a complete course" dont les chapitres sont listés ci-dessous : • Chapitre 0 : Installation et préparation de l'environnement de développement • Chapitre 1 : Premiers pas avec Android • Chapitre 1.1 : Cycle de vie de l'activité • Chapitre 2.1 : Les éléments graphiques fondamentaux • Chapitre 2.2 : Composants graphiques complexes • Chapitre 3.3 : Intent et IntentFilters • Chapitre 4.1 : Les Ressources • Chapitre 4.2 : SharedPreferences et PreferenceActivity • Chapitre 4.3 : Base de données SQLite • Chapitre 4.4 : Gestion des fichiers • Chapitre 5 : Content Provider Pour réagir à ce tutoriel, un espace de dialogue vous est proposé sur le forum : Commentez Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android par Mathias Seguy I - Utilisation des layouts XML.................................................................................................................................... 3 II - Les conteneurs.......................................................................................................................................................3 III - Les widgets élémentaires..................................................................................................................................... 4 III-A - Les labels.....................................................................................................................................................4 III-B - Les boutons..................................................................................................................................................4 III-C - Les conteneurs d'images.............................................................................................................................4 III-D - Les champs de saisie..................................................................................................................................5 III-E - Les cases à cocher......................................................................................................................................5 III-F - Les boutons radio........................................................................................................................................ 5 III-G - Méthodes usuelles.......................................................................................................................................5 III-G-1 - Pour gérer les états du composant.................................................................................................... 5 III-G-2 - Pour gérer le texte affiché par le composant..................................................................................... 6 III-G-3 - Pour gérer comment est affiché le texte............................................................................................ 6 III-G-4 - Pour ajouter des listeners...................................................................................................................6 III-G-5 - Quelques autres méthodes étonnantes..............................................................................................7 III-G-5-a - Pour l'accessibilité...................................................................................................................... 7 III-G-5-b - Pour définir un composant de type erreur................................................................................. 7 III-G-5-c - Pour définir le comportement de la scroll bar............................................................................ 7 III-G-5-d - Pour définir l'ombre sous le texte.............................................................................................. 7 IV - Les widgets de sélection......................................................................................................................................8 IV-A - Les différents sélectionneurs.......................................................................................................................8 IV-B - Exemple pour la ListView avec une activité qui étend ListActivity..............................................................8 IV-C - Exemple pour une activité qui utilise une liste............................................................................................9 IV-D - Exemple pour l'AutoCompleteTextView.....................................................................................................10 IV-E - Personnalisation des listes........................................................................................................................11 V - Les conteneurs et widgets évolués.....................................................................................................................12 V-A - Le DatePicker et le TimePicker..................................................................................................................12 V-A-1 - La DigitalClock et l'AnalogClock........................................................................................................ 13 V-B - La ProgressBar et la SeekBar................................................................................................................... 14 VI - Remerciements...................................................................................................................................................14 - 2 - Copyright ® 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. http://mathias-seguy.developpez.com/tutoriels/android/utiliser-elements-graphiques-fondamentaux/ Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android par Mathias Seguy I - Utilisation des layouts XML L'utilisation de fichiers XML pour le positionnement des éléments graphiques d'une application Android est préconisée. Exemple : Le fichier res\layout\main.xml : 1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. > 7. <TextView 8. android:layout_width="fill_parent" 9. android:layout_height="wrap_content" 10. android:text="@string/hello" 11. /> 12. <Button xmlns:android="http://schemas.android.com/apk/res/android" 13. android:id="@+id/button" 14. android:text="" 15. android:layout_width="fill_parent" 16. android:layout_height="fill_parent"/> 17. </LinearLayout> Et on l'utilise dans le code Java qui correspond juste à une application de type« Activités » : 1. public class MainActivity extends Activity implements View.OnClickListener { 2. /** * A button */ 3. private Button btn; 4. /** * A dummy counter */ 5. private int count; 6. 7. /** Called when the activity is first created. */ 8. @Override 9. public void onCreate(Bundle savedInstanceState) { 10. super.onCreate(savedInstanceState); 11. //Récupère le fichier main.xml pour construire l'IHM 12. setContentView(R.layout.main); 13. //Instancie le bouton en récupérant son id, 14. //on peut ensuite utiliser le bouton normalement. 15. btn=(Button)findViewById(R.id.button); 16. btn.setOnClickListener(this); 17. btn.setText("Hello"); 18. } 19. public void onClick(View view) { 20. count++; 21. btn.setText("Hello "+count); 22. } 23. } II - Les conteneurs Il y a quatre types principaux de Layout : • LinearLayout, c'est l'alignement linéaire qui s'appuie sur des boîtes qui sont alignées en colonnes ou en lignes ; • RelativeLayout, c'est un placement relatif des composants les uns par rapport aux autres ; • TableLayout, c'est un placement dans une table ; • ScrollView et HorizontalScrollView, c'est un placement utilisant le scroll pour gérer les débordements. - 3 - Copyright ® 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. http://mathias-seguy.developpez.com/tutoriels/android/utiliser-elements-graphiques-fondamentaux/ Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android par Mathias Seguy Chacun a ses spécificités et permet d'effectuer les IHM. À choisir selon ses goûts. III - Les widgets élémentaires Les widgets élémentaires sont TextField (les labels), Bouton, Image, Check Box, EditText et RadioBoutton. Leur hiérarchie est la suivante (ils héritent donc les uns des autres de leurs propriétés, de leurs méthodes). • TextView • BoutonCompoundButton • CheckBox • RadioButton • ImageView • ImageButton III-A - Les labels Une TextView est un composant permettant d'afficher un texte statique, souvent appelé label. 1. <TextView xmlns:android="http://schemas.android.com/apk/res/android" 2. android:layout_width="fill_parent" 3. android:layout_height="wrap_content" 4. android:text="Un champ texte"/> III-B - Les boutons Un bouton est un composant cliquable affichant un texte. 1. <Button xmlns:android="http://schemas.android.com/apk/res/android" 2. android:id="@+id/button" android:text="" 3. android:layout_width="fill_parent" 4. android:layout_height="fill_parent" 5. android:onClick=”uneMethode” /> III-C - Les conteneurs d'images Ces composants servent à afficher des images. L'ImageButton permet d'écouter facilement les clics effectués sur le composant. 1. <ImageView xmlns:android="http://schemas.android.com/apk/res/android" 2. android:id="@+id/icon" 3. android:layout_width="fill_parent" 4. android:layout_height="fill_parent" 5. android:adjustViewBounds="true" 6. android:src="@drawable/molecule" 7. /> 8. 9. <ImageButton xmlns:android="http://schemas.android.com/apk/res/android" 10. android:id="@+id/icon" 11. android:layout_width="fill_parent" 12. android:layout_height="fill_parent" 13. android:adjustViewBounds="true" 14. android:src="@drawable/molecule" 15. /> - 4 - Copyright ® 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. http://mathias-seguy.developpez.com/tutoriels/android/utiliser-elements-graphiques-fondamentaux/ Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android par Mathias Seguy III-D - Les champs de saisie Ce composant permet d'afficher un texte qui soit éditable. 1. <EditText xmlns:android="http://schemas.android.com/apk/res/android" 2. android:id="@+id/field" 3. android:layout_width="fill_parent" 4. android:layout_height="fill_parent" 5. android:singleLine="false" 6. /> III-E - Les cases à cocher Ce composant permet d'afficher un booléen avec lequel l'utilisateur peut interagir. 1. <CheckBox xmlns:android="http://schemas.android.com/apk/res/android" 2. android:id="@+id/check" 3. android:layout_width="wrap_content" 4. android:layout_height="wrap_content" 5. android:text="Cette case est : decochee" /> III-F - Les boutons radio Ces composants sont des cases à cocher regroupées au sein d'un groupe (le GroupButton) en choix exclusif. 1. <RadioGroup 2. xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent"> 6. <RadioButton android:id="@+id/radio1" 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content" 9. android:text="Caillou" /> 10. <RadioButton android:id="@+id/radio2" 11. android:layout_width="wrap_content" 12. android:layout_height="wrap_content" 13. android:text="Ciseaux" /> 14. <RadioButton android:id="@+id/radio3" 15. android:layout_width="wrap_content" 16. android:layout_height="wrap_content" 17. android:text="Papier" /> 18. </RadioGroup> III-G - Méthodes usuelles Tous les composants qui héritent de TextView possèdent un large ensemble de méthodes permettant leur manipulation en Java. Ces méthodes sont pour la plupart usuelles pour les développeurs ayant un peu d'expérience en IHM. Citons simplement les plus utiles. III-G-1 - Pour gérer les états du composant Les méthodes les plus utilés pour savoir dans quel état est le composant. 1. textView.hasFocus(); 2. textView.isPressed(); 3. textView.isSelected(); 4. textView.isShown(); - 5 - Copyright ® 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. http://mathias-seguy.developpez.com/tutoriels/android/utiliser-elements-graphiques-fondamentaux/ Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android par Mathias Seguy III-G-2 - Pour gérer le texte affiché par le composant Les méthodes pour gérer le texte affiché. 1. // text management 2. textView.setText("the text of the text view"); 3. // or append text 4. int start = 0, end = 3; 5. textView.append("the text to add", start, end); 6. // retrieve text 7. String displayedText = (String) textView.getText(); 8. // get text lengh in characters' number 9. textView.length(); III-G-3 - Pour gérer comment est affiché le texte Les méthodes graphiques permettant de gérer l'affichage de ce texte : 1. int color = 11254; 2. // setting background color 3. textView.setBackgroundColor(color); 4. // Sets the horizontal alignment of the text and the vertical gravity that will be used when 5. // there is extra space in the TextView beyond what is required for the text itself. 6. // Should be used in the layout.xml : android:gravity 7. textView.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL); 8. // Sets the color used to display the selection highlight. 9. textView.setHighlightColor(color); 10. // managing the lines 11. // set one line with the horizontal scroll or not 12. textView.setHorizontallyScrolling(true); 13. // Define the one line attribute. The XML attribute to use is android:singleLine 14. textView.setSingleLine(true); 15. // Set the text font size (in pixel) 16. textView.setTextSize(16); 17. // to set multilines: The XML attribute to use is android:lines 18. textView.setLines(3); 19. // or to set a range of multi uploads/Litterature/ mathiasseguy-elementarywidget.pdf