Placement des vues
Exercice: calculatrice
Organisation des vues (1/2)
* Plusieurs manières de placer les vues
* FrameLayout: zone réservée pour une vue
* LinearLayout: placement en ligne ou en colonne des vues
* TableLayout: placement des vues dans un tableau
* RelativeLayout: placement des vues les unes par rapport aux autres
* GridLayout: placement des vues dans une grille
* Dimensionnement
* Même taille que le parent: layout_width = "match_parent"
* Adaptation au contenu: layout_width = "wrap_content"
* Répartition de l'espace libre: layout_weight
* Exemple: répartition ¾ - ¼
* Composant 1: layout_weight = "3"
* Composant 2: layout_weight = "1"
* Ne pas oublier: layout_width = "0dp"
Organisation des vues (2/2)
* Séparer l'écran en deux
* Afficheur: TextView
* layout_height = "wrap_content"
* Identifiant: "afficheur"
* Touches: LinearLayout (horizontal)
* layout_height = "0dp"
* layout_weight = "1"
* Séparer la zone inférieure
* Répartition ¾ - ¼
* Gauche: LinearLayout (vertical)
* Contient 4 "LinearLayout" horizontaux
* Droite: LinearLayout (vertical)
* Couleur de fond
* Exemple: background = "#00FF00"
Placement des boutons
* Placer les touches dans les "LinearLayout"
* Classe "Button"
* Utiliser le système de répartition (layout_weight)
* Possibilité de personnalisation
* textSize = "40dp"
* textColor = "#FFFFFF"
* background = "#00FF00"
* Image de fond
* Ajouter une image dans les ressources [app / res / drawable]
* Copier l'image à partir de l'explorateur de fichiers
* Coller l'image dans le dossier "drawable" de l'environnement
* Attention au nom: a-z, A-Z, 0-9, _ uniquement
* Utiliser l'image dans la maquette d'activité
* Exemple: background = "@drawable/nom_image"
Gestion des événements (version 1)
* Objectif: afficher la touche appuyée dans l'afficheur
* Créer un écouteur
* Dans la classe "MainActivity"
* public void saisir(View vue) { [...] }
* Associer l'écouteur à chaque bouton
* Attribut "onClick" dans la maquette d'activité
* Dans l'écouteur...
* Récupérer le bouton déclencheur (vue passée en argument)
* Button bouton = (Button)vue;
* Récupérer le 1er caractère du texte du bouton
* char touche = bouton.getText().charAt(0);
* Récupérer l'afficheur
* TextView afficheur = findViewById(R.id.afficheur);
* Mettre le caractère du bouton dans l'afficheur
* afficheur.setText("" + touche);
Gestion des événements (version 2)
* Objectif: afficher toute la séquence de touches appuyées
* Créer une classe "Calculatrice" pour le code "métier"
* Elle gèrera les calculs et l'affichage
* Elle possède une chaîne de caractères de l'affichage
* A chaque appui sur une touche, elle doit mettre à jour cette chaîne
* Créer un objet "Calculatrice" dans l'activité
* Déclarer un attribut "calc_" dans la classe "MainActivity"
* Initialiser l'attribut dans la méthode "onCreate" qui lance l'activité
* Dans l'écouteur...
* Construire la chaîne d'affichage de la calculatrice
* En fonction du caractère, appeler une méthode de la calculatrice
* Méthode "chiffre": lorsqu'un chiffre est saisi
* Méthode "virgule": lorsqu'une virgule est saisie
* Méthode "operation": lorsqu'une opération (+, -, *, /, =) est saisie
* Copier la chaîne d'affichage de la calculatrice dans l'afficheur
Code (simplifié) de la calculatrice
public class Calculatrice {
private String affichage_; // Attribut
public String getAffichage() { [...] } // Accesseur
public Calculatrice() { [...] } // Constructeur
public void chiffre(int n) { /* Gestion chiffre */ }
public void virgule() { /* Gestion virgule */ }
public void operation(char o) { /* Gestion opération */ }
}
Véritable calculatrice (1/4)
* Objectif: faire des calculs comme une vraie calculatrice
* 1ère étape: construire le nombre saisi
* Attribut "courant_"
* Pour chaque chiffre: courant_ = 10*courant_ + chiffre
* Attention à la virgule
* Deux attributs sont nécessaires
* virgule_: booléen qui indique s'il y a une virgule
* coef_: position de la virgule (nombre à multiplier à "courant_")
Véritable calculatrice (2/4)
* Compléter la classe "Calculatrice" en conséquence
* Ajouter les attributs (penser au constructeur)
* Adapter les méthodes "chiffre" et "virgule"
* Utiliser l'opération "=" pour tester le nombre saisi
* Ecraser l'affichage
* Mettre à la place le nombre contenu dans "courant_"
* Après l'opération, l'affichage repart avec un nouveau nombre
* Attribut "reset_": indique s'il faut réinitialiser l'affichage
* Méthode "raz": procède à une remise à zéro de l'affichage
* Remarque: plusieurs attributs doivent être réinitialisés
* Déclencher "raz" au début des méthodes "chiffre" et "virgule"
Véritable calculatrice (3/4)
* 2ème étape: appliquer les opérations de calcul
* Quand on appuie sur une touche d'opération,
c'est l'opération précédente qui est exécutée
* Entre le nombre courant et le nombre précédemment saisi
* Exemple
* 1 ==> courant_ = 1
* 5 ==> courant_ = 15
* + ==> operation_ = '+' / memoire_ = 15
* 3 ==> courant_ = 3
* + ==> memoire_ = memoire_ + courant_
==> (car "operation_" vaut '+')
Véritable calculatrice (4/4)
* Il faut donc mémoriser l'opérande gauche et l'opération
* Attribut "memoire_": nombre précédant celui en cours de saisie
* Attribut "operation_": dernière opération demandée
* Pour appliquer l'opération quand l'opérande droite est saisie
* C'est-à-dire quand une autre opération est demandée
* Donc: quand une opération est demandée
* Executer "operation_" entre "memoire_" et "courant_"
* Remarque: prévoir le démarrage d'un calcul ==> operateur_ = '?'
* Remarque: cas division par 0 ==> message d'erreur
Responsive Design (1/2)
* Proposer une maquette pour le mode paysage
* Se placer dans le dossier des maquettes [app / res / layout]
* Créer une nouvelle maquette [New / Layout resource file]
* Même nom que la maquette mode portrait
* Choisir les conditions d'utilisation de la maquette alternative
* Orientation, taille...
* Exemple: Orientation / Landscape
* Sélection automatique de la meilleure maquette
* En fonction de l'orientation
* Créer la maquette de l'activité pour le mode paysage
* Faire un copier-coller du mode portrait
* Ajouter un layout pour une séparation gauche-droite
* Gauche: calculatrice (copie du contenu mode portrait)
* Droite: historique ("ScrollView" contenant "TextView")
Responsive Design (2/2)
* Historique: mettre des identifiants sur les éléments
* Scroll: "scroll"
* Zone de texte: "historique"
* Dans l'écouteur...
* Récupérer la zone de texte de l'historique
* TextView histo = findViewById(R.id.historique);
* Si cette zone existe, affichage de l'historique
* if (histo != null) histo.setText(calc.getHistorique());
* Régler le défilement automatique du scroll
* ScrollView scroll = findViewById(R.id.scroll);
* if (scroll != null) scroll.fullScroll(View.FOCUS_DOWN);