APPLICATIONS JAVA. Interface graphique avec XML pour une activité Android. Android Partie VI

Transcription

1 APPLICATIONS JAVA Android Partie VI Ivan MADJAROV Interface graphique avec XML IvMad, Interface graphique avec XML pour une activité Android L'objectif principal de ce cours est de découvrir la programmation sous Android, sa plate-forme de développement et les spécificités du développement embarqué sur téléphone mobile. Le cours s inspire, reprend, modifie et enrichi des supports disponibles sur Internet.

2 Interface graphique avec XML IvMad, Android : Les menus (1) La version 3.0 d Android introduit le composant barre d action (ActionBar) avec 4 parties pour remplacer les menus disponibles dans les anciennes version d Android. L icone de l application : Visualise l'identité de l'application. Dropdown Menu : Permet la navigation dans l'application. Actions principales : Définie les actions principales de l'application. Autres actions : Permet d accéder aux fonctionnalités optionnelles. L implémentation d une ActionBar s effectue dans le dossier res/menu du projet Eclipse. Icone de l'application DropDown Menu Interface graphique avec XML IvMad, Android : Les menus (2) Les menus d options : Le menu apparait quand on clique sur le bouton "Menu" du téléphone ou de la tablette. La méthode utilisée pour la création des options du menu: public boolean oncreateoptionsmenu(menu menu) On rajoute des événements lorsque l on clique sur un des items du menu, grâce à la méthode onmenuitemselected(int featureid, MenuItem item) Les menus d options à préférences étendues permettent d afficher un menu lors de l appui sur une touche d option d un menu. Les menus contextuels sont accessibles en cliquant sur un objet avec un appui long ou court, une fenêtre de choix s affiche alors. Pour ouvrir un menu contextuel on ses sert de la méthode: oncreatecontextmenu(contextmenu menu, View v, ContextMenuInfo menuinfo)

3 Interface graphique avec XML IvMad, Android : Les menus (3) Pour créer un menu simple on procède par un nouveau projet Android et on modifie le code Java de l'activité principale : Interface graphique avec XML IvMad, Android : Les menus (4) La manière la plus adaptée pour un développement efficace de menus est de passer par les fichiers XML. Le menu est décrit dans le fichier res/menu/menu.xml <menu xmlns:android=" <item android:title="options" android:id="@+id/itemoptions"></item> <item android:title="quitter" android:id="@+id/itemquitter"></item> </menu> Puis dans le code de la méthode oncreateoptionsmenu, on récupère le menu sous forme XML et l afficher. public boolean oncreateoptionsmenu(menu menu) { // Création du menu inflater MenuInflater inflater = getmenuinflater(); // On envoi a la variable menu le fichier xml parsé par l'inflater inflater.inflate(r.menu.menu_option_xml, menu); return true; }

4 Interface graphique avec XML IvMad, Android : Les menus (5) Etape suivante : On attrape l'événement lors du clique sur un des items du menu, grâce à la méthode : onmenuitemselected(int featureid, MenuItem item) Deux paramètres sont passés: id du panel menu et l'item qui est cliqué public boolean onmenuitemselected(int featureid, MenuItem item) { // On récupère l'id de l'item et on le compare switch (item.getitemid()) { // choix égal à itemoptions case R.id.itemOptions: // On affiche un message Toast.makeText(this, "Message", Toast.LENGTH_SHORT).show(); return true; // choix égal à itemquitter case R.id.itemQuitter: // On ferme l'activité finish(); return true; } return super.onmenuitemselected(featureid, item); } Interface graphique avec XML IvMad, Android et XML : Intent (1) Intent :Lesandboxing (bac à sable) est une pratique de sécurité dans la téléphonie mobile qui consiste à séparer les applications entre elles. Android exécute une application en limitant les actions autorisées (accès mémoire, accès sur les capteurs, etc ). Pour contourner cette difficulté de communication entre applications on utilise les Intent (Intentions). Un Intent permet d envoyer et recevoir des messages (avec ou sans les données) pour déclencher une action, dans un composant d une même application (Activity) voir même dans une autre application. Android support deux types d'intent : explicit et implicit. Si l'activité définie le composant cible directement dans l'intent (implicite); Si l'activité lance une classe externe alors c'est un explicite Intent.

5 Interface graphique avec XML IvMad, Android et XML : Intent (2) La figure illustre la manière dont un Intent implicite est délivré à travers le système pour démarrer une autre activité. L'activité A crée un Intent par startactivity(). Le système Android cherche les applications dont l'intent filter correspond. Si une correspondance est trouvée le système démarre l'activité B en appelant la méthode oncreate(). Interface graphique avec XML IvMad, Android et XML : Broadcasting Dans un contexte informatique, le broadcasting désigne une méthode de transmission de données à l'ensemble des machines d'un réseau. Pour recevoir des Intent, Android crée une classe qui implémente BroadcastReceiver avec une seule méthode onreceive(). Le système Android envoie l'intention (Intent) à tous les BroadCast Receiver abonnés par ordre de priorité (AndroidManifest.xml). Un BroadCast Receiver est un composant Android qui écoute et enregistre tout changement dans le mobile: la reception de messages SMS, appels téléphoniques, statut de la batterie, accès au réseau Wi-Fi, Bluetooth, etc.

6 Interface graphique avec XML IvMad, Android et XML : Intent (3) L'exemple suivant va illustré le passage d'un message à partir d'une activité vers une autre activité. On crée un projet IntentProject. L'interface graphique de l'activité compte un TextView,unEditText et un Button. Dans le champ de texte on saisie le message qui sera traité par l'intent. Le traitement est initié par le "click" du bouton qui déclenche la méthode onclick(view v). Pour la mise en place de la méthode la classe OnClickListener est instancié comme écouteur du bouton. Le texte saisie est récupéré par la méthode gettext() de la classe EditText. Un Intent est instancié pour emmètre le message avec la méthode putextra(strname, keyidentifer) Le processus est initié avec l'appel: startactivity(intent); Interface graphique avec XML IvMad, Android et XML : Intent (4) Interface graphique dans res/layout pour l'activité principale Activité principale qui émet le message "Intent"

7 Interface graphique avec XML IvMad, Android et XML : Intent (5) L'activité secondaire, initiée par l'activité principale est une classe à part créée dans le même projet. L'activité possède sa propre interface graphique décrite dans le répertoire res/layout. Le message de type Intent est récupéré par la méthode getstringextra(strmsg) et affiché dans un objet de type TextView àl'écran da l'activité. Le fichier AndroidManifest.xml doit contenir la description de l'activité secondaire avec le nom de la classe et le titre de l'activité: <activity android:name=".displayactivity" android:label="@string/title_activity_display" /> Interface graphique avec XML IvMad, Android et XML : Intent (6) L'activité est activé par un "Intent" et reçoit le message envoyé GUI XML de l'activité secondaire Strings.xml contient les String des deux activités

8 Interface graphique avec XML IvMad, Android et XML : Intent (7) Android Manifest.xml est commun aux deux activités et décrit les ressources à mettre en œuvre L'activité sensée recevoir l'intent de l'activité principale est décrite ici Interface graphique avec XML IvMad, Android et XML : Intent (8)

9 Interface graphique avec XML IvMad, Android : Explicite Intent ( ) Comment envoyer un à partir d'une activité Android? La technique de l'explicite Intent peut faire appel à un client sous Android en faisant passer toutes les données nécessaires pour l'envoi du message: Intent intent = new Intent(Intent.ACTION_SEND); En utilisant les Intent et l intention ACTION_SEND, il est possible de démarrer une intention d envoi de données (mail, sms, ). Pour envoyer le mail il faut spécifier le URI pour le "mailto:", c.à.d. l'adresse du destinataire, ainsi que les attributs d'un TO, SUBJECT, CC, TEXT. L'activité lancera la recherche et le choix d'un client , de préférence GMail: startactivity(intent.createchooser( intent, "Envoie du e mail...")); Interface graphique avec XML IvMad, Android : Explicite Intent ( ) Activité principale activity_intent_send_mail_main.xml strings.xml

10 Interface graphique avec XML IvMad, Android : Explicite Intent ( ) Interface graphique avec XML IvMad, Android : Envoi de SMS (1) Il y a deux façons d'envoyer un SMS avec une activité Android: A l'aide du SmsManager installé sous Android en s'adressant directement à sa méthode statique: SmsManager smsmanager = SmsManager.getDefault(); La référence vers le SMS manager donne accès à la méthode d'envoi des données nécessaires à compéter un message de ce type: smsmanager.sendtextmessage("phoneno", null, "SMS text", null, null); Par la technique des Intent. Il faut instancier un objet Intent avec l'action ACTION_VIEW: Intent smsintent = new Intent(Intent.ACTION_VIEW); Pour l'envoi il faut spécifier smsto avec l'uri et la méthode setdata(): smsintent.setdata(uri.parse("smsto:")); smsintent.settype("vnd.android dir/mms sms"); La suite fait appel au client SMS Android.

11 Interface graphique avec XML IvMad, Android : Envoi de SMS (2) Activité principale res/layout/activity_send_sms.xml Interface graphique avec XML IvMad, Android : Envoi de SMS (3) strings.xml AndroidManifest.xml

12 Interface graphique avec XML IvMad, Android : Envoi de SMS (4) Interface graphique avec XML IvMad, Android : Appel téléphonique (1) Une activité Android peut emmètre un appel téléphonique par l'intermédiaire des Intent. On utilise l'action ACTION_CALL pour basculer vers la fonctionnalité téléphone de l'unité Android. Intent phoneintent = new Intent(Intent.ACTION_CALL); Pour effectuer un appel téléphonique pour un numéro donné on doit spécifier tel: comme URI avec la méthode setdata(). phoneintent.setdata(uri.parse("tel: "));

13 Interface graphique avec XML IvMad, Android : Appel téléphonique (2) Activité principale activity_phone_call.xml Permissions à ajouter dans AndrdoidManifest.xml strings.xml Interface graphique avec XML IvMad, Android : Appel téléphonique (3)

14 Interface graphique avec XML IvMad, Application Android et XML (11) Le fichier colors.xml contient les couleurs utilisées dans l application <?xml version="1.0" encoding="utf 8"?> <resources> <color name="black_color">#000</color> </resources> Le fichier dimens.xml défini les dimensions utilisées. Les tailles déclarées sont en dp (density independant pixel) pour la taille des composants et en sp (scale independant pixel) pour la taille des polices. Les tailles en dp / sp garantissent les mêmes proportions dans les interfaces quelques soit la densité de l écran cible <resources> <dimen name="padding_small">8dp</dimen> <dimen name="padding_medium">8dp</dimen> <dimen name="padding_large">16dp</dimen> <dimen name="normal_text_size">15sp</dimen> <dimen name="normal_padding">20dp</dimen> <dimen name="large_padding">100dp</dimen> <dimen name="small_padding">10dp</dimen> </resources> Interface graphique avec XML IvMad, Application Android et XML (7) Le fichier strings.xml est utilisé pour déclarer les chaines de caractères qui apparaitront dans l'interface graphique de l'activité. <?xml version="1.0" encoding="utf 8"?> <resources> <string name="app_name"> FirstAndroidView</string> <string name="hello_world"> Bonjour tout le monde!</string> <string name="menu_settings">settings</string> <string name="title_activity_main"> MainActivity</string> <string name="image_content_description"> Logo Android</string> <string name="create_account"> Créer un compte</string> <string name=" ">adresse </string> <string name="password">mot de passe</string> <string name="connect">se connecter</string> </resources>

15 Interface graphique avec XML IvMad, Application Android et XML (8) Gérer l'événement du bouton et afficher le résultat dans une autre View par la création d'une deuxième activité. La vue est décrite dans le fichier XML: res/layout/login_display.xml <LinearLayout xmlns:android= /res/android android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" p" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textstyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textstyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" /> </LinearLayout> Interface graphique avec XML IvMad, Application Android et XML (9) Le nouvelle View est liée à une nouvelle activité dont il faut créer le code Java dans le fichier : src/nom.package/logindisplayactivity.java public class LoginDisplayActivity extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.login_display); } } Les activités et les ressources d'une application Android sont décrites dans le fichier XML : AndroidManifest.xml La ligne à ajouter pour la nouvelle View à côté du nom de l'activité principale : <activity android:name=".logindisplayactivity" /> Actualiser le fichier strings.xml avec les chaines pour la nouvelle View: <string name="title_activity_login_display">logindisplayactivity</string> <string name="hint_mail">"ici : L'adresse de l'utilisateur"</string> <string name="hint_pass">"ici : Le mot de passe de l'utilisateur"</string>

16 Interface graphique avec XML IvMad, Application Android et XML (10) Le fichier XML dimens.xml doit être mis à jour en ajoutant les lignes suivantes: <dimen name="layout_padding_top">80dp</dimen> <dimen name="big_text_size">20sp</dimen> Pour mettre en place le passage d une activité à une autre il faut ajouter du code dans la MainActivity.java. On déclare un OnClickListener sur le bouton libellé "se connecter". Pour le passage d une activité à une autre on crée un Intent Les intents sont des messages utilisées par le système comme moyen de communication avec des applications, activités Le premier argument représente le contexte et le second représente l activité d arrivée. On utilise la méthode startactivity avec comme argument l intent crée. Interface graphique avec XML IvMad, Application Android et XML (11) Pour récupérer l'événement du bouton "se connecter" on ajoute le code suivant dans la méthode OnCreate(). loginbutton.setonclicklistener(new OnClickListener() { public void onclick(view v) { Intent intent = new Intent(MainActivity.this, LoginDisplayActivity.class); startactivity(intent); } }); Le code actuel effectue le passage de la première activité à la seconde sans transfert de données d'une activité à l'autre. Pour transmettre ces données, il faut ajouter à l intent une clé permettant de les identifier. On déclare EXTRA_LOGIN et EXTRA_PASSWORD pour le passage des données. Lors du clic sur le bouton, on récupère les textes saisies par l utilisateur gettext().tostring. On associe ces valeurs avec l intent par la méthode putextra

17 Interface graphique avec XML IvMad, Application Android et XML (12) A l'étape suivante on récupère les données transmises par l intent et on les assigne aux zones de texte dans l'activité LoginDisplayActivity à l aide de la méthode getintent en vérifiant que ce dernier n est pas nulle. Initialiser les deux zones de textes servant à afficher les informations utilisateurs (login/password). Récupérer les deux informations à l aide de leurs clés et de la méthode getstringextra. Il faut utiliser la méthode gettypeextra où Type correspond au type de la donnée passé. Lier les textes récupérés aux TextView à l aide de la méthode settext En plus, un contrôle de la saisie peut être mis en place pour éviter les champs vides ou l'adresse mail non conforme aux standards en se servant des "paternes" avec les symboles autorisés. Interface graphique avec XML IvMad, Application Android et XML (14) import java.util.regex.matcher; import java.util.regex.pattern; import android.os.bundle; import android.app.activity; import android.content.intent; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.edittext; import android.widget.toast; public class MainActivity extends Activity { final String EXTRA_LOGIN = "user_login"; final String EXTRA_PASSWORD = "user_password"; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); final EditText login = (EditText) findviewbyid(r.id.user_ ); final EditText pass = (EditText) findviewbyid(r.id.user_password); final Button loginbutton = (Button) findviewbyid(r.id.connect);

18 Interface graphique avec XML IvMad, Application Android et XML (15) loginbutton.setonclicklistener(new OnClickListener() { public void onclick(view v) { final String logintxt = login.gettext().tostring(); final String passtxt = pass.gettext().tostring(); // le 'pattern' pour vérifier le contenu de l'adresse mail Pattern p = Pattern.compile(".+@.+\\.[a z]+"); // Le 'matcher' va comparer le 'pattern' avec le 'string' passé en argument Matcher m = p.matcher(logintxt); // Si l adresse mail saisie ne correspond au format d une // adresse mail on affiche un message d'erreur if (!m.matches()) { Toast.makeText(MainActivity.this,R.string. _format_error, Toast.LENGTH_SHORT).show(); // Pour éviter l'exécution des opérateurs qui suivent return; } Interface graphique avec XML IvMad, Application Android et XML (16) // le cas des différents champs qui ne doivent pas être vides if (logintxt.equals("") passtxt.equals("")) { Toast.makeText(MainActivity.this,R.string. _or_password_empty,Toast. LENGTH_SHORT).show(); return; } // activer la vue pour afficher le résultat Intent intent = new Intent(MainActivity.this,LoginDisplayActivity.class); intent.putextra(extra_login, logintxt); intent.putextra(extra_password, passtxt); startactivity(intent); } }); } }

19 Interface graphique avec XML IvMad, Application Android et XML (13) import android.app.activity; import android.content.intent; import android.os.bundle; import android.widget.textview; public class LoginDisplayActivity extends Activity { final String EXTRA_LOGIN = "user_login"; final String EXTRA_PASSWORD = "user_password"; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.login_display); Intent intent = getintent(); TextView logindisplay = (TextView) findviewbyid(r.id. _display); TextView passworddisplay = (TextView) findviewbyid(r.id.password_display); if (intent!= null) { logindisplay.settext(intent.getstringextra(extra_login)); passworddisplay.settext(intent.getstringextra(extra_password)); } } } Interface graphique avec XML IvMad, Application Android et XML (17)

20 Interface graphique avec XML IvMad, Android : Présenter en Tableau (1) La structure tableau dans toutes les plates-formes représente un moyen efficace de présentation et/ou de stockage d'information. Le point de départ pour mettre en place un tableau dans une application Android est de s'adresser à l'élément TableLayout. Le principe est un peu le même que pour le tableau en HTML : TableLayout défini un tableau, dans lequel on rajoute des lignes TableRow contient les composants. Les colonnes peuvent être définies comme extensibles (setcolumnstretchable()) pour gérer la largeur des colonnes tout en laissant une occuper l espace vide pour arriver à la largeur du conteneur rétractables (setcolumnshrinkable()) pour obtenir l effet inverse. Le TableLayout ne gère pas l affichage des bordures, lignes, colonnes ou cellules. C'est à définir dans un fichier style.xml. Interface graphique avec XML IvMad, Android : Présenter en Tableau (2) Créer le tableau dans res/layout/main.xml <TableLayout style="@style/frag1tablelayout" > <TableRow style="@style/frag1headertablerow"> <TextView style="@style/frag1headercol" android:text="cm"/> <TextView style="@style/frag1headercol" android:text="inch"/> </TableRow> <TableRow style="@style/frag1tablerow"> <TextView style="@style/frag1col" android:text="2.54"/> <TextView style="@style/frag1col" android:text="1"/> </TableRow> <TableRow style="@style/frag1tablerow"> <TextView style="@style/frag1col" android:text="5.08"/> <TextView style="@style/frag1col" android:text="2"/> </TableRow> <TableRow style="@style/frag1tablerow"> <TextView style="@style/frag1col" android:text="7.62"/> <TextView style="@style/frag1col" android:text="3"/></tablerow> </TableLayout>

21 Interface graphique avec XML IvMad, Android : Présenter en Tableau (3) Un style peut être appliqué pour chacune des colonnes comme une feuille de style CSS dans le fichier style.xml. <resources xmlns:android=" <style name="apptheme" parent="@android:style/android:theme.light" /> <style name="defaulttextview" parent="@android:style/textappearance.medium"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item></style> <style name="frag1tablelayout"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item></style> <style name="frag1headertablerow" parent="frag1tablelayout"> <item name="android:layout_marginbottom">3dp</item></style> <style name="frag1tablerow" parent="frag1tablelayout"></style> <style name="frag1col" parent="defaulttextview"> <item name="android:layout_marginbottom">1dp</item> <item name="android:background">@drawable/tableborder</item></style> <style name="frag1headercol" parent="frag1col"> <item name="android:textstyle">bold</item></style> </resources> Interface graphique avec XML IvMad, Android : Présenter en Tableau (4) Ajouter une bordure au tableau grâce à un objet drawable en forme de rectangle défini en arrière plan. Pour cela on créer l'objet drawable dans le répertoire /res/drawable/tableborder.xml. <?xml version="1.0" encoding="utf 8"?> <shape xmlns:android=" > <solid android:color="#ffffff"/> <stroke android:width="1dp" android:color="#777777"/> <corners android:radius="3dp" /> <padding android:left="100dp" android:top="5dp" android:right="10dp" android:bottom="5dp" /> </shape>

22 Interface graphique avec XML IvMad, Android : NFC (Near Field Communication) NFC est une technologie de communication en champ proche basée sur la fréquence radio MHz. La portée de la communication est de l'ordre de 10 cm en théorie mais effective à 1-4 cm pour des bandes passantes de 106 / 216 / 414 kbps. La communication permet l'envoi et la lecture de données sous forme de "Tags" entre deux terminaux ou entre un terminal et une puce. On peut échanger des données simplement en rapprochant le Smartphone d'une borne pour effectuer un paiement par exemple. Android gère les messages NFC avec le format NDEF (NFC Data Exchange Format). Pour l'échange d'information NFC l'activité Android a besoin de la permission dans le fichier AndroidManifest.xml : <user permission android:name="android.permission.nfc" /> Interface graphique avec XML IvMad, Android : NFC (Near Field Communication) L'activité test la présence du service NFC et son statut. L'affichage se fait à partir du fichier strings.xml. Pour extraire une chaine de caractère on précise son identifiant comme paramètre de la méthode gettext()