Android development skills-my menu (custom menu)

The Android SDK provides a default menu creation mechanism. However, although menus created through this mechanism are fully functional, the interface effect is a bit "earthy ". If a program with a gorgeous interface is matched with a menu with a somewhat "earthy", the user may feel strange and even compromise the beautiful interface. In fact, for such a flexible and powerful Android system, changing the menu style is just a piece of cake. There are many ways to add beautiful menus to programs. In this section, we first introduce a common method, that is, using the onKeyDown event Method and PopupWindow to implement custom menus. As to whether this technology can design brilliant menu effects, it depends on our design, aesthetics, and psychology skills.

You can see the option menu introduced in Section 6.1.1. You can pop up the option Menu by pressing the "Menu" key on the mobile phone (which is a hard button on the mobile phone, and the Menu key of different mobile phones will be in different locations, press the "Back" key to close the option menu. To simulate the pop-up and close effects of the option menu, you only need to listen to the press events of these two keys. When the "Menu" Key is pressed, PopupWindow is used to pop up a window as a simulated option Menu. Next, let's take a look at the effects of the simulated option menu shown in 6.9.

As shown in figure 6.9, three menu items are displayed below the interface: "Homepage", "my", and "more ". The text and images of the "my" menu items are arranged horizontally on the left and right, while the text and images on the other two menu items are arranged vertically up and down. In fact, this effect is completed by a common layout file (menu_layout.xml). The Code is as follows:

Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayoutxmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "horizontal" android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: gravity = "bottom">
<! -- The first menu item: "Homepage" -->
<LinearLayout android: id = "@ + id/home" android: orientation = "vertical"
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"
Android: background = "@ drawable/button_normal_translucent"
Android: layout_weight = "1">
<ImageView android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: src = "@ drawable/home"
Android: paddingTop = "5dp"/>
<TextView android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: text = "Homepage"
Android: gravity = "center"/>
</LinearLayout>
<! -- The second menu item: "My" -->
<LinearLayout android: orientation = "horizontal"
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"
Android: background = "@ drawable/button_normal" android: layout_weight = "1"
Android: gravity = "center">
<ImageView android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" android: src = "@ drawable/mine"/>
<TextView android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" android: text = "my"/>
</LinearLayout>
<! -- The third menu item
<LinearLayout android: orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: background = "@ drawable/button_normal"
Android: layout_weight = "1">
<ImageView android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: src = "@ drawable/more"
Android: paddingTop = "18dp"/>
<TextView android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: text = "more"
Android: gravity = "center" android: paddingTop = "5dp"/>
</LinearLayout>
</LinearLayout>

Before writing the code above, do not forget to prepare several related images. For example, this example uses five images. Specifically, button_normal_translucent.png is used for the background of the First-page menu item (half transparent effect). button_normal.png is used for the background of "my" and "more" menu items. Home.png?mine.pngand more.png are used for the images of the three menu items respectively.

The following code listens to the "menu" and "back" keys and presses the action. Press the "back" key to process the following two tasks.

If the option menu is displayed, close the option menu. If the option menu is not displayed or has been closed, close the current Activity directly, that is, call the finish method.

To differentiate the preceding two tasks, an int state variable (state) is set in the program. When state is 1, the option menu is displayed, if the state is 2, the option menu is not displayed. Let's take a look at the complete implementation code.

Copy codeThe Code is as follows: package mobile. android. ch06.custom. menu;
Import android. app. Activity;
Import android. OS. Bundle;
Import android. view. Gravity;
Import android. view. KeyEvent;
Import android. view. View;
Import android. view. View. OnClickListener;
Import android. widget. PopupWindow;
Import android. widget. Toast;
Public class Main extends Activity
{
PrivatePopupWindow pop;
PrivateView layout;
Private int state = 2; // status variable. 1: The option menu is displayed, and 2: The option menu is not displayed.
@ Override
Publicvoid onCreate (Bundle savedInstanceState)
{
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
}
@ Override
Publicboolean onKeyDown (int keyCode, KeyEvent event)
{
Switch (keyCode)
{
Case KeyEvent. KEYCODE_MENU: // the action of pressing the "menu" Key
// The option menu is displayed. No new window is displayed.
If (state = 1)
Return false;
// Load the option menu layout File
Layout = getLayoutInflater (). inflate (R. layout. menu_layout, null );
// Create a PopupWindow object and pop up the window for displaying the menu at the specified position
Pop = new PopupWindow (layout, getWindowManager ()
. Getdefadisplay display (). getWidth (), getWindowManager ()
. Getdefadisplay display (). getHeight ());
// Set the position of the pop-up window
Pop. showAtLocation (layout, Gravity. BOTTOM, 0, 0 );
View home = layout. findViewById (R. id. home );
// Add a click event for the "Homepage" menu item
Home. setOnClickListener (new OnClickListener ()
{
@ Override
Public void onClick (View view)
{
Toast. makeText (Main. this, "click custom menu.", Toast. LENGTH_LONG). show ();
// Click the "home page" menu to close the option menu
Pop. dismiss ();
// Reset the status variable
State = 2;
}
});
// After the option menu is displayed, set the status variable to 1, indicating that the option menu has been popped up.
State = 1;
Return false;
Case KeyEvent. KEYCODE_BACK: // the action of pressing the "back" Key
If (state = 1)
{
// If the option menu is displayed, close it.
Pop. dismiss ();
// Set the status variable to disabled in the option menu
State = 2;
}
Else if (state = 2)
{
// If the option menu is not displayed or is disabled, directly close the current Activity.
Finish ();
}
Return false;
}
// In addition to the "menu" and "back" press events, you still need to call the onKeyDown method of the Activity class to respond to the press events of other keys.
Return super. onKeyDown (keyCode, event );
}
}

Pay attention to the following points when writing the above Code. For the option menu, you can click a menu item to perform some actions, and the option menu is automatically closed. To simulate this process. Added a click event for the "Homepage" menu item. When you click the "home page" menu item, a Toast prompt is displayed, and the option menu is closed. After pressing the "menu" or "back" key, the onKeyDown method should return a constant (either false or true) and cannot call super. onKeyDown method. Otherwise, the default system action is executed after the Customized menu item action is executed. For example, when the "back" Key is pressed, the pop-up menu is closed and the current Activity is closed together. Of course, if you press other keys except "menu" and "back", you still need to call the onKeyDown method of the Activity class (that is, super. in this way, other key events can be responded to in the program. Otherwise, the program will have almost no other keys except the "menu" and "back" keys. The showAtLocation method is used for the position of the control pop-up window. The 1st parameters of this method are a View object. In fact, the showAtLocation method only needs to call the View. getWindowToken method internally to obtain an IBinder object. The first parameter in the showAtLocation method indicates the position of the pop-up window. In this example, the pop-up window is displayed at the bottom of the screen. The last two parameters indicate the horizontal and vertical offsets respectively. In this example, it is set to 0, indicating no offset. Therefore, the pop-up window is displayed at the bottom of the screen, that is, the position of the display option menu.