Menu Principal
Par N CHAKA le jeudi, septembre 1 2011, 22:40 - Pages - Lien permanent
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 :
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.