Index of /Kuliah2016-2017/Struktur & Pemakaian Teknologi Game

(1)

69

BAB 4

(2)

70

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

(3)

71

(4)

72

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

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

<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"

(5)

73

android:layout_margin="5dp" />

/>

<TextView

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="Press the MENU key or Long press text-boxes" android:gravity="center_vertical" />

</LinearLayout>

Langkah 3: Tambahkan statement berikut pada MenuActivity.java

package com.example.menu;

import android.app.Activity; import android.os.Bundle; import android.text.Html; import android.text.Spanned; import android.view.ContextMenu;

import android.view.ContextMenu.ContextMenuInfo; import android.view.Menu;

import android.view.MenuItem; import android.view.View; import android.widget.EditText; import 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); }

(6)

74

@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;

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

(7)

75

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

edt1.setTextColor(0xff0000ff); // blue

edt2.setText(beautify(strMsg2, "BOLD")); //bold

edt2.setText(beautify(strMsg2, "ITALIC")); //italic

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("<b>"+ originalText+"</b"); else if(selectedStyle.equals("ITALIC"))

answer = Html.fromHtml("<i>"+ originalText+"</i>"); else if(selectedStyle.equals("NORMAL"))

answer = Html.fromHtml("<normal>"+ originalText+"</normal"); return answer;

} //beautify

}

(8)

[image:8.595.230.381.130.374.2]

76

Gambar 26 Tampilan Option dan Context Menu

Langkah 6 : Lakukan click pada text box atau click [Menu] pada

hardware

keyboard

, maka outputnya adalah :

[image:8.595.346.484.449.676.2]

Pada textbox “Hello World”

Pada textbox “Welcome”

(9)

77

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;

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)

(10)

[image:10.595.222.390.151.425.2]

78

Langkah 5: Kemudian, akan muncul output sebagai berikut :

Gambar 28 Contoh Tampilan Awal Menu

(11)

[image:11.595.223.387.131.411.2]

79

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 :

[image:11.595.235.376.460.695.2]

(12)

[image:12.595.237.372.171.406.2]

80

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 :

[image:12.595.234.374.458.687.2]