Dans ce nouvel épisode, nous allons nous occuper du menu général du jeu, qui devra apparaître après l’écran de présentation et qui ressemblera à ceci :



02_-_MainMenu.jpg

Nous allons donc créer dans le répertoire « res/layout », un nouveau fichier nommé mainmenu.xml, dans lequel nous allons définit le fond d’écran, le titre et les 4 boutons, de la manière suivante :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:gravity="center_horizontal"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:background="@drawable/main_screen">
	<ImageView
		android:src="@drawable/title_original_01"
		android:id="@+id/imageView1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"/>
	<ImageView
		android:layout_width="wrap_content"
		android:id="@+id/imageView2"
		android:layout_height="75dp"/>
	<Button
		android:gravity="center_vertical|center_horizontal"
		android:layout_height="wrap_content"
		android:id="@+id/main_play_button"
		android:text="@string/main_play"
		android:layout_width="@dimen/main_button_width"
		android:onClick="main_play_button_onClick"/>
 	<Button
		android:gravity="center_vertical|center_horizontal"
		android:layout_height="wrap_content"
		android:id="@+id/main_options_button"
		android:text="@string/main_options"
		android:layout_width="@dimen/main_button_width"
		android:onClick="main_options_button_onClick"/>
	<Button
		android:gravity="center_vertical|center_horizontal"
		android:layout_height="wrap_content"
		android:id="@+id/main_highscore_button"
		android:text="@string/main_highscore"
		android:layout_width="@dimen/main_button_width"
		android:onClick="main_highscore_button_onClick"/>
	<Button
		android:gravity="center_vertical|center_horizontal"
		android:layout_height="wrap_content"
		android:id="@+id/main_quit_button"
		android:text="@string/main_quit"
		android:layout_width="@dimen/main_button_width"
		android:onClick="main_quit_button_onClick"/>
</LinearLayout>

Nous créons donc un LinearLayout qui contiendra les différents objets, avec l’attribut android:gravity positionné à center_horizontal, pour centrer les objets les uns sous les autres, et dans lequel nous mettons notre image « @drawable/main_screen » en background. Nous ajoutons ensuite un premier « ImageView » afin d’afficher l’image correspondant au titre de notre jeu. Nous mettons un deuxième « ImageView » vide afin de laisser un espace entre le titre est les boutons dessous. Puis nous définissons les 4 boutons avec l’attribut « android:onClick » renseigné avec le nom de la fonction gérant l’action du bouton.



Dans « res/values », nous allons ajouter diverses définitions et divers identifiants,

Dans « res/values/dimens.xml » :

<resources>
    <dimen name="gfont_en_font_h">18.0px</dimen>
    <dimen name="main_button_width">100.0dp</dimen>
    <dimen name="main_layout_y">80.0px</dimen>
</resources>

Dans « res/values/ids.xml » :

<resources>
    <item type="id" name="highscore_title">false</item>
    <item type="id" name="main_play_button">false</item>
    <item type="id" name="main_options_button">false</item>
    <item type="id" name="main_highscore_button">false</item>
    <item type="id" name="main_quit_button">false</item>
</resources>

Dans « res/values/strings.xml » :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Spacoid</string>
    <string name="main_highscore">High Scores</string>
    <string name="main_options">Options</string>
    <string name="main_play">Play</string>
    <string name="main_quit">Quit</string>
</resources>

Nous allons mettre à jour le fichier AndroidManifest.xml afin de définir la nouvelle activité qui s’ouvrira pour afficher le menu de sélection du jeu.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jeux.mainmenu"
    android:versionCode="1"
    android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" />
    <application
        android:icon="@drawable/icon"
        android:label="@string/app_name">
        <activity
            android:name="MainMenuActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
            <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <activity
            android:name="MainMenu" 
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
    </application>
</manifest>

Enfin nous allons créer une nouvelle classe qui affichera le menu et gèrera les différents boutons. Sur « src/com.jeux.mainmenu », nous créons le nouveau fichier MainMenu.java, qui contiendra :

package com.jeux.mainmenu;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainMenu extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.mainmenu);
	}

	public void main_play_button_onClick(View v){}

	public void main_options_button_onClick(View v){}

	public void main_highscore_button_onClick(View v) {}

	public void main_quit_button_onClick(View v)
{
		finish();
	}
}

Dans la fonction « onCreate », nous affichons le layout « R.layout.mainmenu » correspondant à l’affichage désiré, comme vu plus au. Puis nous créons une fonction pour chaque callback associé aux boutons présents dans le menu :

main_play_button_onClick : Cette fonction sera appelée lors de la sélection du bouton “Play” et lancera le jeu. main_options_button_onClick : Cette fonction sera appelée lors de la sélection du bouton “Options” et permettra d’accéder aux options de son, RAZ du score et quelques informations sur le jeu. main_highscore_button_onClick : Cette fonction sera appelée lors de la sélection du bouton “High Scores” qui affichera l’écran des meilleurs scores. main_quit_button_onClick : Cette fonction sera appelée lors de la sélection du bouton “Quit” qui terminera l’activité et quittera l’application.

Télécharger l'archive.