-
Title:
-
Description:
-
Pour créer cette disposition,
j'ouvre le fichier activity_main.xml.
-
J'aurai besoin d'une disposition
linéaire verticale pour placer chaque vue
-
dans une colonne verticale.
-
Je vais donc d'abord changer
la disposition de relative à linéaire.
-
L'éditeur me signale directement
que la balise ouvrante est différente de
-
la fermante, donc je vais copier
ceci pour le coller ici, en bas ;
-
balises identiques, voilà.
-
Ensuite, je peux ajouter les vues.
-
D'abord, j'ai une TextView « quantité ».
-
Je vais donc prendre cette TextView et
changer le texte affiché en « quantité ».
-
Ensuite, j'ai une TextView qui dit « 0 ».
-
Je peux donc copier la première
TextView et la coller plus bas.
-
Je change sa valeur pour que le texte
dise « 0 » comme dans ma capture.
-
Le dernier enfant de
cette disposition linéaire est un bouton.
-
On n'avait jamais ajouté de bouton dans
nos dispositions avant, alors voyons ça.
-
En ouvrant un navigateur,
on peut chercher "Button Android".
-
Ce premier lien a l'air bon,
le site est en developer.android.com.
-
Et voici la documentation pour Button,
on peut passer la majorité de ce texte.
-
On fait défiler pour pouvoir
lire le survol de cette classe.
-
Il parle un peu de code JAVA,
on n'en a pas encore appris, mais
-
plus bas, ici, on a
du code XML pour un bouton.
-
On peut copier ceci et
voir ses effets dans notre code.
-
Dans notre disposition, j'ajoute
un bouton sous les deux TextViews.
-
Je colle mon code pris
dans la documentation ici.
-
Ensuite, au lieu de la chaîne
self_destruct, je vais plutôt
-
afficher une chose plus
sympathique comme Commander.
-
On peut aussi effacer la dernière
ligne, on n'en aura pas besoin.
-
Cool. On a donc une TextView "quantité",
une autre qui affiche "0", et un bouton
-
"Commander".
-
Exécutons ce script,
pour voir ce que ça donne,
-
avec ce bouton vert Lecture.
-
On voit en bas
que la machine compile le code.
-
Oh, ce n'est pas ce qu'on veut.
-
Il semble que notre disposition linéaire
soit en fait horizontale, pas verticale.
-
Veillons donc à ajouter
l'attribut "orientation".
-
On va le changer à, mettons…
« android:orientation="vertical" ».
-
Ça devrait régler le problème.
-
Refaisons Exécuter.
-
Ok, c'est déjà mieux.
-
Les trois enfants s'affichent
dans une colonne verticale.
-
Il ne reste qu'à
styliser ces vues pour
-
qu'ils ressemblent plus
à la capture qu'on nous a donnée.
-
Sur la capture on voit que la TextView
"quantité" est écrire en majuscules.
-
Dans la leçon 1, on a vu qu'il existe
un attribut « android:textAllCaps ».
-
Il apparaît ici dans l'auto-complétion.
-
S'il apparaît comme ici,
il suffit de faire Entrée
-
et l'éditeur l'insérera
automatiquement dans le code.
-
On place la valeur à "true"
parce qu'on veut le texte en majuscules.
-
S'il vaut mieux utiliser cet attribut
pour mettre les lettres en majuscules,
-
c'est parce que si on modifie l'interface
pour passer "quantité" en minuscules,
-
comme ici, il suffira
de retirer l'attribut
-
au lieu de chercher
à changer le texte.
-
Ensuite, pour la TextView qui dit "0",
il faut une taille de police de 16 sp.
-
Je vais l'ajouter, l'attribut apparaît
dans les auto-complétions possibles alors
-
je fais juste Entrée et
j'indique 16 sp en valeur.
-
On veut aussi que
la police soit de couleur noire.
-
J'utilise le système
de couleurs d'Android pour le
-
noir, qu'on appelle comme ceci.
-
Cool. On s'est ainsi occupé
des TextViews "quantité" et "0".
-
Le bouton Commander est bien ainsi,
le texte est toujours mis en majuscules
-
dans les boutons, avec une hauteur
et une largeur en "wrap_content".
-
On doit cependant s'occuper
de cet espace vertical.
-
On veut 16 dp de marge intérieure
ou extérieure entre les TextViews
-
"quantité" et "0".
-
On veut aussi 16 dp de marge intérieure
entre le "0" et
-
le bouton Commander.
-
On peut l'implémenter
de bien des façons,
-
Je préfère juste l'ajouter comme
marge supérieure pour le bouton ;
-
puis comme marge inférieure
pour la TextView "quantité".
-
N'hésitez pas à faire autre chose
tant que l'aspect final est le même.
-
J'ai préféré placer des marges
supérieures et inférieures parce que je
-
sais que cette zone au milieu
changera plus tard.
-
On la changera pour en faire
un sélecteur de quantité avec des
-
boutons plus et moins, et je tiens
à avoir 16 dp d'espace entre le titre
-
"quantité" et le sélectionneur.
-
Pareil pour le bouton.
-
Ok, relançons le code
sur notre appareil.
-
Cool, l'écran est pile comme on voulait.
-
La TextView "quantité" est
tout en majuscules, la TextView "0"
-
a une police noire de 16 sp, et on a
le bouton Commander ici.
-
On a aussi un espace
de 16 dp entre ces vues.
-
Beau travail.
Oh, j'avais oublié.
-
Le quiz demande aussi ce qui se passe
quand on appuie sur ce bouton.
-
Ben… En fait, il ne fait rien.
Pour le moment, du moins.
-
Restez attentifs pour
connaître la suite.