[PDF] [PDF] Chapitre 2 : Activité + interface home machine

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz1 Chapitre 2 : Activité + interface home machine Mousaab Bada m.bada@univ-batna2.dz http://staff.univ-batna2.dz/bada_mosaab24/01/2018 (rev. 1) Objectifs : Ø Comprendre le cycle de vie d'une activité Ø Comprendre le principe de description d'une interface home machine en utilisant l'XML Ø Ecrire votre première application : Hello World + Gestion d'évènements Ø Comprendre les étapes de compilation d'un projet Android (Gradle : outil de construction)

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz2 1. Organisation d'un projet Android: Un projet Android contient essentiellement : o Des fichiers sources : xxx.java o Des fichiers de configuration et de description : xxx.XML. 1.1. Le Manifest: Les applications Android sont constituées de plusieurs composants, liés par un fichier spécial qui s'appel : AndroidManifeste.xml. Ce fichier définit (décrit) les fondamentaux de l'application : o Quelle est l'activité principale : main o Quelles sont les permissions requises sur l'ES pour que l'application puisse s'exécuter, ... § Autorisation pour utiliser le microphone § Autorisation pour utiliser le WIFI § Etc... o Le nom d'application. o L'icône d'application. o L'ensemble de class : interfaces graphique, services, etc... 1.2. Les Dossiers Java: Le dossier main contient tous les Class java de votre application. Nous trouverons des classes de types : § activités, § services, § boradcast receiver, § et même des class d'aide (helper) pour la manipulation : des bases de données, traitement d'image, etc... Vous trouverez aussi deux répertoires : test et androidTest § Le répertoire test va contenir l'ensemble des tests unitaires locaux. C'est à dire qu'ils peuvent être exécutés directement au sein d'Android Studio, sans avoir besoin de lancer l'émulateur ou de brancher un équipement réel. L'exécution sera donc très rapide.

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz3§ Le répertoire androidTest va contenir l'ensemble des tests instrumentalisés. Ce sont des tests d'intégration et d'interface qui ont besoin d'Android pour fonctionner. Ils seront donc plus longs à se lancer, mais seront plus proches de la réalité. 1.3. Les Dossiers Res (Ressources): Le dossier res qui contient les ressources statiques du projet, notamment : • les dossiers drawable : contient les images du projet. • le dossier layout : contient les descriptions XML de l'interface graphique. • le dossier menu : contient les descriptions XML des menus. • le dossier raw : qui contient les fichiers multimédia. • le dossier values : qui spécifie les chaînes de caractères (strings.xml), les styles ... Donc, les ressources sont des fichiers qui contiennent des informations qui ne sont : • Pas en Java (ce n'est donc pas du code). • Pas dynamique (le contenu d'une ressource restera inchangé entre le début de l'exécution de votre application et la fin de l'exécution). 2. Les Activités (activity): Comme nous l'avons déjà mentionné dans le 1er chapitre, une application Android est composée d'un ensemble de 4 éléments qui interagissent entre eux. Ces éléments sont : " Activité », " Service », " Broadcast Reciever » et " Content Provider ».

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz4Définition : Une application Android affiche souvent plusieurs fenêtres. Ces différentes fenêtres sont appelées des activités. Ø Par extension, on dit que l'activité est grosso modo la forme disponible sur l'écran. Ø Elle offre à l'utilisateur l'interface (écran) pour interagir avec l'application. Ø Chaque écran de l'application représente une activité. Ø Une application Android est composée d'une ou de plusieurs activités (un jeu sur plusieurs écrans). Ø Une seule activité est lancée à la fois. Ø Dans la partie code source" Java », chaque activité est une classe qui étend par héritage la classe " Activity ». 2.1. Cycle de vie : Ex1 : Supposons qu'un utilisateur est entraine de regarder une vidéo avec son téléphone portable. S'il reçoit un appel, il devient plus important qu'il puisse y répondre que voir la vidéo. A la fin de l'appel, l'utilisateur revient exactement dans le point où la vidéo a été arrêtée. Ex2 : Si l'application utilise trop de ressources système (RAM/CPU), alors elle empêchera le système de fonctionner correctement è le système Android doit l'arrêter sans aucune hésitation. Donc : Ø À tout moment l'application peut laisser place à une autre application, qui a une priorité plus élevée. Ø Une activité existera dans plusieurs états au cours de sa vie, par exemple un état actif pendant lequel l'utilisateur l'exploite, et un état de pause quand l'utilisateur reçoit un appel. Ø Il faut sauvegarder et restaurer le contexte afin de revenir à l'état où elle était arrêtée. Une activité n'a pas de contrôle direct sur son propre état, il s'agit plutôt d'un cycle de vie rythmé par les interactions avec le système et d'autres applications. La figure ci-après présente ce que l'on appelle le cycle de vie d'une activité, c'est-à-dire qu'elle indique les étapes que va traverser l'activité pendant sa vie, de sa naissance à sa mort. Ø Lors du démarrage d'une activité, 3 méthodes sont appelées automatiquement : o " onCreate », " onStart » et " onResume ». Ø Lorsque l'on quitte l'activité, 3 méthodes sont appelées automatiquement : o " onPause », " onStop » et " onDestroy ». Question : que signifier chaque état ? Et quand est ce qu'on appel la méthode " onRestart » ?

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz5 Figure : cycle de vie d'une activité NB : Chaque étape du cycle est représentée par une méthode en Java. 2.1.1. Description des états : v onCreate: Appelé lorsque l'activité est créée pour la première fois. C'est là que vous devez effectuer toute votre configuration statique normale (création et initialisation des variables): o créer des vues (lier des vues avec l'interface XML). o lier des données à des listes, etc. Cette méthode vous fournit également un Bundle contenant l'état précédemment gelé de l'activité, s'il y en avait un.

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz6v onStart: En se basant sur les variables qui ont été initialisées dans la phase précédente (onCreate), cette méthode permet de Rendre l'activité visible pour l'utilisateur. C'est le bon endroit pour : o commencer à dessiner des éléments visuels o exécuter des animations. o etc. Dans cet état, l'utilisateur ne peut pas interagir avec l'interface. v onResume: Après avoir tracer l'interface dans la méthode onStart, la méthode onResume est appelée pour que votre activité commence à interagir avec l'utilisateur. Il s'agit d'un indicateur que l'activité est devenue active et prête à recevoir des commandes d'entrées. v onPause: Dans cet état, l'activité n'a pas le focus (donc elle n'interagit pas avec l'utilisateur), mais reste visible à l'écran. Elle maintient son état et reste attachée au gestionnaire de fenêtres. Il existe plusieurs raisons pour lesquelles une activité peut entrer dans cet état. Par exemple: o Ex : Si l'utilisateur est en mode multi-fenêtres. o Une nouvelle activité semi-transparente (telle qu'une boîte de dialogue) s'ouvre. Dans ce ca l'activité est encore partiellement visible (les valeurs des différents champs n'ont pas été disparu) è pas de sauvegarde du contexte. NB : o Il faut passer obligatoirement par cette méthode si on veut passer à l'état onStop. o Dans cet état, l'activité peut être détruite par le système si ce dernier se trouve en manque de mémoire par exemple.

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz7v onStop: Lorsque votre activité n'est plus visible pour l'utilisateur, elle est entrée dans l'état onStop. Cela peut se produire, par exemple, lorsqu' : o On clique sur le bouton Home. o Une activité récemment lancée couvre tout l'écran. o Le système peut également appeler onStop () lorsque l'activité est terminée et est sur le point de se terminer. Dans la méthode onStop (), l'application doit libérer ou ajuster les ressources qui ne sont pas nécessaires. Cette méthode est utilisée pour sauvegarder le contexte : o Automatique : Le système garde une trace de l'état actuel de chaque objet View dans le Layout (interface) : § si l'utilisateur a entré du texte dans un widget EditText, ce contenu est conservé afin que vous n'ayez pas besoin de l'enregistrer et de le restaurer manuellement. o Manuel : il faut enregistrer vos propres informations dans une base de donnée ou dans un fichier. À partir de cet état, l'activité revient : o soit pour interagir avec l'utilisateur : dans ce cas le système invoque onRestart (). o soit l'activité est terminée et disparaît : dans ce cas le système invoque onDestroy(). v onRestart : Cet état ressemble a peu prêt a l'état onCreate. Cependant elle re-initialise les variables à partir du contexte sauvegardé dans l'état onStop. Une fois le contexte est restauré, il faut appeler les méthodes onStart et onResume pour tracer l'interface et reprendre l'exécution. v onDestroy Cette méthode est appelée avant que l'activité ne soit détruite. Le système appel cette méthode en raison de : o la fermeture complète de l'activité par l'utilisateur o le système détruit temporairement l'activité en raison d'un changement de configuration (comme la rotation de l'appareil ou le mode multi-fenêtre)

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz8 3. Les interfaces homme machine (View/Layout) : 3.1. Rendu Visuel (les Vues) : Dans une application Android, l'interface utilisateur est construite à l'aide d'objets de type: • View • ViewGroup. Les objets de type View sont les unités de base, i.e. des composants gérant les interactions avec l'utilisateur : texte, bouton, image, etc... Les objets de type ViewGroup organisent la manière dont sont présents les composants. 3.1.1. View basique : A. Éléments de formulaire : § TextView : affiche une chaîne. § EditText : permet la saisie d'une chaîne (propriété inputType pour le type d'entrée attendu). § Button : bouton c liquable, variante de type interrupteur avec ToggleButton § CheckBox : case à cocher § RadioButton : bouton radio regroupable dans un RadioGroup § CheckedTextView : chaîne cochable (implante Checkable) § ProgressBar : barre de progression (horizonta le, circulaire), variante avec étoiles de notation avec RatingBar § SeekBar : barre de réglage § SearchView : champ de recherche avec proposition de suggestions B. Éléments multimédias § ImageView : affichage d'une ressource image § ImageButton : bouton avec image § VideoView : affichage contrôlable de vidéo 3.1.2. Déclarations des vues: Une vue simple (view) est déclaré en XML comme suite :

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz9 3.1.3. Attributs en commun /valeurs possible: Attribut Signification Valeurs Possible android:layout_width android:layout_height Permet de changer la largeur et la hauteur d'un composant Wrap_content : indiquant que le composant prend seulement la taille qui lui faut en largeur ou hauteur pour s'afficher correctement Match_parent : indique que le composant graphique sera aussi grand en largeur ou hauteur que son conteneur le lui autorise Valeur fixe. android:layout_weight signifie " poids » et ça va représenter l'espace que l'élément d'un LinearLayout peut prendre à l'intérieur de celui-ci. Par défault, layout_weight est à 0 android:id="@+id/xxxx" L'identificateur du composant android:text="" Le contenu du texte Une chaine de caractères android:textSize="" La taille du texte Entier + unité de mesure (dp,sp,...) android:gravity="" L'emplacement du texte à l'intérieur de son widget (conteneur) Left, right, top, center, .... android:layout_gravity="" L'emplacement du widget à l'intérieur de son parent Left, right, top, center, ....

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz103.2. Mise en page (Les conteneurs Layout ó Panel): La construction d'interface peut se faire selon deux approches complémentaires : la première est programmatique (Java) et la seconde est une déclaration à l'aide d'un fichier XML. En Android, il est préférable de séparer la description d'interface de l'ensemble des actions. C.à.d. il faut utiliser 2 fichiers : • Un fichier XML pour la description d'interface (Layout). • Un fichier Java pour les actions (les instructions). Ces 2 fichiers doivent être liées (on va voir comment par la suite). Définition : Les Layouts permettent de réaliser l'agencement et le regroupement des différents éléments (vues/views) de notre interface graphique. On trouve principalement 8 types de layouts : A. LinearLayout : Comme son nom l'indi que, ce l ayout se charge de mettre les vues sur une même ligne, selon une certaine orientation. L'attribut pour préciser cette orient ation est android:orientation. On peut l ui donner deux valeurs: • vertical : pour que les composants soient placés de ha ut en bas (en colonne) ; • horizontal : pour que les composants soient placé s de gauche à droite (en ligne). Rappelons qu'en Java SE, une fenêtres ou une boite de dialogue est écrite en utilisant une seule classe Java. Cette class contient : • La descri ption d'interface : la coule ur du bouton, les dimensions d'un L abel, la position d'un Compobox , etc... • Les actions de chaque composant : si on click sur le bouton è on fait ça et ça .... " ensemble d'instructions : for, while, if, affectation,... ». Tous ça est écrit dans une seule class (Description + Actions).

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz11B. RelativeLayout / ConstraintLayout : De manière totalement différente, ce layout propose plutôt de placer les composants les uns par rapport aux autres. Il est même possible de les placer par rapport au RelativeLayout parent. Exemple : Si on veut par exemple placer une vue au centre d'un RelativeLayout, on peut passer à cette vue l'attribut : • android:layout_centerInParent="true". Il est aussi possible d'utiliser • android:layout_centerHorizontal="true" pour ce ntrer, mais uniquement sur l'axe horizontal. • android:layout_centerVertical="true" pour centrer sur l'axe vertical. C. TableLayout : Il permet de placer les éléments comme dans un tableau. TableLayout hérite de LinearLayout, il ne peut donc aligner les contrôles que dans une seule direction Pour créer un quadri llage, il utilise pour cela l'élément qui déclare une nouvelle ligne. Les cellules sont définies par les composants qu'on ajoute aux lignes. https://www.youtube.com/watch?v=AuTGJwij3BYhttps://www.youtube.com/watch?v=-ZTcbX_eSkgD. GridLayout Le GridLayout permet de placer des éléments sur une grille (ligne et colonnes). Il est plus flexible par rapport à TableLayout.

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz12E. FrameLayout : un layout un peu spécial: Ce layout est plutôt utilisé pour afficher une unique vue. Il peut sembler inutile comme ça, mais ne l'est pas du tout ! Il n'est destiné à afficher qu'un élément, mais il est possible d'en mettre plusieurs dedans puisqu'il s'agit d'un ViewGroup. Si par exemple : • Vous souhaitez faire un album photo, il vous suffit de mettre plusieurs éléments dans le FrameLayout et de ne laisser qu'une seule photo visible, en laissant les autres invisibles grâce à l'attribut android:visibility . • Pareil pour un lecteur de PD F, i l suffit d'empiler toutes l es page s dans le FrameLayout et de n'afficher que la page actuelle, celle du dessus de la pile, à l'utilisateur F. MotionLayout : MotionLayout est un type de disposition qui vous aide à gérer l'animation de mouvement et de widget dans votre application. G. AbsolteLayout AbsoluteLayout permet de spécifier les emplacements exacts (coordonnées x / y) de ses enfants. Les mises en page absolues sont moins flexibles et plus difficiles à maintenir que les autres types de mises en page sans positionnement absolu.

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz134. Association Code/IHM: Comme nous l'avons déjà mentionné précédemment, une activité est composée de deux fichiers séparés • Un fichier XML pour la description d'interface (Layout). • Un fichier Java pour les actions (les instructions). Une application Android contient plusieurs interfaces liées entre eux. Par conséquence, il existe plusieurs fichier XML et Java. • Il faut trouver un moyen qui nous permet d'associer chaque fichier Java avec son interface graphique. • En plus, il faut trouver un moyen qui permet d'associer chaque composant XML (view) avec son homologue dans le fichier Java. C'est ce qu'on appel : identification et récupération des vues. 4.1. Association globale entre le fichier Java et le fichier XML: Prenons ensemble l'exemple de " Hello World » afin d'expliquer comment associer un fichier java avec son interface XML. 4.1.1. Partie XML :

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz14Android studio utilise par default la mise en page" ConstraintLayout » dans l'exemple " Hello World ». Comme nous l'avons déjà mentionné, il existe des attributs en commun et d'autres propres pour chaque type de Layout. Nous avons déjà expliqué, les attributs en commun tels que: layout_width , layout_height et textSize. Maintenant, nous allons expliquer les attributs propres au " ConstraintLayout » Les 4 premières lignes permettent de préciser quels sont les objets (les segments) qui entourent (limite) le TextView. app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" Par exemple l'attribut : layout_constraintBottom_toBottomOf ="parent" est divisé en deux parties. • constraintBottom concerne la vue (TextView) • toBottomOf concerne la vue qui est entre guillemets "parent" Cela signifier que le segment en bas (Bottom en anglais) du TextView est aligné par rapport au segment bas de son parent (qui est le layout principale dans cet exemple) " voir la figure précédente » Q1 : ou ce qu'on peut mettre la valeur d'alignement ? R1 : il faut utiliser les attributs : • marginStart, marginEnd : alignement vertical • marginTop, marginBottom : alignement horizental Dans l'exemple précédent, nous avons donné les valeurs 100 et 200 pour marginTop et marginBottom. Q2 : Mais la distance horizental du layout est > 200+100. Où est ce qu'on va mettre le TextView dans ce cas ? R2 : le TextView sera placé automatiquement au milieu des deux points 200 et 100 (zone en ressort). NB : Si vous voulez déplacer le TextView dans la zone en ressort, vous pouvez utiliser les attributs: • constraintVertical_bias="0.xx " • constraintHorizontal_bias="0.xx" Les valeurs de ces 2 attributs sont des pourcentages <= 1

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz154.1.2. Partie Java: Est ce que vous vous rappelez des différents états du cycle de vie d'une activité ? Vous vous rappelez aussi que chaque état représente une méthode en Java ? Très bien J L'activité est une class Java qui hérite de la class " Activity » ou l'une de ses class : • AppCompatActivity • FragmentActivity • Etc... Cette class implémente les différents état du cycle de vie. Dont la méthode onCreate est obligatoire. C'est dans cette méthode " onCreate » que nous devrons faire la liaison entres le fichier Java et le fichier XML, ainsi que la liaison des différentes vues. Voici le code source java par default de l'activité " Hello World » : NB : Le Code source doit être placer à l'intérieur de la méthode onCreate() à la suite de l'appel à setContentView() : Selon l'organisation du projet, on trouve que l'interface " activity_main.xml » se trouve dans le dossier (res/layout). Cette interface est représentée par la variable R.layout.activity_main (R : c'est une classe auto-générée qui représente les ressources de l'application) public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Instructions... } }

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz16L'instruction setContentView(R.layout.activity_main); permet de spécifier au compilateur ou se trouve l'interface du fichier Java è C'est la liaison globale entre le fichier Java et le Fichier XML. 4.2. Identification et récupération des vues : Apres avoir liée le fichier Java et le fichier XML en utilisant l'instruction setContentView, il ne nous reste que la liaison de chaque composant (vue XML) avec sa variable en Java. Il faut noter que chaque vue en XML doit être re-déclarer dans le fichier Java comme Variable Globale : TextView msg; A cet instant la, la variable n'a pas encore été initialisé i.e. elle est égale à NULL. Il existe une seule instruction qui nous permet d' : • initialiser la variable globale (msg) • et faire la liaison entre la variable Java et la vue en XML Rappelons que nous avons donné l'identificateur " m1 » android:id="@+id/m1" pour le message " Hello world » dans le fichier XML. C'est l'instruction : msg = findViewById(R.id.m1); qui permet d'identifier et récupérer une vue XML. Après avoir récupérer la vue, on peut maintenant utiliser cette variable en Java. Par exemple, si on veut changer le msg " Hello world », il suffit d'utiliser l'instruction Java : • msg.setText("BJR") ; public class MainActivity extends Activity { TextView msg; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Instructions... msg = findViewById(R.id.m1); } }

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz174.3. Gestion d'évènements: Dans cette section, nous allons modifier le code de l'application " Hello world » en rajoutant un nouveau bouton " Modifier ». Si on clique sur le bouton " Modifier », le texte deviendra " Félicitation !! » Solution : • Il faut d'abord ajouter le bouton dans le fichier XML : • Ensuite, il faut implémenter la méthode " onClick » pour le bouton " Modifier ». Il existe plusieurs façons pour le faire. Le principe est le même, la seule différence est l'endroit d'implémentation de cette méthode. 4.3.1. Un gestionnaire d'écoute: modifier.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); modifier= findViewById(R.id.b1);

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz18 Il s'agit d'installer un gestionnaire d'écoute " setOnClickListener() » dans notre bouton. A l'intérieur de ce gestionnaire on trouvera notre méthode " onClick() » Cette méthode est propre à la vue : dans cette exemple c'est notre bouton. Le Code source doit être placer à l'intérieur de la méthode onCreate() Maintenant, il faut ajouter l'instruction qui permet de modifier le msg " Hello world » a l'intérieur de la méthode onClick() 5. Gradle: Les systèmes de construction sont des outils logiciels conçus pour automatiser le processus de compilation des programmes. Les systèmes de construction se présentent sous différentes formes et sont utilisés pour diverses tâches de création de logiciels. Bien que leur objectif principal soit de créer efficacement des exécutables. Gradle est un outil de construction automatique de projet qui a été intégré à Android Studio sous forme de plugin. C'est un outil comparable à ant ou make en eclipse. Il permet de : Compiler votre projet. Gérer les dépendances de votre projet. Créez plusieurs APK pour votre application avec des fonctionnalités différentes en utilisant le même projet. Générer des fichiers APK signés (en utilisant : keyPassword et keyAlias). modifier.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { msg.setText("Félicitation"); } });

COURS:DEVELOPPEMENTDESAPPLICATIONSMOBILEChapitre2:Activity,IHMM.Bada@univ-batna2.dz196. Compilation: Le processus de compilation est très complexe: 1. Un projet a besoin d'autres ressources à compiler (aapt) pour marcher à part le code source. • Par exemple des fichiers images, json, xml, etc. 2. Un projet a besoin d'utiliser et compiler (aidl) des classes de type interface. 3. Les classes ont besoin d'être optimisés (dex) 4. Un fichier APK a besoin d'être signé (Jarsigner)

quotesdbs_dbs44.pdfusesText_44