การสร้าง Navigation Drawer

navigation drawer หรือ sliding menu คือแถบเมนูที่ปกติจะถูกซ่อนไว้ และจะเลื่อนออกมาจากทางซ้ายของจอเมื่อผู้ใช้ปาดนิ้วที่ขอบซ้ายของจอไปทางขวา หรือแตะไอคอนของแอพบน action bar

navigation drawer เป็นส่วนที่เราจะเตรียมตัวเลือกไว้ให้ผู้ใช้เข้าถึงเนื้อหาต่างๆซึ่งเป็นหัวข้อหลักในแอพของเรา เช่นแอพ YouTube จะมีตัวเลือกใน navigation drawer สำหรับเข้าถึงรายการวิดีโอที่ผู้ใช้อัพโหลดขึ้นไปเอง, รายการวิดีโอที่ผู้ใช้เคยเรียกดู (history), รายการวิดีโอที่ผู้ใช้เก็บไว้ดูภายหลัง รวมถึงรายชื่อ Channel ต่างๆที่ผู้ใช้สมัครไว้ เป็นต้น

หน้าหลักของแอพ YouTube

หน้าหลักของแอพ YouTube

navigation drawer ซึ่งจะแสดงออกมาเมื่อปาดนิ้วที่ขอบซ้ายไปทางขวา

navigation drawer ซึ่งจะแสดงออกมาเมื่อปาดนิ้วที่ขอบซ้ายไปทางขวา

เราจะมาเรียนรู้วิธีการสร้าง navigation drawer ให้กับแอพ Android กันในบทความนี้

เพิ่ม DrawerLayout ใน Layout

หัวใจสำคัญของการสร้าง navigation drawer ก็คือการเพิ่ม DrawerLayout ลงใน layout file ที่กำหนด UI ของแอพ

ภายใน DrawerLayout ให้สังเกตนะครับว่าวิวของเนื้อหาหลัก (LinearLayout ในที่นี้) จะมาก่อน แล้วถัดมาจึงเป็นวิวของตัว drawer ซึ่งโดยทั่วไปจะกำหนดเป็น ListView

ลำดับของวิวทั้งสองใน DrawerLayout ถือว่าสำคัญมากนะครับ เพราะว่าแอนดรอยด์จัดลำดับวิวในรูปแบบ z-order กล่าวคือ วิวใดถูกระบุใน XML ก่อนจะถูกสร้างไว้ข้างล่าง วิวใดถูกระบุทีหลังจะถูกสร้างไว้ข้างบน ทีนี้แอนดรอยด์กำหนดว่า drawer ต้องอยู่ข้างบนเนื้อหาหลักเท่านั้น ทำให้เราต้องระบุวิวของ drawer ไว้ทีหลังวิวของเนื้อหาหลักด้วยเหตุผลนี้เอง

แสดงรายการตัวเลือกใน Drawer

ที่แอคทิวิตี สิ่งที่เราต้องทำอย่างแรกเลยก็คือแสดงรายการตัวเลือกออกมาใน drawer และเนื่องจาก drawer ของเราสร้างขึ้นจาก ListView ดังนั้นวิธีที่ง่ายที่สุดก็คือเก็บข้อมูลไว้ในอาร์เรย์ แล้วนำข้อมูลจากอาร์เรย์มาใส่ลงใน ListView โดยใช้ ArrayAdapter

ในโค้ดข้างบน การกำหนด Adapter ให้กับ ListView จะใช้ข้อมูลจากอาร์เรย์ mPlanetTitles ซึ่งแต่ละข้อมูลในอาร์เรย์จะกลายมาเป็นไอเท็มหรือตัวเลือกหนึ่งๆในลิสต์ และการแสดงผลแต่ละไอเท็มจะใช้ layout ที่กำหนดในไฟล์ list_item.xml ซึ่งมีรายละเอียดดังนี้

ระบุการทำงานเมื่อผู้ใช้คลิกตัวเลือกใน Drawer

เมื่อผู้ใช้คลิกตัวเลือกใน drawer แอนดรอยด์จะเรียกมายังเมธอด onItemClick ภายใน OnItemClickListener ที่เรากำหนดให้กับ ListView

ในที่นี้จะแสดงตัวอย่างแบบง่ายๆคือ เมื่อผู้ใช้คลิกชื่อดาวเคราะห์ใน drawer เราก็จะนำชื่อดาวเคราะห์นั้นมาแสดงที่ TextView ภายในส่วนของเนื้อหาหลัก

ให้เพิ่มโค้ดต่อไปนี้ภายในคลาส MainActivity (คลาส DrawerItemClickListener ข้างล่างนี้จะเป็นคลาสที่ซ้อนอยู่ใน MainActivity อีกที)

ผลการรัน

Comments

comments

Tagged with: ,
Posted in Android
One comment on “การสร้าง Navigation Drawer
  1. ขอบคุณมากๆ ครับ กำลังศึกษาอยู่พอดี

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
ผลงานหนังสือ
คู่มือเขียนแอพ Android ฉบับรวมโค้ด New!
วางแผง ส.ค. 56 นี้;
ดูสารบัญและเนื้อหาตัวอย่าง

ผลงานหนังสือ
คู่มือเรียน Visual Basic 2010


สมาชิกโปรวิชั่นได้ส่วนลด 20%
เมื่อสั่งซื้อจากโปรวิชั่นโดยตรง