[Android] Passer d’une vue à une autre en cliquant sur un bouton

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.

vueavecboutonsimple

  • 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 :

nouvelle_vue_projet_android

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

Remplacez le par celui-là :

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;
	}

}

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

new_android_xml_file

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

new_android_xml_file2

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)

androidmanifestxml

  • Sous la balise fermante “</activity>” ajoutez le code ci-dessous qui correspond à la nouvelle vue :
<activity android:name=".Vue2" />

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

<?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>

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”).

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;
	}

}

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.