การทำ Menu Button บน Toolbar

คับวันนี้ก็จะมายุ่งกับเจ้าตัว Toolbar หรือ Action Bar อีกแล้ว(อิอิ) อย่างแรกก็เหมือนเดิมคับ เรามาทำความรู้กันก่อนกับเจ้าตัวที่ชืื่อ Menu ?

รูปภาพ แบบนี้เขาเรียกกันว่า Menu ส่วนใหญ่ของสมาร์ทโฟนจะอยู่ซ้ายล่างของ
สมาร์ทโฟน มีมาตั้งแต่แรกของ Android ที่ไป Copied Blackberry มา แต่พักหลังๆ เห็นมีคนบ่นว่าไอ้เจ้า Menu ที่เป็น Hardware Button มันกดยาก ก็เลยมีการพัฒนาเข้ามาเป็นปุ่ม Menu ในหน้าจอแทน ( ตั้งแต่ Android 4.2 เป็นต้นมา ) โดยจะมีลักษณะเป็น … ( จุด จุด จุด รวมกัน เป็น 3จุด ) แต่เป็นแนวตั้งนะ เรียงติดกันและตำแหน่งของมันจะอยู่ที่ ขวาบน ของหน้าจอของ App ที่มี Tab Menu นะ ถ้า App ไหนไม่มีก็ไม่มีนะคับ มีรูปภาพตัวอย่างของเจ้าตัว Menu ที่เป็น Software Button ให้ดูด้วยคับ แต่ทุกคนคงเคยเห็นแล้วละ ผมว่า…

หน้าตาก็อย่างที่บอกคับเป็น … แนวตั้ง อยู่ขวาบนของหน้าจออยู่ข้างใน Toolbar หรือ Action Bar คับ

ต่อมาเราจะมาลองสร้างมันกัน ก็อื่นก็ไปสร้าง Project ใหม่ก่อนคับแล้วลงกด Run ดู

Toolbar ของเรายังว่างเปล่าอยู่ใช่ไมคับ สิ่งที่เราจะทำก็คือ ผมจะสร้างมันขึ้นมา
ให้ไปสร้าง resource directoty ให้ตั้งชื่อว่า menu ตัวเล็กหมดนะคับ
res/menu เราจะมาสร้าง xml ใน directoty นี้กัน
- ให้สร้าง Menu resource file มาหนึ่งไฟล์คับ ตั้งชื่อว่า menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

</menu>

นี้คือ code เริ่มต้นข้างในไฟล์ที่เราสร้างโดยยังไม่มีอะไรข้างใน
โดยส่วนที่ต้องเพิ่มก็คือ

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/tab_menu"
        android:title="Item1"
        app:showAsAction="never" />
</menu>

รูปแบบที่ได้

เท่านี้ก็ได้ Menu ขึ้นมาแล้ว และมี Menu ย่อยอยู่ใน Menu อีกด้วย แต่ยังไม่มีใน Toolbar นะคับต้องไป override onCreateOptionsMenu ก่อน

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.menu, menu)
    return true
}

ฟังก์ชันนี้จะเป็นการ Inflate ใอ้เจ้า menu ที่เราสร้างมาให้อยู่ตรงบนขวาของ Toolbar

เมื่อกดที่ menu

ส่วนคำสั่งถัดไปจะเป็นการทำงานเมื่อคลิก item ข้างใน menu คับ

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    when(item?.itemId) {
        R.id.tab_menu ->       
        Toast.makeText(this,"Hello World",Toast.LENGTH_SHORT).show()
    }
    return super.onOptionsItemSelected(item)
}

ผมสั่งไว้ว่าเมื่อกด item ที่มีชื่อว่า menu ให้แสดง Toast ขึ้นมาว่า “Hello World” คับ

ส่วนต้องการเพิ่ม item ข้างใน menu ก็ไปเพิ่มที่ ไฟล์ menu.xml ที่สร้างไว้คับ ก็ขอจบเพียงเท่านี้คับ ผิดตรงไหนบอกกันได้นะคับ ไปละคับ ขอบคุณคับ ^^