Quand on débute en développement Android, on crée notre première application, on ajoute du texte, un bouton, etc… Et après ? Comment créer une nouvelle page et passer à cette page en cliquant sur le bouton ? 

C’est ce que je vais essayer d’expliquer aujourd’hui dans ce tutoriel.

Création du bouton

On va partir d’une page vide, où nous allons ajouter un bouton. Jusque-là, rien de bien compliqué.

Il vous suffit de déplacer le bouton à partir de la palette sur votre vue.

• Modifiez l’identifiant du bouton par : “buttonSuivant”

Ajout d’une deuxième vue

La deuxième étape consite à ajouter une seconde vue (ou activité) à notre projet.

Cette étape va se départager en 3 étapes.

Etape 1 : Création de la classe qui va contrôler la vue

Nous allons créer cette classe sous : src –> com.example.tutopassagevue

Faites un clic droit puis :

• New
• Class
• Nommez-là

L’arborescence de votre projet doit ressembler à ça :

Le code de la classe “Vue2.java” est presque vide.

Remplacez le par celui-là :

[java]
public class Vue2 extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.vue2);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}
[/java]

Etape 2 : Création de la vue

Maintenant, nous allons créer la vue dans le projet. Ajoutez simplement un nouveau “Android XML File” sous : res –> layout

• Clic droit
• New
• Other…
• Android XML File

• Nommez votre fichier XML “vue2”
  
• Validez par “Finish“

Etape 3 : Déclaration de la nouvelle vue dans le AndroidManifest.xml

Pour déclarer correctement cette nouvelle vue dans notre projet, il faut ajouter l’activité dans le fichier “AndroidManifest.xml“.

• Ouvrez le code du fichier “AndroidManifest.xml”
• Sélectionnez l’onglet où se trouve le code (voir ci-dessous)

• Sous la balise fermante “</activity>” ajoutez le code ci-dessous qui correspond à la nouvelle vue :

[xml]
<activity android:name=".Vue2" />
[/xml]

Le code de votre fichier AndroidManifest.xml doit être identique à ça :

[xml]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tutopassagevue"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.tutopassagevue.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".Vue2" />
</application>

</manifest>
[/xml]

Voilà. Si après enregistrement du projet il n’y a pas d’erreur bloquante, c’est que tout a bien été déclaré.

Passons à la dernière étape : le code du bouton!

La gestion du clic sur le bouton “suivant”

Maintenant que tout est en place, il faut gérer l’effet du clic de l’utilisateur sur le bouton suivant pour passer à la seconde vue.

Cette gestion se fait dans le code de notre classe Java (“MainActivity.java”).

[java]
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final Button buttonsuiv = (Button) findViewById(R.id.buttonSuivant);
buttonsuiv.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, Vue2.class);
startActivity(intent);
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}
[/java]

Enregistrez, compilez et testez!

Si vous avez suivi les étapes dans l’ordre, le passage d’une vue à l’autre doit se faire sans soucis.