Vous êtes sur la page 1sur 4

Atelier 2 : Calculateur de remise

Le but de cet atelier est de réaliser une calculatrice qui permet de calculer à partir d’un montant total
et d’un pourcentage la valeur de la remise et celle du montant à payer. l’interface de l’application
aura l’allure suivante :

1. Création du projet
a) Créer un nouveau projet utilisant le template Empty Activity.
b) Ajouter une icône au projet
c) Sélectionner Nexus 6 comme périphérique virtuel
d) Supprimer le TextView
2. Changer en un GridLayout
a) Modifier le RelativeLayout en GridLayout dans le layout XML.
b) Changer la propriété columnCount à 2
c) Par défaut, il n'y a pas de marges d'espacement qui sépare les vues autour d'un
GridLayout. Les lignes directrices de conception matérielles recommandent un
espacement minimum 8DP entre les vues:
http://developer.android.com/design/style/metrics-grids.html.
Avec le GridLayout sélectionné dans la dans la fenêtre Propriétés, cochez la case
useDefaultMargins (qu'ondéfinit à true).
Colonne 0 Colonne 1

Ligne 0

Ligne 1

Ligne 2

Ligne 3
3. Ajout des views
a) La première ligne se compose de montantTextView et montantEditText qui occupent la
même cellule et couvrent deux colonnes. Vous allez le faire de sorte que
montantEditText et montantTextView apparaissent dans la même cellule avec le
montantTextView au premier plan. Cette application utilise la police de taille moyenne
(18SP ou medium text) à partir du thème de l'application. Effectuez les étapes suivantes
pour ajouter à la GridLayout un EditText et un TextView pour afficher le montant :
1. Cette application vous permet d'entrer des décimals non négatifs, qu’on divise par
1000 pour afficher le montant. La palette offre des champs de texte préconfiguré
EditText s pour diverses formes d'entrée, y compris les noms de personnes, les mots
de passe, adresses e-mail, numéros de téléphone, les heures, les dates et les chiffres.
Lorsque l'utilisateur interagit avec un EditText, un clavier approprié est affiché, en
fonction du type d'entrée de la EditText. Faites glisser un EditText Numero (decimal)
sur le noeud GridLayout. Changer l'identifiant à montantEditText. Le EditText est
placé dans la première colonne de la première rangée de la GridLayout. Réglez
l'EditText layout:column à 0 et layout: columnSpan à 2 ces paramètres assurent que
le TextView couvre les deux colonnes de la ligne 0.
2. Faites glisser un medium TextView de la palette sur montantEditText ( ou définir
textSize à 18sp), en indiquant que le TextView sera placé après amountEditText.
L'IDE crée un nouveau TextView nommé le montanttextView, puis définissez layout:
row à 0, llayout:column à 0 et layout:columnSpan à 2 assurant ainsi que le TextView
couvre les deux colonnes de la ligne 0.
b) Ensuite, ajoutez pourcentTextView et pourcenttSeekBar au GridLayout pour l'affichage
et la sélection du pourcentage (veillez à définir l'identifiant de chaque vue du nom que
nous spécifions):
1. Faites glisser un TextView Medium (pourcentTextView) de la section Widgets de la
palette sous montantTextView dans le GridLayout dans la fenêtre arborescence des
composants. La nouvelle vue devient la première vue de la ligne 1 (colonne 0).
2. Faites glisser un SeekBar (pourcentSeekBar) de la section Widgets de la palette
devant percentTextView dans le nœud GridLayout dans la fenêtre arborescence des
composants. La nouvelle vue devient la deuxième vue de la ligne 1 (colonne 1).
c) Ensuite, ajoutez remiseLabelTextView et remiseTextView au GridLayout pour
l'affichage du montant de la remise :
1. Faites glisser un TextView moyen (remiseLabelTextView) sous le pourcentSeekBar
dans le GridLayout. La nouvelle vue devient la première vue dans la ligne 2 (colonne
0)
2. Faites glisser un TextView moyen (remiseTextView) devant remiseLabelTextView
dans le nœud GridLayout. La nouvelle vue devient la deuxième vue dans la rangée 2
(colonne 1).
d) Ensuite, ajoutez totalLabelTextView et totalTextView au GridLayout pour afficher le
montant à payer de la même manière.
4. Personnalisation des vues
Quand propriété de text d’ un TextView est vide, la valeur de sa propriété hint (si vous spécifiez un)
est affiché cette propriété est couramment utilisé avec un EditText (une sous-classe de TextView)
pour aider l'utilisateur à comprendre l’ objectif du EditText.
Nous l'utilisons dans le montantTextView pour dire à l'utilisateur d'entrer un montant :
a) Dans l'arborescence des composants, sélectionnez montantTextView et localiser sa propriété
hint dans la fenêtre Propriétés.
b) Cliquez sur le bouton points de suspension (...) à droite de la valeur de la propriété pour
afficher la boîte de dialogue Ressources.
c) Dans la boîte de dialogue, cliquez sur New Resource, puis sélectionnez New String Value...
pour afficher la boîte de dialogue Nouvelle valeur de chaîne de ressources et de définir le
nom de ressource pour entrer_montant et la valeur des ressources à "Entrer le montant".
Répétez ces étapes pour définir la propriété de texte pour le pourcentTextView,
remiseLabelTextView et totalLabelTextView en utilisant les valeurs :
View Resource name Resource Value
pourcentTextView remise_pourcent 15 %
remiseLabelTextView remise Remise
totalLabelTextView total Total

5. Alignement droit des TextViews dans la colonne 0


a) Sélectionnez le pourcentTextView.
b) Maintenez la touche Ctrl et cliquez sur le remiseLabelTextView et totalLabelTextView.
c) Développez la propriété layout :gravity et cocher right.
6. Configuration du montantEditText
Pour s’assurer que l’utilisateur ne saisie que des chiffres :
a) Définissez la propriété digits à 0123456789 cela permet de saisir uniquement des
chiffres, même si le pavé numérique contient d'autres caractères, tels que moins (-) (.),(,)
b) Définissez la propriété maxLength à 10. Cela limite le montant de la facture à un
maximum de dix chiffres
7. Configuration du montantTextView
a) Supprimez la valeur par défaut de la propriété de texte ( "Text Medium")
b) Développez la propriété layout :gravity et définissez le remplissage à l'horizontale (fill to
horizontal). Ceci indique que le TextView doit occuper tout l'espace restant horizontal
dans cette rangée du GridLayout.
c) Définissez la propriété background (qui spécifie la couleur d'arrière-plan de la vue) à une
nouvelle ressource de couleur nommée montant_background avec la valeur #BBDEFB
une couleur bleu clair choisi à partir de matériaux de conception de couleurs de Google.
d) Ajouter un padding autour de la TextView. Le padding d'une vue précise l'espace
supplémentaire autour du contenu d'une vue. La propriété all précise que le montant de
remplissage doit être appliqué sur le haut, à droite, en bas et à gauche du contenu de la
vue. Développez le nœud de la propriété padding, cliquez sur all, puis cliquez sur le
bouton de sélection. Créer une nouvelle ressource de dimension nommée
textview_padding avec la valeur 12dp.
e) Enfin, ajoutez une ombre (shadow) à la vue en définissant la propriété elevation à une
nouvelle ressource de dimension nommée elevation avec la valeur 4DP. Nous avons
choisi cette valeur à des fins de démonstration pour souligner l'effet d'ombre.
8. Configuration du pourcentTextView
Notez que le pourcentTextView est aligné plus élevé que le pourcentSeekBar. Cela semble mieux si
elle est centré verticalement. Pour ce faire, développez la propriété layout :gravity, puis définissez la
valeur central à vertical. Rappelons que vous avez précédemment réglé la propriété layout :gravity à
droite. La combinaison de ces paramètres apparaît dans le layout XML android:
layout_gravity = "center_vertical | right"
Une barre verticale (|) est utilisé pour séparer la mise en page multiples: les valeurs dans ce cas, la
gravité indiquant que le TextView doit être centré verticalement et aligné à droite dans la cellule de
la grille.
9. Configuration du pourcentSeekBar
a) Par défaut, la gamme d 'un SeekBar est de 0 à 100 et sa valeur actuelle est indiquée par
sa propriété de progress. Cette application permet des pourcentages entre 0 et 90 et
spécifie une valeur par défaut de 15 %. Définissez la propriété max du SeekBar à 90
et la propriété progress à 15.
b) Développez la propriété layout :gravity et définissez le remplissage à fill to horizontal de
sorte que le SeekBar occupe tout l'espace horizontal dans la colonne GridLayout du
SeekBar.
c) Définissez la propriété layout:height de la hauteur à une nouvelle ressource de
dimension (de seekbar_height) avec la valeur 40dp pour augmenter l'espace vertical dans
lequel la SeekBar est affiché.
10. Configuration du remiseTextView et totalTextView
Sélectionner les deux éléments et appliqué les étapes suivantes :
a) Supprimez la valeur par défaut de la propriété de texte ("Text Medium")
b) Développez llayout :gravity et définissez le remplissage à l'horizontale de sorte que
chaque TextView occupe tout l'espace horizontal dans la colonne GridLayout du
TextView.
c) Définissez la propriété background à une nouvelle ressource de couleur nommée
result_background avec la valeur # FFE0B2 une couleur orange clair choisi à partir de
matériaux de conception de couleurs de Google.
d) Définissez la propriété de gravity à center de sorte que les montants calculés seront
concentrés au sein de ces TextView.
e) Développez la propriété padding, cliquez sur le bouton de sélection pour la valeur all,
puis sélectionnez la ressource de dimension nommée textview_padding que vous avez
créé précédemment pour le montantTextView.
f) Enfin, ajoutez une ombre à chaque vue en définissant la propriété d'élévation à la
ressource de dimension d'élévation vous avez créé précédemment.
11. Thème par défaut et personnalisation des couleurs du thème
Chaque application a un thème qui définit la valeur par défaut des vues standard que vous utilisez.
Le thème est spécifié dans le fichier AndroidManifest.xml de l'application. Vous pouvez
personnaliser les aspects du thème, tels ceux qui définissent la palette de couleurs d'une application,
en définissant les style resources dans le fichier styles.xml situé dans le dans le dossier res/values.
a) Thème parent
Les modèles Android studio comprennent maintenant un support pour les bibliothèques AppCompat
qui vous permettent d'utiliser des fonctionnalités nouvelles dans les anciennes versions Android. Par
défaut, Android Studio définit le thème parent à Theme.AppCompat.Light.DarkActionBar.
b) Personnalisation des couleurs du thème
Le Theme Editor permet de changer les couleurs du thèmes à partir d’une liste de paramètres
( consulter http://developer.android.com/reference/android/R.attr.html pour la liste complète).
Ouvrir styles.xml. Dans le coin supérieur droit de l'éditeur, cliquez sur le lien Ouvrir l'éditeur pour
afficher l'éditeur de thèmes montrant les couleurs actuelles pour colorPrimary (bleu foncé),
colorPrimaryDark (une teinte plus foncée de colorPrimary) et colorAccent (en rose vif). Ce sont les
couleurs par défaut spécifiées dans Empty modèle de l'application de l'activité d'Android studio.
Pour cette application, nous allons changer colorPrimary et colorPrimaryDark blues légers et
changer colorAccent à l'orange (comme indiqué dans l’aperçu de l’application ou autres couleurs au
choix).
c) Styles commun
Les ressources de style peuvent définir des valeurs de propriété commune qui devraient être
appliqués à de multiples Views. Vous appliquez un style resource à une view donnée en définissant
sa propriété de style. Toute modification ultérieure apportée à un style sont automatiquement
appliquées à tous views en utilisant le style. Par exemple, considérons le remiseTextView et
totalTextView que nous avons configuré de manière identique. Nous aurions pu définir une
ressource de style spécifiant layout :gravity , background , gravity , padding et les propriétés
d'élévation de valeurs, puis définir les propriétés des deux TextView à la même ressource de style.
12. Implémenter la partie logique de l’application

Vous aimerez peut-être aussi