Lập trình Android tiếng Việt - Chapter 8: Android Using Menus

tion and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style. 11 8. Android – UI – Using Menus Using Menus 11 Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style. package cis493.matos.menu; // using Menus (Option & Context) import android.app.Activity; … public class Menu1Act1 extends Activity { EditText etMessage1; EditText etMessage2; Integer[] arrayPointSize = {10, 20, 30, 40, 50}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); etMessage1 = (EditText)findViewById(R.id.etMessage1); etMessage2 = (EditText)findViewById(R.id.etMessage2); // you may register an individual context menu for each view registerForContextMenu(etMessage1); registerForContextMenu(etMessage2); } //onCreate 12 8. Android – UI – Using Menus Using Menus 12 Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style. // set the option menu for the current activity @Override public boolean onCreateOptionsMenu(Menu menu) { // only one Option menu per activity populateMyFirstMenu(menu); return super.onCreateOptionsMenu(menu); } // detect what view is calling and create its context menu @Override public void onCreateContextMenu(ContextMenu menu, View v, 	 ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); // decide what context menu needs to be made if (v.getId() == etMessage1.getId()) // create a menu for etMessage1 box populateMyFirstMenu(menu); if (v.getId() == etMessage2.getId()){ // create a menu for etMessage2 box populateMySecondMenu(menu); } } //onCreateContextMenu 13 8. Android – UI – Using Menus Using Menus 13 Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style. private void populateMyFirstMenu(Menu menu){ int groupId = 0; int order= 0; //arguments: groupId, optionId, order, title menu.add(groupId, 1, 1, "10 points"); menu.add(groupId, 2, 2, "20 points"); menu.add(groupId, 3, 3, "30 points"); menu.add(groupId, 4, 4, "40 points"); menu.add(groupId, 5, 5, "50 points"); menu.add(groupId, 6, 8, "Red text"); menu.add(groupId, 7, 7, "Green Text"); menu.add(groupId, 8, 6, "Blue text"); } //populateMyMenu private void populateMySecondMenu(Menu menu){ int groupId = 0; int order= 0; //arguments: groupId, optionId, order, title menu.add(groupId, 9, 1, "Bold"); menu.add(groupId, 10, 2, "Italic"); menu.add(groupId, 11, 3, "Normal"); }//populateMySecondMenu 14 8. Android – UI – Using Menus Using Menus 14 Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style. // called whenever an item in your context menu is selected @Override public boolean onContextItemSelected(MenuItem item) { return(applyMenuOption(item) || super.onContextItemSelected(item) ); } // called whenever an item in your options menu is selected @Override public boolean onOptionsItemSelected(MenuItem item) { return(applyMenuOption(item) || super.onOptionsItemSelected(item) ); } Note: boolean event observers of the type onEvent(. . . ) by convention return true to indicate the triggered event has been consumed by the method, when false is returned the event is still alive and could be consumed by others. 15 8. Android – UI – Using Menus Using Menus 15 Example 1: Using Option and Context Menu // apply the action associated to selected item private boolean applyMenuOption(MenuItem item){ int menuItemId = item.getItemId(); // 1, 2, 3, ...11 String strMsg2 = etMessage2.getText().toString(); if (menuItemId " + originalText +"" + originalText +""); else if (selectedStyle.equals("NORMAL")) answer = Html.fromHtml("" + originalText +"</normal"); return answer; } //beautify } //Menu1Act1 17 17 8. Android – UI – Using Menus Using Menus 17 Comments on Creating an Option & Context Menu Step1. Indicate which widget(s) on your activity have context menus. To do this, call 	registerForContextMenu(theWidget) supplying the View that is the widget needing a context menu. Step2. Implement onCreateContextMenu(…), populate your menu adding text, icons, etc. to the different options. Use input menu parameter to determine which menu to build (assuming your activity has more than one). The onCreateContextMenu() method gets the ContextMenu itself, the View the context menu is associated with, and a ContextMenu.ContextMenuInfo, which tells you which item in the list the user did the tap-and-hold over, in case you want to customize the context menu based on that information 18 18 8. Android – UI – Using Menus Using Menus 18 Comments on Creating an Option & Context Menu onCreateContextMenu() is called each time the context menu is requested. Unlike the options menu (which is only built once per activity), context menus are discarded once they are used or dismissed. To find out when a context menu choice was chosen, implement onContextItemSelected() on the activity. 19 19 8. Android – UI – Using Menus Using Menus 19 Comments on Creating an Option & Context Menu In Example1 the event observers: onOptionsItemSelected() (for options menu selections) and onContextItemSelected() (for context menu selections) delegate on the applyMenuChoice(…) method the performing of the actions associated to the choices made by the user. @Override public boolean onOptionsItemSelected(MenuItem item) { 	return (applyMenuChoice(item) ); } @Override public boolean onContextItemSelected(MenuItem item) { 	return (applyMenuChoice(item)); } 20 8. Android – UI – Using Menus Using Menus 20 Example 2: Enhancing Option/Context Menu Click on SubMenu to see additional options This extension of the previous example adds icons and links to the Option Menu entries, as well as a sub-menu list tied to one the option menu buttons. Extending Example1. Keyboard shortcuts / links 21 8. Android – UI – Using Menus Using Menus 21 Example 2: Enhancing Option/Context Menu This extension of the previous example adds icons and links to the Option Menu entries, as well as a sub-menu list tied to one the option menu buttons. Extending Example1. 22 8. Android – UI – Using Menus Using Menus 22 Example 2: Enhancing Option/Context Menu private void populateMyFirstMenu(Menu menu){ int groupId = 0; //arguments: groupId, optionId, order, title MenuItem item1 = menu.add(groupId, 1, 1, "10 points"); MenuItem item2 = menu.add(groupId, 2, 2, "20 points"); MenuItem item3 = menu.add(groupId, 3, 3, "30 points"); MenuItem item4 = menu.add(groupId, 4, 4, "40 points"); //MenuItem item5 = menu.add(groupId, 5, 5, "50 points"); MenuItem item6 = menu.add(groupId, 6, 8, "Red text"); MenuItem item7 = menu.add(groupId, 7, 7, "Green Text"); MenuItem item8 = menu.add(groupId, 8, 6, "Blue text"); //set icons item1.setIcon(R.drawable.uno); item2.setIcon(R.drawable.dos); item3.setIcon(R.drawable.tres); item4.setIcon(R.drawable.cuatro); // shortcuts using device’s keyboard-keypad // on a G1 open slide open the keyboard and // type letter u (same as pressing menu UNO) item1.setShortcut('1', '1'); item2.setShortcut('2', '2'); item3.setShortcut('3', '3'); item4.setShortcut('4', '4'); Extending Example1. Figures used in this example were taken from: C:\android-sdk-windows\platforms\android-4\data\res\drawable Replace the method populateMyFirstMenu with the following code Remove this line from previous version 23 8. Android – UI – Using Menus Using Menus 23 Example 2: Enhancing Option/Context Menu // adding a sub-menu as fifth entry of this menu // .addSubMenu(int groupId, int itemId, int order, CharSequence title) int smGroupId = 0; // don't care, same as Menu.NONE int smItemId = 5; // fifth element int smOrder = 5; // don't care, same as Menu.NONE SubMenu mySubMenu5 = menu.addSubMenu(smGroupId, smItemId, smOrder, "Sub-Menu-CINCO"); mySubMenu5.setHeaderIcon(R.drawable.btn_rating_star_on_pressed); mySubMenu5.setIcon(R.drawable.cinco); // .add(int groupId, int itemId, int order, CharSequence title) MenuItem sub51 = mySubMenu5.add(smGroupId,5,1,"Sub Menu 5-1"); MenuItem sub52 = mySubMenu5.add(smGroupId,5,2,"Sub Menu 5-2"); MenuItem sub53 = mySubMenu5.add(smGroupId,5,3,"Sub Menu 5-3"); } //populateMyFirstMenu Extending Example1. Continuation… Replace the method populateMyFirstMenu with the following code 24 8. Android – UI – Using Menus Using Menus 24 Example 2: Enhancing Option/Context Menu private boolean applyMenuOption(MenuItem item){ int menuItemId = item.getItemId(); //1, 2, 3, ...11 String strMsg2 = etMessage2.getText().toString(); if (menuItemId < 5) { // first four options are for setting text size int newPointSize = arrayPointSize[menuItemId - 1]; etMessage1.setTextSize(newPointSize); etMessage2.setTextSize(newPointSize); } else if (menuItemId == 5) { // the sub-menu (attached to 5th item) is processed here 	etMessage1.setText ( 	 "You have selected: \n" +item.getTitle() 	 	 + "\nId: " + menuItemId 	 + " order: " + item.getOrder() ); } // either change color on text1 or style on text2 else if (menuItemId == 6) etMessage1.setTextColor(0xffff0000); // red Extending Example1. Continuation… Replace the method applyMenuOption with the following code Same as before Take care of sub-menu here 25 8. Android – UI – Using Menus Using Menus 25 Example 2: Enhancing Option/Context Menu else if (menuItemId == 7) etMessage1.setTextColor(0xff00ff00); // green else if (menuItemId == 8) etMessage1.setTextColor(0xff0000ff); // blue else if (menuItemId == 9) etMessage2.setText(beautify(strMsg2, "BOLD")); //bold else if (menuItemId == 10) etMessage2.setText(beautify(strMsg2, "ITALIC")); //italic else if (menuItemId == 11) etMessage2.setText(beautify(strMsg2, "NORMAL")); //normal return false; } //applyMenuOption Extending Example1. Continuation… Replace the method applyMenuOption with the following code Same as before 26 26 	 8. Android – UI – Using Menus Using Menus 26 Questions ?