Application mobile
Android Studio
* Environnement de développement intégré
* Editeur de texte
* Editeur d'interface graphique (WYSIWYG et XML)
* Compilateur / débugueur
* Emulateur
* Langage Java
* Programmation objet
* Bibliothèque de composants
* Gestionnaire de projet
* Code source Java
* Ressources
* Maquettes des activités = layouts (format XML)
* Images = drawables
* Constantes = values
Premier exercice
Création d'une activité
* Exercice: créer le projet "Welcome"
* Choisir la distribution d'Android minimale supportée
* Récente ==> moins de terminaux compatibles
* Ancienne ==> limitation des fonctionnalités
* Exemple: Android 4.4 (KitKat)
* Choisir le modèle de l'activité initiale
* Activité = page/écran de votre application
* Exemple: Empty Activity
* Activité = classe + layout(s)
* Conserver la convention de nommage
* Classe = AccueilActivity
* Layout = activity_accueil
Test de l'application
* Possibilité de lancer l'application sur un téléphone
* Ordinateur: connexion en USB
* Nécessite l'installation de drivers
* Téléphone: activer le débogage USB
* Nécessite l'activation des options de développement
* Sinon, lancer l'émulateur [option Run]
* Choisir un modèle de téléphone
* Modèle simple ==> empreinte mémoire plus faible sur l'ordinateur
* Choisir une distribution d'Android
* Attendre le lancement de l'émulateur
* Une fois démarré, il peut rester ouvert
* Après une modification, le relancer [option Run]
Maquette d'une activité (1/2)
* Maquette = description de l'interface
* Composée d'éléments graphiques ==> les "vues"
* Arborescence comme en HTML (une vue peut contenir des vues)
* Un type de vues ==> une classe
* Classe mère "View" = composants visibles (bouton, label...)
* Exemple: classe "Button"
* Classe mère "ViewGroup" = conteneurs invisibles
* Exemple: classe "LinearLayout"
* Maquette = fichier XML
* Exemple: ouvrir activity_accueil.xml
* Deux modes d'édition possibles
* Mode visuel (WYSIWYG) [onglet Design]
* Mode texte (XML) [onglet Text]
Maquette d'une activité (2/2)
* Mode Visuel
* Manipulation préalable
* Remplacer le thème "AppTheme" par "DeviceDefault"
* Opérations possibles
* Sélectionner une vue dans l'arborescence [fenêtre Component Tree]
* Modifier les caractéristiques d'une vue [fenêtre Attributes]
* Ajouter une nouvelle vue [fenêtre Palette]
* A tout moment, possibilité de basculer en mode texte
* Système de balises similaire à HTML
* Type de la vue = nom de la balise
* Caractéristiques de la vue = attributs de la balise
Conteneur principal
* 1ère étape: adapter le conteneur principal de l'activité
* Choisir une manière de disposer les vues
* Disposition = layout
* Disposition horizontale, verticale, en grille, libre...
* Exemple: sélectionner la disposition "LinearLayout"
* Balise "LinearLayout" dans XML
* Placement horizontal ou vertical des vues
* En mode texte, remplacer la balise principale par "LinearLayout"
* Régler les paramètres de la disposition
* Orientation ==> attribut "orientation"
* Exemple: "vertical"
Ajout d'une vue (1/2)
* Exemple: ajouter un champ de saisie [Text / Plain Text]
* Classe "EditText"
* Possibilité de choisir les dimensions
* Attributs "layout_width" et "layout_height"
* "match_parent" ==> prend la taille du parent
* "wrap_content" ==> prend la taille du contenu
* Possibilité d'alignement
* Attribut "layout_gravity"
* Possibilités dépendantes du conteneur: "left", "right", "center"...
* Modifier l'identifiant du composant pour y accéder plus tard
* Attribut "id" (exemple: "nom_utilisateur")
* Indiquer une consigne
* Attribut "hint" (exemple: "Votre nom ?")
Ajout d'une vue (2/2)
* Exemple: ajouter un bouton [Buttons / Button]
* Modifier son intitulé
* Attribut "text" (exemple: "Valider")
* Mettre un espace entre le champ de saisie et le bouton
* Ajouter un conteneur "FrameLayout"
* Fixer la hauteur de ce composant
* Utiliser l'unité "dp" indépendante de l'écran
* Exemple: layout_height = "10dp"
* Ou utiliser tout l'espace vide
* layout_height = "0dp"
* layout_weight = "1"
Détection d'un événement
* Détecter un clic sur un bouton
* Mécanisme d'écouteur simplifié ==> attribut "onClick"
* Indiquer dans l'attribut le nom de l'écouteur
* Ecouteur = méthode de l'activité
* Exemple: méthode "valider" de l'activité "AccueilActivity"
* Ecrire l'écouteur dans la classe de l'activité
* Ouvrir le fichier "java/welcome/AccueilActivity"
* Créer la méthode "valider"
public void valider(View vue) {
System.out.println("clic !");
}
* System.out.println ==> message dans la console [fenêtre Run]
* L'argument "vue" est la vue ayant déclenché l'écouteur
Ajout d'une activité
* Création d'une nouvelle activité [New / Activity / Empty Activity]
* Exemple: BienvenueActivity
* Choisir le conteneur principal de l'activité
* Exemple: LinearLayout (vertical)
* Exemple: message de bienvenue avec le nom saisi
* Ajouter un 1er texte "Bienvenue"
* Classe "TextView"
* textSize = "40sp"
* textAlignment = "center"
* Ajouter un 2nd texte (pour afficher la saisie de la page précédente)
* Paramétrage idem premier texte ("XXX" pour l'instant)
* Modifier l'identifiant: "message_bienvenue"
Transition entre activités (1/2)
* Créer un message (intent) au moment du clic sur le bouton
* Remplacer le code de la méthode "valider"
* Création d'un message à destination de l'activité "BienvenueActivity"
* Intent message = new Intent(this,BienvenueActivity.class);
* Récupérer la valeur du champ de saisie
* A partir de son identifiant: "nom_utilisateur"
* EditText saisie = findViewById(R.id.nom_utilisateur);
* String utilisateur = saisie.getText().toString();
* Placer cette valeur dans le message
* Sous la forme d'une variable: "utilisateur"
* message.putExtra("utilisateur",utilisateur);
* Démarrer la nouvelle activité en envoyant le message
* startActivity(message);
Transition entre activités (2/2)
* Récupérer le message dans la nouvelle activité
* Se placer dans la méthode "onCreate"
* Exécutée automatiquement au lancement de l'activité
* Intent message = getIntent();
* Récupérer le nom de l'utilisateur contenu dans le message
* A partir du nom de la variable: "utilisateur"
* String utilisateur = message.getStringExtra("utilisateur");
* Placer le nom dans la 2nde zone de texte
* Dont l'identifiant est: "message_bienvenue"
* TextView zoneTexte = findViewById(R.id.message_bienvenue);
* zoneTexte.setText(utilisateur);