การสร้างปุ่มกลับ บน Toobar ของ Android Studio

Android Studio API 21 ได้นำ Toolbar มาใช้แทน ActionBar โดยมีคุณสมบัติเพิ่มขึ้นมาก ในตัวอย่างต่อไปนี้ จะเป็นการสร้างปุ่มกลับเมนู บน Toolbar ดังภาพ

ปุ่มกลับเมนู ไม่ใช่ปุ่มกลับหน้าที่ผ่านมา แต่เป็นปุ่มกลับเมนูที่คลิกมาหน้าปัจจุบัน หรือ เมนูที่อยู่เหนืออีกชั้นหนึ่ง รายละเอียดดูที่ http://developer.android.com/design/patterns/navigation.html

ข้อดีของ Android Studio ที่ผมชอบ คือ เขามีการเขียนโค้ดเตรียมไว้ให้พร้อม เราเพียงแต่ให้รู้ว่า จะเพิ่มเติมอะไร อย่างไร นอกจากนี้ ยังมี  code hint ทำให้ทุ่นเวลาการเขียน พร้อมทั้งตรวจสอบความถูกต้องไปในตัว รุ่นที่ใช้อยู่นี้ คือ Android Studio 1.5

การสร้างปุ่มกลับ

1. เริ่มจากสร้าง Project ใหม่ เลือก API 11 และ Blank Project
   
2. เมื่อเปิดเข้ามา จะเห็นว่า Android Studio 1.5 สร้าง Toolbar ว่าง ๆ ไว้ให้แล้ว พร้อมกับสร้าง menu_main.xml ไว้ให้ด้วย เพื่อให้ตกแต่งเพิ่มเติม เช่น ใส่ปุ่มกลับ เพิ่มชื่อของ Activity เพิ่ม Overflow menu เป็นต้น
   
3. ปุ่มกลับต้องมี 2 หน้า ดังนั้นต้องสร้างหน้าใหม่ หรือ Activity ใหม่ โดยไปที่  Java > [PackageName] คลิกขวา และเลือก New > Activity > Blank Activity
   
4. ตั้งชื่อว่า DetailPage แล้วกด Finish
   
5. ก่อนอื่น ต้องสร้างปุ่มที่หน้าแรก เพื่อคลิกไปยังหน้าที่ 2 ที่เพิ่งสร้างขึ้น
6. ไปที่หน้าแรกที่  res > layout > content_main.xml เลือกส่วนที่เป็น Design
7. ลากปุ่มมาวาง ที่แถบ Property เปลี่ยนข้อความหน้าปุ่มเป็น ไปหน้า 2 และ ระบุ onclick ให้ใช้ goToDetail method
   
8. ไปที่ Java ของ MainActivity เพื่อสร้าง goToDetail() method ตามที่ระบุ
9. ก่อนอื่นต้อง import android.content.Intent เข้ามาก่อน เพื่อใช้คำสั่ง intent (หรือจะพิมพ์ก่อน แล้วค่อยกด Alt+Enter เพื่อ import ก็ได้)
10. เขียน method ใหม่ โดยเรียกใช้งาน intent และระบุหน้า DetailPage ซึ่งเป็นหน้าที่ต้องการไป พร้อมทั้งให้คำสั่ง ทำงานด้วย ดังนี้
    
11. ต่อไปจะเป็นการสร้างปุ่มลูกศรกลับ ในหน้า DetailPage
12. ที่ res > layout > content_detail_page ในหน้า Design ลาก Large Text Widget มาวาง และกำหนดข้อความว่า "หน้ารายละเอียด" หน้านี้ จะสร้างปุ่มลูกศรสำหรับกลับไปที่หน้าแรก
    
13. ไปที่ Java ของ DetailPage จะเห็นว่า Android Studio เขียนโค้ด Toolbar รอไว้แล้ว ใน onCreate () method พร้อมทั้ง ทำการ extends AppcompatActivity ให้ด้วย ซึ่งทำให้สามารถใช้ได้กับ Android รุ่นก่อน ๆ ย้อนไปถึง API 7 ทีเดียว
    
    
14. ปุ่มกลับ เป็นการเปลี่ยนลักษณะของการกลับไปหน้าแรก ให้เป็นการกลับไปยังหน้าที่มีระดับสูงกว่า 1 ขั้น โดยเรียกใช้  setDisplayHomeAsUpEnabled() ของ getSupportActionBar() โดยเขียนโค้ด ต่อจากที่มีอยู่แล้ว ใน onCreate() method (ก่อน FloatingActionButton) ซึ่งจะได้ปุ่มลูกศรกลับ บน Toolbar
    
15. เมื่อมีการคลิกปุ่มกลับ บน Toolbar เราจะใช้คำสั่ง intent เพื่อให้กลับไปยังหน้าแรก 
16. ก่อนอื่นต้อง import android.view.MenuItem; และ import android.content.Intent; เข้ามาก่อน เพื่อให้คำสังสามารถทำงานได้
17. เพิ่ม method เพื่อรอรับการคลิก และเรียกใช้ intent เพื่อให้กลับไปยังหน้าแรก โดยตรวจสอบ id ของ item ที่คลิก ในกรณีที่มี overflow menu ก็จะตรวจสอบตรงนี้ที่เดียวกัน ถ้า id เท่ากับ home ซึ่งเราบอกว่าจะให้กลับหน้าระดับเหนือหน้านี้ชั้นหนึ่ง เราก็เขียนโค้ดรับ โดยใช้ intent และระบุหน้าที่จะกลับไป ในตัวอย่างนี้หน้าแรกคือ MainActivity
    
18. ไปที่ manifest.xml เพื่อ ระบุระดับว่า หน้า MainActivity เป็นหน้าหลัก มิฉะนั้นจะใช้กับ API level 7 ไม่ได้ โดยระบุ ใน manifest.xmlในส่วนของหน้า DetailPage ดังนี้
    
19. เมื่อ run ดู จะเห็นหน้าจอดังนี้
    
20. เมื่อคลิกปุ่มไปหน้า 2 จะเห็นดังนี้
    
21. เมื่อคลิกลูกศรกลับ จะกลับมาที่หน้าแรก

ดาวน์โหลดไฟล์ zip เพื่อนำไปศึกษาได้ คลิกที่นี่

สำหรับการสร้าง Overflow menu ไปเพิ่ม item ในไฟล์ menu เช่น


และตรวจสอบการคลิก ใน onOprionsItemSelected() เช่นเดียวกัน โดยอาจใช้ switch case หรือ ใช้  if หลาย ๆ ครั้งตรวจสอบ ก็ได้


ที่มา
http://developer.android.com/training/appbar/up-action.html
http://developer.android.com/design/patterns/navigation.html
https://guides.codepath.com/android/Using-the-App-ToolBar
http://www.android4devs.com/2014/12/how-to-make-material-design-app.html
https://www.youtube.com/watch?v=EAZv1fP-5TM