Workshop Struktur dan Pemakaian Teknologi Game BAB 4. Menu

Workshop Struktur dan Pemakaian Teknologi Game

BAB 4 Menu

69


4.1 Tujuan Pembelajaran 1. Memahami tentang Menu, baik Option maupun Context Menu dan bagaimana penggunaannya.

4.2 Dasar Teori Sebagaimana halnya aplikasi-aplikasi untuk desktop dan beberapa sistem operasi pada mobile, Android mendukung activity dengan menu-menu aplikasi. Pada Android, ini disebut option menu. Beberapa telepon Android akan memiliki sebuah kunci khusus untuk melakukan pop menu dari option menu, dan beberapa yang lainnya akan menawarkan alternatif untuk men-trigger menu agar muncul, seperti on-screen button, dan sebagainya. Di samping itu, sebagaimana GUI toolkit, Anda dapat membuat context menu untuk aplikasi Android. Pada perangkat mobile, context menu

biasanya muncul saat user

melakukan tap (mengetuk) dan hold (menahan) pada widget tertentu.

4.2.1 Option Menu Option menu menampilkan informasi yang berhubungan di dalam activity. Menu ini beroperasi dalam satu ataupun dua mode, yaitu icon dan expand. Saat user pertama kali menekan tombol Menu, icon mode akan muncul, menampilkan enam buah menu pilihan yang terletak pada bagian bawah layar. Jika menu memiliki lebih dari enam buah pilihan, maka tombol keenam akan diberi label “More”. Memilih pilihan “More” akan mengarah ke mode expand, menunjukkan pilihan yang tersedia tidak terlihat pada menu reguler. Menu tersebut dapat terlihat jika user menggeser pilihan menu reguler.

4.2.2 Context Menu Context menu akan terlihat saat dilakukan tap-and hold pada widget. Berbeda dengan Option Menu (yang dieksekusi hanya sekali dalam satu activity), 70


Context Menu dihilangkan setelah selesai dipanggil atau digunakan. Oleh karena itu, Anda tidak mungkin untuk menahan (hold) pada objek Context Menu secara terus menerus, hanya terdapat satu kesempatan untuk membuild kembali menu tersebut untuk melengkapi kebutuhan activity berbasis on-demand.

71


Workshop 5 Option dan Context Menu A. Tujuan 1. Memahami macam-macam variasi dari XML Layout 2. Memahami penggunaan dari Basic Widget

B. Tugas Pendahuluan 1. Pelajari Option dan Context Menu Android

C. Percobaan a. Percobaan 1: Menggunakan Option dan Context Menu Langkah 1: Buat project Android baru pada Eclipse Langkah 2: Ketikan kode berikut pada main.xml <EditText android:id="@+id/edtMess1" android:text="Hello World" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" /> <EditText android:id="@+id/edtMess2" android:text="Welcome" android:layout_width="fill_parent" android:layout_height="wrap_content"

72


android:layout_margin="5dp" /> />

Langkah 3: Tambahkan statement berikut pada MenuActivity.java package com.example.menu; import import import import import import import import import import import

android.app.Activity; android.os.Bundle; android.text.Html; android.text.Spanned; android.view.ContextMenu; android.view.ContextMenu.ContextMenuInfo; android.view.Menu; android.view.MenuItem; android.view.View; android.widget.EditText; android.widget.TextView;

public class MenuActivity extends Activity { /** Called when the activity is first created. */ EditText edt1, edt2; Integer[] arrayPointSize = {10, 20, 30, 40, 50}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); edt1 = (EditText)findViewById(R.id.edtMess1); edt2 = (EditText)findViewById(R.id.edtMess2); // you may register an individual context menu for each view registerForContextMenu(edt1); registerForContextMenu(edt2); } public boolean onCreateOptionMenu(Menu menu){ // only one Option menu per activity populateMyFirstMenu(menu); return super.onCreateOptionsMenu(menu); } // detect what view is calling and create its context menu

73


@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() == edt1.getId()) // create a menu for etMessage1 box populateMyFirstMenu(menu); if(v.getId() == edt2.getId()){ // create a menu for etMessage2 box populateMySecondMenu(menu); } } 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 @Override public boolean onContextItemSelected(MenuItem item) { return(applyMenuOption(item)); } @Override public boolean onOptionsItemSelected(MenuItem item) { return(applyMenuOption(item)); } private boolean applyMenuOption(MenuItem item){ int menuItemId= item.getItemId(); // 1, 2, 3, ...11 String strMsg2 = edt2.getText().toString(); if(menuItemId<= 5) { // first five option are for setting text size int newPointSize= arrayPointSize[menuItemId-1]; edt1.setTextSize(newPointSize);

74


edt2.setTextSize(newPointSize); } else{ // either change color on text1 or style on text2 if(menuItemId== 6) edt1.setTextColor(0xffff0000); // red else if(menuItemId== 7) edt1.setTextColor(0xff00ff00); // green else if(menuItemId== 8) edt1.setTextColor(0xff0000ff); // blue else if(menuItemId== 9) edt2.setText(beautify(strMsg2, "BOLD")); //bold else if(menuItemId== 10) edt2.setText(beautify(strMsg2, "ITALIC")); //italic else if(menuItemId== 11) edt2.setText(beautify(strMsg2, "NORMAL")); //normal } return false; } //applyMenuOption // changing text style using HTML formatting // Spanned is text to which you could add formatting features private Spanned beautify (String originalText, String selectedStyle){ Spanned answer = null; if(selectedStyle.equals("BOLD")) answer = Html.fromHtml(""+ originalText+""+ originalText+""); else if(selectedStyle.equals("NORMAL")) answer = Html.fromHtml("<normal>"+ originalText+"
Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android Langkah 5: Kemudian, akan muncul output sebagai berikut :

75


Gambar 26 Tampilan Option dan Context Menu

Langkah 6 : Lakukan click pada text box atau click [Menu] pada hardware keyboard, maka outputnya adalah : Pada textbox “Hello World”

Pada textbox “Welcome”

Gambar 27 Contoh Tampilan Menu

76


b. Percobaan 2: Menggunakan Option dan Context Menu (lanjut) Langkah 1: Gunakan project Menu pada percobaan sebelumnya Langkah 2: Lakukan replace pada method populateMyFirstMenu() menjadi seperti berikut ini : 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"); item1.setIcon(R.drawable.emo_im_angel); item2.setIcon(R.drawable.emo_im_cool); item3.setIcon(R.drawable.emo_im_crying); item4.setIcon(R.drawable.emo_im_foot_in_mouth); // 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'); // adding a sub-menu as fifth entry of this menu // .addSubMenu(intgroupId, intitemId, intorder, CharSequencetitle) 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.btn_rating_star_on_normal); // .add(intgroupId, intitemId, intorder, CharSequencetitle) 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"); } //populateMyMenu

77


Langkah 5: Kemudian, akan muncul output sebagai berikut :

Gambar 28 Contoh Tampilan Awal Menu

Langkah 6 : Click pada text box atau click [Menu] pada hardware keyboard, maka outputnya adalah :

78


Gambar 29 Tampilan pilhan menu

Langkah 6 : Click pada salah satu menu, misalnya pada [10 points], maka font dalam text box berubah ukurannya sesuai dengan menu :

Gambar 30 Tampilan Setelah pilihan menu

79


Langkah 7 : kemudian, terdapat “Sub-Menu-Cinco”, click, maka akan muncul output sebagai berikut :

Gambar 31 Tampilan Submenu

Langkah 8 : jika di-click “Blue Text”, maka teks akan berubah warna menjadi biru, outputnya :

Gambar 32 Tampilan setelah pilihan menu

80

Workshop Struktur dan Pemakaian Teknologi Game BAB 4. Menu

Recommend Documents