Android Mad Tutorials : การสร้าง Options Menu บน Android

 

บทความนี้จะกล่าวถึงการสร้าง Options Menu บน Android กันนะครับ อาจมีคนสงสัยว่า Options Menu มันคืออะไร? หน้าตาเป็นอย่างไร? และใช้ทำอะไร? ผมก็จะขอตอบทีละคำถามแบบ Mad Mad เลยนะครับ

Options Menu มันคืออะไร?
- มันก็คือ Menu ที่มันเด้งขึ้นมาตอนที่เราๆ ท่านๆ กดปุ่ม Menu บนเครื่อง Android นั่นหล่ะครับ

หน้าตาเป็นอย่างไร?
- อันนีี้ก็ตอบยากเพราะหน้าตาของ memu ก็ขึ้นอยู่กับว่าใช้ Android version อะไร และเรากำลังเปิด application อะไรอยู่ โดยปกติแล้วหน้าตาของมันก็จะเป็นจั่งซี่

ใช้ทำอะไร?
- ใช้แสดง option การทำงานเพิ่มเติมจากฟังก์ชันการทำงานปกติที่แสดงอยู่บนหน้าจอ เป็นการใช้พื้นที่จอแสดงผลที่มีอยู่อย่างจำกัดได้อย่างเต็มประสิทธิภาพ เพราะ Options Menu จะแสดงขึ้นมาก็ต่อเมื่อเรากดปุ่ม menu บนเครื่องเท่านั้น

มาลงมือกันเลยดีกว่า

สำหรับผู้ที่ไม่เคยสร้าง Android Application มาก่อนสามารถศึกษาการสร้างเบื้องต้นได้ที่ http://developer.android.com/resources/tutorials/hello-world.html

การสร้าง Options Menu นั้นทำไม่ยากครับง่ายเหมือนปลอกกล้วยเข้าปากช้าง (มันเกี่ยวกันมั้ย) ขั้นตอนการทำเป็นดังนี้ครับ

สร้าง menu resource 

ซึ่งเป็นการสร้างรูปแบบของ menu ไว้ใน xml

1. ไปที่ Package Explorer คลิกขวาที่ res เลือก New > Folder
   
   Note : ถ้าใครยังไม่เห็นหน้า Package Explorer ให้กดปุ่ม Alt + Shift + Q พร้อมๆ กันแลัวปล่อยทั้งสามปุ่ม แล้วกด P  ^-^
2. ที่ dialog  New Folder  ที่ช่อง Folder Name ใส่ “menu” แล้วคลิก Finish
3. คลิกขวาที่ folder menu เลือก New > Android XML File
4. ที่ dialog New Android XML File ที่ช่อง  File ให้ใส่ชื่อไฟล์ลงไปนะครับในที่นี้ผมใส่ “mad_menu.xml” จากนั้นคลิก Finish
5. ให้เปิดไฟล์ “mad_menu.xml” ที่อยู่ใน res/menu ที่เราสร้างในขั้นตอนที่แล้ว โดยเลือกมุมมอง code editor โดยคลิกเลือกที่แท็บที่เป็นชื่อไฟล์ด้านล่าง
6. จากนั้นให้พิมพ์โค้ดเข้าไปดังนี้

   <?xml version="1.0" encoding="utf-8"?>
   <menu xmlns:android="http://schemas.android.com/apk/res/android" >
       <item 
           android:id="@+id/menu_item1" 
           android:title="Item 1"
           android:icon="@android:drawable/ic_menu_call"/>
       <item 
           android:id="@+id/menu_item2" 
           android:title="Item 2"
           android:icon="@android:drawable/ic_menu_camera"/>
      
   </menu>
   

   android:id – คือ resource ID ที่ใช้ระบุ item นี้ตอนถูกคลิก
   android:title – คือ ชื่อของ item ที่จะปรากฎตอนแสดงผล
   android:icon – คือ รูปไอคอนที่จะปรากฎตอนแสดงผลซึ่งในโค้ดข้างบนเป็นการเรียกใช้ icon แบบ built-in ของ Android
   
   [การเข้าถึง resource จาก xml สามารถอ่านเพิ่มเติมได้ที่ http://developer.android.com/guide/topics/resources/accessing-resources.html#ResourcesFromXml]
   
7. เปิดไฟล์ Options_MenuActivity.java ซึ่งเป็น Main Activity ให้พิมพ์โค้ดเข้าไปดังนี้

   package com.pinij.training.android;
   
   import android.app.Activity;
   import android.os.Bundle;
   import android.view.Menu;
   import android.view.MenuInflater;
   import android.view.MenuItem;
   import android.widget.Toast;
   
   public class Options_MenuActivity extends Activity {
       /** Called when the activity is first created. */
       @Override
       public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);
       }
       
       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
           MenuInflater inflater = getMenuInflater();
           inflater.inflate(R.menu.mad_menu, menu);
           return true;
       }
       
       @Override
       public boolean onOptionsItemSelected(MenuItem item) {
           if(item.getItemId() == R.id.menu_item1){
               Toast.makeText(this, "Item 1 was clicked", Toast.LENGTH_LONG)
                       .show();
           }
           return super.onOptionsItemSelected(item);
       }
   }
   

   มาดูโค้ดกันหน่อยดีกว่าว่าที่เขียนลงไปมันคืออะไร?
   (โค้ดที่เขียนลงไปคือบรรทัดที่ไฮไลทนะครับ ส่วน Method onCreate() ตัว IDE มันสร้างให้อยู่แล้วตอนที่สร้างโปรเจก)
   มาดูที่ onCreateOptionsMenu() กันก่อนนะครับซึ่ง method นี้เป็นการ Inflate menu resource (พูดให้เข้าใจง่ายๆเลยก็คือการ convert เมนูที่เราสร้างไว้ในไฟล์ mad_menu.xml ให้มันเป็น object นั่นเอง) โดยใช้ MenuInflater.inflate() 
   
   ต่อมาก็มาดูที่ onOptionsItemSelected()ซึ่ง method นี้เป็นการกำหนด action เมื่อ Item ของ Options Menu ถูกเลือกซึ่ง paramter item คือ object ของ item ที่ถูกเลือกซึ่งเราสามารถตรวจสอบว่า item ไหนกูกเลือกโดยการดึงเอา item ID มาตรวจสอบโดยใช้ getItemId()โดย action ที่ผมกำหนดนั้นคือถ้า item ที่ถูกเลือกมี ID เป็น menu_item1 ให้ Toast แสดงข้อความว่า “Item 1 was clicked” ส่วน menu_item2 ถ้าถูกคลิกแล้วให้ทำอะไรลองไปทำเป็นการบ้านดูนะครับ ถ้า Options Menu มี item จำนวนมากเราสามารถใช้ switch case ในการตรวจสอบว่า item ไหนถูกเลือกน่าจะสะดวกกว่าการใช้ if ครับ

เสร็จแล้วครับพี่น้อง เรามาดูผลลัพธ์ของโค้ดกันดีกว่า ให้ run appilication ขึ้นมาแล้วคลิกที่ปุ่ม menu บน device (ที่เห็นเป็นสีฟ้าๆ นั่นแหละครับ) ซึ่งจะแสดง Options Menu ขึ้นมา

จากนั้นลองคลิกที่ Item 1 จะเห็น pop up ขึ้นมาว่า “Item 1 was clicked”

เป็นอันเสร็จสำหรับการสร้าง Options Menu แบบง่ายๆ นอกจาก Options Menu แล้วยังมี Menu รูปแบบอื่นๆ อีกเช่น Context Menu และ Sub Menu ซึ่งสามารถอ่านเพิ่มเติมได้ที่ http://developer.android.com/guide/topics/ui/menus.html