TP SIN Programmation sur androïde Support : eclipse

Transcription

1 TP SIN Programmation sur androïde Support : eclipse Support : Smartphone sur androïde Pré requis (l élève doit savoir): Savoir utiliser un ordinateur Savoir utiliser un Smartphone Programme Objectif terminale : L élève doit être capable de réaliser un programme sur androide Matériels : Logiciel Eclipse Smartphone sur androïde 1. Travail demandé Propriété de ce projet : Nom : Hello prenom Activity : prenom Target : android 4.1 Package : com.androiddev.prenom Dans ce tuto, on va développer une première application assez simple. Ce tuto va permettre de découvrir des composants graphiques (Textfield, EditText et Bouton). Un aperçu du résultat que l'on souhaite avoir :

2 Cahier des charges Cette application contient tout d'abord une phrase dans le Textfield «Entrez votre prénom». Ensuite, elle possède un EditText, c'est ici qu'on donne le prénom. Puis lorsque l'on clique sur Valider, on souhaite qu'une phrase apparaisse avec le prénom rentré précédemment. De plus, on voudrait, lors du clique sur valider, qu'un message s'affiche avec le prénom qui a été rentré. XML On va tout d'abord réaliser l'interface graphique de l'application. Dans le dossier res/values on va créer tous les paramètres de notre interface : couleurs, dimension, chaîne de caractères. o Chaînes de caractères On va modifier le fichier strings.xml, pour on double clique sur lui. On va supprimer toutes les chaînes déjà existantes, pour cela on clique sur les chaînes («app_name»,...) et on clique sur «Remove». Maintenant qu'elles ont étés toutes supprimés on va pouvoir crée celle que l'on souhaite. On clique sur «add» :

3 Puis on choisit le type de variable «String» : Après avoir cliqué sur «OK», la partie droit s'affiche et nous demande un nom pour cette variable et une valeur : On entre le nom «app_name» et la valeur «hello prenom» pour la phrase qui s'affichera tout en haut de notre application (Attention : cette variable doit absolument exister dans n'importe quel projet Android) : On crée ensuite trois autres variables «String» pour compléter l'interface, voici les paramètres a rentré : La première qui correspond au label de notre «edittext» : Nom : «prenom» valeur : «Entrez votre prénom :»

4 La deuxième qui correspond au texte dans l' «edittext», qui indique à l'utilisateur d'inscrire leur prénom ici : Nom : «prenomhint» Valeur : «Tapez votre prénom...» Un troisième qui correspond au texte à l'intérieur du bouton : Nom : «bouton» Valeur : «Valider» Voilà pour les chaînes de caractères de notre interface, on va maintenant s'occuper des couleurs de notre appli. o Couleurs o Toujours dans le dossier /res/values, on crée un fichier «couleur.xml». A l'intérieur on va créer 3 couleurs : Donc on clique comme tout à l'heure sur «add» : Ensuite on choisit le type «Color» : Puis on va compléter les paramètres : Nom : «couleurmessage» Valeur : «#221596»

5 En valeur, on renseigne la couleur en hexadécimale. Pour trouver les valeurs correspondantes on peut utiliser ce site : et descendre en bas. Puis les deux autres : Nom : «couleurtitre» Valeur : # Pour le fond de notre application : Nom : «couleurfond» Valeur : #DDDDDD o Dimension Ensuite on va s'occuper de la dimension du texte qui s'affiche en bleu. Donc on crée un fichier dans /res/values qui s'appelle «dimension.xml». On crée une variable de type «Dimension» : Nom : «dimmessage» Valeur : 30px o Interface Maintenant on va créer l'interface de notre application en utilisant les variables qu'on a créées précédemment. Avec ce schéma, on comprendra comment fonctionne la création d'interface en XML :

6 On a tout d'abord un Linear Layout vertical qui contiendra tous les autres composants. Dans celui-ci on insère tout d'abord un «TextView» qui affichera : Puis on insère un Linear Layout Horizontale qui contiendra notre EditText (ou l'utilisateur entrera son prénom) et le bouton. Et enfin on insère le TextView qui affichera le prénom. Avec cette liste on sait comment sera organisé notre code XML. On ouvre le fichier qui est dans /res/layout nommé main.xml. Linear Layout Vertical De base le Linear Layout qui contient l'interface est déjà créé, on ajoutera juste la couleur de fond : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:background= "@color/couleurfond" > La ligne ajoutée : android:background= "@color/couleurfond" «android:background» est la propriété de l'arrière-plan du Linear Layout. «@color» est le type de variable qu'on va assigner à l'arrière-plan. «couleurfond» est la variable qu'on a créé précédemment qui contient la couleur de fond.

7 TextView Ensuite on place le TextView qui contiendra le titre : <TextView android:id="@+id/textviewprenom" android:text="@string/prenom" android:textcolor="@color/couleurtitre" o Explication : On crée un «TextView» avec cette balise : On lui donne aussi un identifiant unique avec lequel on l appellera dans la partie java android:id="@+id/textviewprenom" La variable est de type «@+id» et possède comme nom «TextViewPrenom» Ensuite on lui donne des dimensions : Largeur : Avec «fill_parent», le TextView prend toute la place disponible en largeur. Longueur : Avec «wrap_content», le TextView prend seulement la place qu'il a besoin. On lui affecte ensuite le texte qu'on a entré tout à l'heure dans la variable Prénom : android:text="@string/prenom" C'est toujours le même système : On donne le type et après le nom de la variable créé. Puis on lui donne la couleur qu'on a créé : android:textcolor="@color/couleurtitre" Linear Layout Horizontale <LinearLayout android:orientation="horizontal" > code </LinearLayout> On lui donne l'orientation horizontale : android:orientation="horizontal" Et on lui donne aussi des dimensions :

8 EditText A l'intérieur de celui-ci on insère l'edittext, là où l'utilisateur rentre son prénom : <EditText android:id="@+id/edittextprenom" android:layout_weight="1" android:layout_gravity="bottom" android:hint="@string/prenomhint" C'est le même principe que la TextView. On lui donne un identifiant «EditTextPrenom» : android:id="@+id/edittextprenom" Puis des dimensions. On lui donne aussi une priorité par rapport au bouton qu'on va ajouter après. L'EditText et le bouton étant sur la même ligne, on attribue un poids prioritaire a l'edittext, pour qu'il prenne plus de la moitié de l'écran : android:layout_weight="1" Ensuite on le positionne en bas du Linear Layout : android:layout_gravity="bottom" Et on lui affiche une phrase par défaut («Tapez votre prénom...») dont on a créée la valeur plus tôt : android:hint="@string/prenomhint" Bouton Pour le composant Button on retrouve le même principe : <Button android:id="@+id/buttonenvoyer" android:text="@string/bouton" Assignation d'un ID : android:id="@+id/buttonenvoyer" Des dimensions : Et un texte sur le bouton qu'on a créé précédemment («Valider») : android:text="@string/bouton" TextView prénom Après avoir fermé le Linear Layout horizontal :

9 </LinearLayout> On ajoute le TextView qui va afficher le prénom qu'on aura rentré dans l'edittext lorsqu'on aura cliqué sur le bouton. C'est toujours le même procédé : <TextView android:id="@+id/textviewhello" android:layout_height="fill_parent" android:layout_gravity="center_horizontal" android:textsize="@dimen/dimmessage" android:textcolor="@color/couleurmessage" Un ID : android:id="@+id/textviewhello" Une dimension : 2 android:layout_height="fill_parent" On le positionne au centre : android:layout_gravity="center_horizontal" Ici on applique une dimension en utilisant la variable qu'on a créée précédemment (30px) : android:textsize="@dimen/dimmessage" Et on donne une couleur au texte qui s'affiche («#221596») : android:textcolor="@color/couleurmessage" Et enfin, la dernière ligne doit fermer le Linear Layout Vertical. </LinearLayout> Dans cette partie XML, on a vu comment créer des variables (dimensions, textes, couleur) dans «res/values» et comment créer l'interface principale de notre application (le fichier main.xml dans «res/layout») à l'aide de LinearLayout et d'autres composants utilisateur (bouton, EditText, TextView). Main.xml : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:background= "@color/couleurfond" > <TextView android:id="@+id/textviewprenom" android:text="@string/prenom" android:textcolor="@color/couleurtitre"

10 <LinearLayout android:orientation="horizontal" > <EditText android:layout_weight="1" android:layout_gravity="bottom" <Button </LinearLayout> <TextView android:layout_height="fill_parent" android:layout_gravity="center_horizontal" </LinearLayout> Dans cette partie 2, on va réaliser la partie JAVA de l'application. Fichier JAVA Pour commencer, aller dans l'arborescence du projet dans Eclipse, dans le dossier «src», puis rentrer dans le paquet («com.androiddev.prenom») et double clique sur le fichier java («hello.java»). Vous devriez avoir ce code : package com.androiddev.test; import android.app.activity; import android.os.bundle; public class test extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); }

11 } Import On va tout d'abord rajouter tous ses imports à la suite des autres : import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.edittext; import android.widget.textview; import android.widget.toast; Ce qui donne : package com.androiddev.test; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.edittext; import android.widget.textview; import android.widget.toast; Classe Ce qui va nous permettre d'instancier tous les objets nécessaires pour réaliser notre application. Ensuite on définit notre classe hello de type Activity : public class hello extends Activity { Tout le code Java suivant sera dans cette classe. Composants Ensuite on va déclarer nos composants dynamiques (Bouton, EditText et chaine de caractères qui affichera le prénom) qui sont nécessaires :

12 private EditText edittext; private Button button; private String prenom; Ce qui donne : public class hello extends Activity { private EditText edittext; private Button button; private String prenom; } Evenement oncreate() On va ensuite créer la méthode qui s'exécutera à la création de l'activity hello (On met en paramètre cette variable de type Bundle qui est utile en cas de fermeture non prévue de l'activity) : 1 public void oncreate(bundle savedinstancestate) { Ensuite on initialise la création : super.oncreate(savedinstancestate); Puis on affiche le Layout qu'on a créé en XML (main.xml) : setcontentview(r.layout.main); Instanciation des composants Ensuite on va instancier l'edittext et le bouton : edittext = (EditText) findviewbyid(r.id.edittextprenom); button = (Button) findviewbyid(r.id.buttonenvoyer); findviewbyid : Cette méthode va permettre d'instancier un composant par rapport à celui créé dans le fichier XML (rappelez-vous : <EditText android:id="@+id/edittextprenom", l'id EditTextPrenom est réutilisé dans cette méthode). A noter que l'on a réalisé un «cast» :(EditText), (Bouton). Ceci oblige la méthode précédente à retourner un objet de type EditText ou Bouton.

13 Listener Ensuite on cré un «écouteur» sur le bouton : button.setonclicklistener( new OnClickListener() { public void onclick(view v) { A l'intérieur de la fonction onclick, on placera le code qui permet d'afficher le texte remplie dans l'edittext. La chaîne rentrée par l'utilisateur Ensuite on retourne ce que l'utilisateur a rentré dans l'edittext dans la variable de type String crée précédemment : prenom = edittext.gettext().tostring(); Pop-up Avec la fonction suivante, on va pouvoir afficher dans un pop-up le nom rentré dans l'edittext : 1 Toast.makeText(hello.this, "Bonjour " + prenom + "!", Toast.LENGTH_LONG).show(); Pour afficher un pop-up, on utilise cette fonction : Toast.makeText(Context context, CharSequence text, int duration) ; Le 1er paramètre (Context context) : Ici on place le pop-up dans l'activity actuelle (hello.this). Le 2ème (CharSequence text) : Ici on rentre le texte que l'on veut afficher ("Bonjour " + prenom + "!"). Donc on concatène le texte «Bonjour» avec la phrase dans l'edittext puis un «!». La 3ème (int duration) : Ici on rentre le temps d'apparition du pop-up. On peut rentrer «Toast.LENGTH_LONG» ou «Toast.LENGTH_SHORT». TextView Ensuite on affiche dans la TextView le prénom rentré dans l'edittext : ((TextView)findViewById(R.id.TextViewHello)).setText("Bonjour " + prenom + "!"); Donc tout d'abord, on choisit la TextView qui affichera la phrase puis on définit le texte. Voilà le récapitulatif de tout le code contenu dans hello.java :

14 package com.androiddev.prenom; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.edittext; import android.widget.textview; import android.widget.toast; public class hello extends Activity { private EditText edittext; private Button button; private String prenom; /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); //récupération de l'edittext grâce à son ID edittext = (EditText) findviewbyid(r.id.edittextprenom); //récupération du bouton grâce à son ID button = (Button) findviewbyid(r.id.buttonenvoyer); //on applique un écouteur d'événement au clique sur le bouton button.setonclicklistener( new OnClickListener() { public void onclick(view v) { //on récupère le texte écrit dans l'edittext prenom = edittext.gettext().tostring(); Toast.makeText(hello.this, "Bonjour " + prenom + "!", Toast.LENGTH_LONG).show(); ((TextView)findViewById(R.id.TextViewHello)).setText("Bonjour " + prenom + "!"); } } ); } }