Bonjour à tous !
Tout d'abord, si vous n'avez pas encore fait la partie 1, c'est par ici !
Pour les autres, je suis ravi de vous retrouver. La partie 1 nous a surtout servi à mettre en place l'environnement de développement. Comme ça je sais que tout le monde possède les bons outils pour programmer et nous n'aurons pas à y revenir.
On va pouvoir parler de choses plus concrètes. Reprenez le projet du tuto précédent ou créez-en un nouveau (cela n'a aucune importance étant donné que l'on avait quasiment rien modifié).
1 - Interactions avec l'interface
Après les Textviews que l'on a vues précédemment, on va s’intéresser aux boutons sur Android, et voir les interactions possibles entre les deux.
Commencez par ajoutez un bouton à votre interface. Pour cela, ouvrez "main.xml". Deux méthodes s'offrent alors à vous :
Soit comme on l'a vu, avec la méthode graphique :
Soit directement dans le code (méthode à privilégié !)
<Button
android:id="@+id/bouton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Button" />
Quoiqu'il en soit dans les deux cas on va toucher au code.
En effet, normalement Eclipse vous signale un "WARNING" sur cette ligne :
Hé oui, souvenez vous, on a dit qu'il était préférable de répertorier tout le texte dans le fichier "String.xml", même si c'est simplement le nom d'un bouton.
Bien sûr vous pouvez modifier le texte en dur :
android:text="Bonjour je suis un bouton" />
Et cela donne :
Mais ce n'est pas "propre". Et moi, j'aime quand c'est propre. En plus Eclipse vous le dit.
Allez, allons ouvrir notre fichier "String.xml" et déclarer une nouvelle chaîne de caractère pour notre bouton :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Bonjour, je suis une application Android.</string>
<string name="app_name">Je suis le nom de l'application</string>
<string name="bouton1">Je suis un bouton</string>
</resources>
Essayez de lui donner un nom explicite.
Vous remarquerez au passage que j'en ai profité pour modifier les autres chaînes.
Maintenant on retourne sur notre "main.xml" et on fait le lien avec cette nouvelle chaîne :
<Button
android:id="@+id/bouton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/bouton1" />
Et donc on a :
La même chose, certes, mais c'est plus "propre" !
Donc pour la suite, retenez que les objets "Textview" et "Button" (et d'autres) ont des "ID" respectifs, comme vu ci-dessus, qui vont servir à y faire référence dans certains endroits du code.
D'ailleurs, puisqu'on en parle, mise en pratique !
On va implémenter un "OnClickListener" sur le bouton. C'est quoi ça ?
Hé bien c'est tout simplement une méthode qui, comme son nom l'indique, va "écouter" les pressions du bouton, et exécuter du code en conséquence.
Par exemple, ici, on va faire en sorte que l'appui sur le bouton affiche un texte.
Alors, commençons par implémenter le "OnClickListener"dans le code de notre activité :
On commence par faire un import de la méthode "OnClickListener" . Qui de toute façon se fait
automatiquement grâce à Eclipse.
Tient oui d'ailleurs parlons-en. Savez vous qu'Eclipse disposait d'une auto-complétion de code très utile. Exemple : vous êtes en train de taper du code et à tout moment vous pouvez appuyer sur CTRL + ESPACE et il vous fera une proposition logique sur la suite de l'expression.
Et parfois, si dans les celles proposées ne figurent pas la votre, c'est qu'il y à un problème, c'est un bon moyen de vérifier les arguments que prends une méthode, entre autres.
Bref, n'hésitez pas à en user et à en abuser, vous verrez qu'au bout d'un moment vous ne taperez presque plus de code. C'est la magie d'un IDE.
Reprenons, pour pouvoir manipuler un objet d'interface (appelé "vue") tels que des boutons ou Textview dans notre code, il faut les déclarer et les relier à vos objets d'interface xml.
Comme ici :
private Button unBouton;
On déclare un objet bouton. Ensuite il va falloir le "lier" à votre bouton d'interface. Pour cela, nous avons vu qu'il disposait d'un "ID" qui lui est propre est que vous choisissez. Allons vérifier cet "ID" dans "main.xml" :
android:id="@+id/bouton1"
Donc, ici, l'ID du bouton est : button1.
Donc pour la suite, retenez que les objets "Textview" et "Button" (et d'autres) ont des "ID" respectifs, comme vu ci-dessus, qui vont servir à y faire référence dans certains endroits du code.
D'ailleurs, puisqu'on en parle, mise en pratique !
On va implémenter un "OnClickListener" sur le bouton. C'est quoi ça ?
Hé bien c'est tout simplement une méthode qui, comme son nom l'indique, va "écouter" les pressions du bouton, et exécuter du code en conséquence.
Par exemple, ici, on va faire en sorte que l'appui sur le bouton affiche un texte.
Alors, commençons par implémenter le "OnClickListener"dans le code de notre activité :
import android.view.View.OnClickListener;
public class Tuto1Activity extends Activity implements OnClickListener {
private Button unBouton;
private TextView uneTextview;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
uneTextview = (TextView) findViewById(R.id.textview1);
unBouton = (Button) findViewById(R.id.bouton1);
unBouton.setOnClickListener(this);
}
On commence par faire un import de la méthode "OnClickListener" . Qui de toute façon se fait
automatiquement grâce à Eclipse.
Tient oui d'ailleurs parlons-en. Savez vous qu'Eclipse disposait d'une auto-complétion de code très utile. Exemple : vous êtes en train de taper du code et à tout moment vous pouvez appuyer sur CTRL + ESPACE et il vous fera une proposition logique sur la suite de l'expression.
Et parfois, si dans les celles proposées ne figurent pas la votre, c'est qu'il y à un problème, c'est un bon moyen de vérifier les arguments que prends une méthode, entre autres.
Bref, n'hésitez pas à en user et à en abuser, vous verrez qu'au bout d'un moment vous ne taperez presque plus de code. C'est la magie d'un IDE.
Reprenons, pour pouvoir manipuler un objet d'interface (appelé "vue") tels que des boutons ou Textview dans notre code, il faut les déclarer et les relier à vos objets d'interface xml.
Comme ici :
private Button unBouton;
On déclare un objet bouton. Ensuite il va falloir le "lier" à votre bouton d'interface. Pour cela, nous avons vu qu'il disposait d'un "ID" qui lui est propre est que vous choisissez. Allons vérifier cet "ID" dans "main.xml" :
android:id="@+id/bouton1"
Donc, ici, l'ID du bouton est : button1.
Implémentons le lien entre les deux grâce à la méthode "findViewById" :
unBouton = (Button) findViewById(R.id.bouton1);
Pour finir, donc, associons-lui un onClickListener :
unBouton.setOnClickListener(this);
On fait pareil pour la TextView au passage, sans le onClickListener, bien sûr (bien qu'il existe des images cliquables, que nous ne verrons pas pour l'instant).
Bon alors, maintenant, il faut créer un "corps" à cette méthode, et y mettre l'action à effectuer.
Pour l'instant, disons que l'appui sur le bouton changera le texte de notre TextView.
Rajoutez la méthode en dessous de la méthode onCreate :
Voyons le résultat, lançons l'application et pressons le bouton :
unBouton.setOnClickListener(this);
On fait pareil pour la TextView au passage, sans le onClickListener, bien sûr (bien qu'il existe des images cliquables, que nous ne verrons pas pour l'instant).
Bon alors, maintenant, il faut créer un "corps" à cette méthode, et y mettre l'action à effectuer.
Pour l'instant, disons que l'appui sur le bouton changera le texte de notre TextView.
Rajoutez la méthode en dessous de la méthode onCreate :
@Override
public void onClick(View v) {
uneTextview.setText("Tu as appuyé sur le bouton");
}
Voyons le résultat, lançons l'application et pressons le bouton :
Résultat :
C'est bien gentil tout ça mais ce n'est pas très folichon. Trop classique. Trop sérieux.
Ça manque de fun.... Hé mais ça manque de chats ! Mais oui c'est ça ! Rien de tel qu'un petit chaton pour égayer notre application.
Allez, on va faire en sorte que lors du clic, une photo de chat apparaisse !
Commencez par ajouter dans un de vos dossier "drawable" une photo de chat, ou autre.
Puis, on rajoute une "imageView" au main.xml :
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/win"
android:visibility="invisible" />
Ici, l'image que j'ai copiée dans le dossier drawable-mdpi s'appelle "win.jpg"
On règle dans un premier temps la visibilité de l'image sur "invisible" pour qu'elle n’apparaisse pas au lancement de l'application.
On revient au code de notre activité, on déclare un objet imageView comme on l'a fait pour le bouton un peu plus haut (findViewById) :
public class Tuto1Activity extends Activity implements OnClickListener {
private Button unBouton;
private TextView uneTextview;
private ImageView uneImage;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
uneImage = (ImageView) findViewById(R.id.imageView1);
unBouton = (Button) findViewById(R.id.bouton1);
unBouton.setOnClickListener(this);
}
Voila. On peut désormais manipuler l'image. Et on le fait, donc, dans le onClick du bouton :
@Override public void onClick(View v) {
uneTextview.setText("Tu as appuyé sur le bouton");
uneImage.setVisibility(0);
}
Grâce à la fonction setVisibility() , on va pouvoir rendre sa visibilité à l'image lors du clic.
Allez, testons:
On appuie sur le bouton, et tout à coup :
PAF ! Remarquez que ça a quand même beaucoup plus la classe comme ça non ?
Ok, c'est toujours aussi inutile, certes, mais on progresse.
On va malheureusement se quitter sur ça aujourd'hui. C'est encore un peu léger mais, rassurez-vous, maintenant que vous savez manipuler et modifier les différentes vues de l'écran, on va pouvoir faire des choses plus intéressantes !
C'était une étape obligatoire. C'est bien, vous progressez !
PS : Pour ceux qui restent bloqué sur une erreur ou ceux qui veulent seulement vérifier leur code, je vous mets à disposition les fichiers sources de ce projet fini. Vous pouvez les ouvrir directement dans DropBox l'affichage est très bon.
Et comme toujours, un simple merci en commentaire est grandement apprécié !
N'hésitez pas non plus à poser des questions !
Bonne journée à tous !
Grâce à la fonction setVisibility() , on va pouvoir rendre sa visibilité à l'image lors du clic.
Allez, testons:
On appuie sur le bouton, et tout à coup :
PAF ! Remarquez que ça a quand même beaucoup plus la classe comme ça non ?
Ok, c'est toujours aussi inutile, certes, mais on progresse.
On va malheureusement se quitter sur ça aujourd'hui. C'est encore un peu léger mais, rassurez-vous, maintenant que vous savez manipuler et modifier les différentes vues de l'écran, on va pouvoir faire des choses plus intéressantes !
C'était une étape obligatoire. C'est bien, vous progressez !
PS : Pour ceux qui restent bloqué sur une erreur ou ceux qui veulent seulement vérifier leur code, je vous mets à disposition les fichiers sources de ce projet fini. Vous pouvez les ouvrir directement dans DropBox l'affichage est très bon.
Et comme toujours, un simple merci en commentaire est grandement apprécié !
N'hésitez pas non plus à poser des questions !
Bonne journée à tous !
