Basic Android Programming

Basic Android Programming
ผู้แต่ง ศุภชัย สมพานิช http://www.facebook.com/thaivbnet

บรรณาธิการ กิตินันท์ พลสวัสดิ์ kitinan@infopress.co.th
ออกแบบปก อนัน วาโซะ
ออกแบบและจัดรูปเล่ม วุฒิพันธ์ สมพระเมฆ
พิสูจน์อักษร สุนทรี บรรลือศักดิ์, มนฤดี ศรีอุทโยภาส
ประสานงานการผลิต สุพัตรา อาจปรุ, โสระวิน เพียรพิทักษ์
E-BOOK PRODUCTION สุรีย์รัตน์ จิอู๋, จิราภรณ์ โสภา
Android เป็นเครื่องหมายการค้าของบริษัท Google, Eclipse เป็นเครื่องหมายการค้าของบริษัท The
Eclipse Foundation และเครื่องหมายการค้าอื่นๆ ที่อ้างถึงเป็นของบริษัทนั้นๆ
สงวนลิขสิทธิ์ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537 โดยบริษัท ไอดีซี พรีเมียร์ จ�ำกัด ห้ามลอกเลียน
ไม่ว่าส่วนใดส่วนหนึ่งของหนังสือเล่มนี้ ไม่ว่าในรูปแบบใดๆ นอกจากจะได้รับอนุญาตเป็นลายลักษณ์อักษร
จากผู้จัดพิมพ์เท่านั้น
บริษทั ไอดีซี พรีเมียร์ จ�ำกัด จัดตัง้ ขึน้ เพือ่ เผยแพร่ความรูเ้ ทคโนโลยีสารสนเทศทัง้ ในระดับพืน้ ฐานและระดับสูง
เรายินดีรับงานเขียนของนักวิชาการและนักเขียนทุกท่าน โดยเฉพาะงานที่เกี่ยวข้องกับสารสนเทศ ท่าน
ผู้สนใจกรุณาติดต่อผ่านทางอีเมลที่ editor@infopress.co.th หรือโทรศัพท์หมายเลข 0-2962-1081
(อัตโนมัติ 10 คู่สาย) โทรสาร 0-2962-1084
ข้อมูลทางบรรณานุกรม ศุภชัย สมพานิช
Basic Android Programming
นนทบุรี : ไอดีซีฯ, 2555
280 หน้า
1. แอนดรอยด์
2. การเขียนโปรแกรม ส�ำหรับร้านค้าและตัวแทนจ�ำหน่าย
โทรศัพท์ 0-2962-1081-3 ต่อ 112-114
I ชื่อเรื่อง โทรสาร 0-2962-1084
006.76
ลูกค้าสัมพันธ์
ISBN 978-616-200-363-9
โทรศัพท์ 0-2962-1081-3 ต่อ 601
พิมพ์ครั้งที่ 1 ธันวาคม 2555 โทรสาร 0-2962-1084
จัดพิมพ์และจัดจ�ำหน่ายโดย บริษัท ไอดีซี พรีเมียร์ จ�ำกัด
200 หมู่ 4 ชั้น 19 ห้อง 1901 อาคารจัสมินอินเตอร์เนชั่นแนลทาวเวอร์
ถ.แจ้งวัฒนะ อ.ปากเกร็ด จ.นนทบุรี 11120
โทรศัพท์ 0-2962-1081 (อัตโนมัติ 10 คู่สาย) โทรสาร 0-2962-1084
ราคา 250 บาท
บรรณาธิการ
ในขณะที่ Smartphone Tablet และระบบปฏิบัติการ Android มีการพัฒนาขึ้นมาอย่างต่อเนื่อง สิ่ง
หนึ่งที่มีการพัฒนาอย่างต่อเนื่องเช่นกันก็คือ แอพพลิเคชัน ไม่ว่าจะเป็นแอพพลิเคชันส�ำหรับรับ-ส่งข้อความ,
ใช้งาน GPS, ใช้งานกล้องวิดีโอหรือถ่ายรูป, ใช้งาน Bluetooth, ใช้งานอินเทอร์เน็ต หรือจะเป็นแอพพลิเคชัน
ที่ท�ำงานร่วมกับฐานข้อมูล และเกม ก็มีการพัฒนาให้สามารถตอบสนองความต้องการของผู้ ใช้งานได้มาก
ขึ้นเรื่อยๆ ซึ่งการพัฒนาต่างๆ ที่กล่าวมาจะไม่สามารถท�ำได้เลยหากไม่มีพื้นฐานการเขียนโปรแกรมที่ดี โดย
ผู้อ่านสามารถศึกษาเรียนรู้หลักการและเทคนิคการเขียนโปรแกรมส�ำหรับพัฒนาแอพพลิเคชัน Android ได้
จากหนังสือเล่มนี้
หนังสือเล่มนี้ ได้รวบรวมความรู้พื้นฐานที่จำ� เป็นส�ำหรับการพัฒนาแอพพลิเคชัน Android ไว้อย่าง
ครบถ้วน ไม่ว่าจะเป็นการติดตั้งโปรแกรมส�ำหรับการพัฒนา สอนพื้นฐานการพัฒนาแอพพลิแคชันในระดับ
เบือ้ งต้น ทัง้ การใช้งานอิลเิ มนต์ การใช้ View หรือการใช้ Layout ส�ำหรับออกแบบแอพพลิเคชันในรูปแบบต่างๆ
ไปจนถึงการอัพโหลดแอพพลิเคชันขึ้นไปยัง Play Store เพื่อให้ผู้อ่านได้ศึกษาและสามารถน�ำไปได้ ใช้งานได้
จริง อีกทั้งยังมีเทคนิคและวิธีการแก้ไขปัญหาในเบื้องต้นไว้ ให้ด้วย ซึ่งจะช่วยให้ผู้อ่านสามารถเริ่มต้นพัฒนา
แอพพลิเคชัน Android ได้ด้วยตัวเอง เสมือนมีผู้เชี่ยวชาญคอยแนะน�ำตลอดการเรียนรู้ อีกทั้งผู้อ่านสามารถ
สอบถามหรือปรึกษาเทคนิคและวิธีการแก้ไขปัญหาการเขียนโปรแกรมได้ตลอกเวลา เนื่องจากผู้เขียนมีช่อง
ทางการช่วยเหลือได้ที่ http://www.ebooks.in.th/thaivb.net
ทั้งนี้ทางส�ำนักพิมพ์หวังเป็นอย่างยิ่งว่า หนังสือเล่มนี้จะมีประโยชน์ ในการเรียนรู้การพัฒนา
แอพพลิเคชัน Android ส�ำหรับผูอ้ า่ นไม่มากก็นอ้ ย และหากหนังสือเล่มนีม้ ขี อผิดพลาดประการใด ต้องขออภัย
มา ณ โอกาสนี้
กิตินันท์ พลสวัสดิ์
บรรณาธิการ
ค�ำน�ำ
หนังสือ Basic Android Programming เล่มนี้ น�ำเสนอเนือ้ หาตัง้ แต่พนื้ ฐานการเขียน Android App
ไปกระทัง่ ถึงการสร้าง App อย่างง่าย และสามารถใช้ได้จริง รวมไปถึงน�ำเสนอเนือ้ หาทีช่ ว่ ยให้ผอู้ า่ นสามารถ
ปรับแต่งส่วนแสดงผลใน Android App ได้ตามทีต่ อ้ งการให้เหมือนกับ App มาตรฐานทีค่ ณ ุ พบเห็นได้ ใน Play
Store โดยเริ่มต้นจากเนื้อหาที่ง่ายที่สุด ไปจนกระทั่งถึงการเขียนโปรแกรมร่วมกับระบบฐานข้อมูล SQLite
ซึ่งมีประโยชน์ส�ำหรับการพัฒนาแอพพลิเคชันที่มีความซับซ้อน
เนื้อหาในหนังสือเล่มนี้แบ่งออกเป็น 2 ส่วนใหญ่ๆ คือ ส่วนเริ่มต้นเรียนรู้และพัฒนา อีกส่วนหนึ่ง
คือ ส่วนตัวอย่างการพัฒนาแอพพลิเคชันอย่างง่าย โดยส่วนแรกมีวัตถุประสงค์ ให้ผู้อ่านมีพื้นฐานความรู้ที่
จ�ำเป็นส�ำหรับการพัฒนาแอพพลิเคชัน Android ในส่วนที่สองก็เพื่อให้ผู้อ่านสามารถเรียนรู้การน�ำพื้นฐาน
ในส่วนแรกไปใช้งานส�ำหรับพัฒนาแอพพลิเคชัน Android ได้จริง
ผู้เขียนหวังว่า เนื้อหาที่น�ำเสนอในเล่มนี้จะเป็นจุดเริ่มต้นที่ดีส�ำหรับคุณผู้อ่านที่เป็นมือใหม่ ที่
ต้องการเริ่มต้นพัฒนา Android App อย่างเป็นระบบและได้ผลลัพธ์ที่เห็นได้จริง ให้สามารถศึกษาเนื้อหา
ในระดับสูงต่อไปได้ด้วยตัวเอง
สุดท้ายนี้ผู้เขียนหวังเป็นอย่างยิ่งว่า หนังสือเล่มนี้จะมีประโยชน์ ในการเรียนรู้และพัฒนา
แอพพลิเคชัน Android ให้กบั ผูอ้ า่ น และหากหนังสือเล่มนีม้ ขี อ้ ผิดพลาดประการใด ต้องขออภัยมา ณ โอกาส
นี้ โดยผู้อ่านสามารถขอค�ำแนะน�ำและการช่วยเหลือได้ที่ http://www.ebooks.in.th/thaivb.net

ศุภชัย สมพานิช
ธันวาคม 2555
Contents
Part 1 ความรู้พื้นฐานการพัฒนา Android App......................................1
บทที่ 1 เตรียมตัวก่อนพัฒนา Android App...........................................3
การเตรียมสภาพแวดล้อมในการพัฒนา Android App...................................................................................... 4
ดาวน์โหลดและติดตั้งโปรแกรม Eclipse.................................................................................................. 4
ดาวน์โหลดและติดตั้ง Android SDK....................................................................................................... 6
การติดตั้ง ADT .......................................................................................................................................... 9
การก�ำหนดให้ Editors แสดงหมายเลขบรรทัดของโค้ด.......................................................................12
เริ่มต้นสร้าง Hello World App...........................................................................................................................13
รัน Hello World App เพื่อทดสอบการท�ำงาน ................................................................................................17
การสร้างเครื่องโทรศัพท์จ�ำลอง (Emulator)......................................................................................................20
การรัน Android Project เกิดข้อผิดพลาด.........................................................................................................22
การบันทึก Android Project................................................................................................................................23
การเปิด Android Project....................................................................................................................................25
การถอดรายการโปรเจ็กต์ออกจากโปรแกรม Eclipse.......................................................................................27
การเลือกพาธจัดเก็บ Workspace ใหม่..............................................................................................................28
บทที่ 2 พื้นฐานการสร้าง Android App...............................................29
การสร้างเหตุการณ์ click ให้กับปุ่มกด Button.................................................................................................29
พื้นฐานการรับค่าจากผู้ใช้งานด้วย EditText......................................................................................................36
การแสดงแถบข้อความด้วย Toast Notification..............................................................................................42
การก�ำหนดสีให้กับ widget ต่างๆ........................................................................................................................45
การลงสีแบบไล่โทนสี (Gradient Color)............................................................................................................47
ก�ำหนดสีแบบไล่โทนสีในขณะออกแบบ...................................................................................................47
ก�ำหนดสีแบบไล่โทนสีด้วยการเขียนโค้ด.................................................................................................50
การสร้างตัวเลือกแบบเลือกได้มากกว่า 1 รายการด้วย CheckBox...............................................................51
การสร้างตัวเลือกแบบ 1 ตัวเลือกด้วย RadioButton......................................................................................55
พื้นฐานการตรวจสอบข้อผิดพลาด........................................................................................................................58
การส่ง SMS ด้วย Android App.......................................................................................................................61
บทที่ 3 การแจ้งเตือนใน Android App................................................67
พื้นฐานการแสดงไดอะล็อกบ็อกซ์แบบ Alert......................................................................................................67
การแสดง AlertDialog แบบมีการตรวจสอบปุ่มกด...........................................................................................70
การรับข้อมูลจากผู้ใช้ด้วย Input Dialog.............................................................................................................75
การสร้างไดอะล็อกบ็อกซ์ยืนยันก่อนออกจาก Android App...........................................................................79
Contents I
Android App Development
บทที่ 4 ส่วนแสดงผลใน Android App................................................81
ท�ำความรู้จักกับส่วนแสดงผลแบบ RelativeLayout..........................................................................................81
การเปลี่ยนประเภท Layout..................................................................................................................................82
ท�ำความรู้จักกับส่วนแสดงผลแบบ LinearLayout.............................................................................................83
ท�ำความรู้จักกับส่วนแสดงผลแบบ TableLayout..............................................................................................85
การสร้างส่วนแสดงผลแบบแนวนอน..................................................................................................................88
การควบคุมรูปแบบส่วนแสดงผล.........................................................................................................................90
การสร้างส่วนแสดงผลแบบเลื่อนขึ้น-ลงด้วย SlidingDrawer..............................................................................94
บทที่ 5 การสร้างส่วนแสดงผลแบบรายการด้วย ListActivity......................99
พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วยคลาส ListActivity................................................................99
การสร้างรายการใน ListActivity จากอาร์เรย์ของข้อความ............................................................................102
พื้นฐานการแสดงรูปภาพก�ำกับแต่ละรายการในคลาส ListActivity...............................................................107
การแสดงรายการใน ListActivity แบบใช้รูปภาพแตกต่างกัน......................................................................110
การสร้าง Activity ที่สามารถเปลี่ยนส่วนแสดงผลได้.....................................................................................117
บทที่ 6 การสร้างส่วนแสดงผลแบบรายการด้วย ListView และ Spinner...... 123
พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วย ListView.............................................................................123
การแสดงข้อมูลแบบหลายคอลัมน์ใน ListView...............................................................................................126
การแสดงรายการใน ListView แบบมีตัวเลือก CheckBox...........................................................................132
พื้นฐานการลงสีใน ListView แบบไล่โทนสี......................................................................................................139
การลงสีใน ListView แบบตรวจจับเหตุการณ์.................................................................................................143
พื้นฐานการสร้างรายการให้ผู้ใช้เลือกด้วย Spinner.........................................................................................147
การแสดงรายการใน Spinner แบบมีรูปภาพก�ำกับแต่ละรายการ.................................................................150
บทที่ 7 การสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView.................. 155
พื้นฐานการสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView.......................................................................155
การแสดงข้อความและรูปภาพในแต่ละช่องตาราง..........................................................................................158
การใช้ตัวเลือกแบบ CheckBox ใน GridView................................................................................................165
บทที่ 8 ระบบเมนูใน Android........................................................... 173
ท�ำความรู้จักกับระบบเมนูใน Android App.....................................................................................................173
การสร้างเมนู About Me....................................................................................................................................178
การสร้างเมนูแบบ Popup ด้วยคลาส PopupMenu......................................................................................180
การสร้างเมนูให้กับแถบ Action Bar.................................................................................................................183
การใส่รูปภาพในเมนูของ Action Bar...............................................................................................................186
II Basic Android Programming

บทที่ 9 การทำ�งานกับส่วนแสดงผลตั้งแต่ 2 รายการขึ้นไป1�� 189
การสร้างส่วนแสดงผลที่มี 2 Activity และปุ่มเปลี่ยนส่วนแสดงผลไป-มา...................................................189
การรับ-ส่งข้อมูลระหว่าง Activity......................................................................................................................200
การสร้างลิงค์ใน ListActivity เชื่อมโยงไปยัง Activity อื่น...........................................................................206
บทที่ 10 พื้นฐานการใช้งานฐานข้อมูล SQLite ใน Android App.............. 211
พื้นฐานการใช้งานฐานข้อมูล SQLite.................................................................................................................211
การแสดงข้อมูลจากฐานข้อมูลด้วย ListView...................................................................................................219
การสร้างส่วนแสดงผลบันทึกข้อมูล...................................................................................................................226
Part 2 ตัวอย่างการพัฒนา Android App อย่างง่าย............................. 237
บทที่ 11 สร้างแอพพลิเคชัน MiniBrowser......................................... 239
บทที่ 12 สร้างแอพพลิเคชันกระจกวิเศษ.............................................. 245
บทที่ 13 สร้างแอพพลิเคชันเบอร์โทรฉุกเฉิน......................................... 253
ภาคผนวก ก การเตรียมไฟล์ apk ให้พร้อมใช้งานจริง............................ 263
ภาคผนวก ข การติดตั้งไฟล์ apk บนอุปกรณ์จริง................................. 267
Contents III
1
part
ความรู้พื้นฐานการพัฒนา Android App

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App
บทที่ 2 พื้นฐานการสร้าง Android App
บทที่ 3 การแจ้งเตือนใน Android App
บทที่ 4 ส่วนแสดงผลใน Android App
บทที่ 5 การสร้างส่วนแสดงผลแบบรายการด้วย ListActivity
บทที่ 6 การสร้างส่วนแสดงผลแบบรายการด้วย ListView และ Spinner
บทที่ 7 การสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView
บทที่ 8 ระบบเมนูใน Android
บทที่ 9 การท�ำงานกับส่วนแสดงผลตั้งแต่ 2 รายการขึ้นไป
บทที่ 10 พื้นฐานการใช้งานฐานข้อมูล SQLite ใน Android App
1
เตรียมตัวก่อนพัฒนา Android App
หนังสือ Android App Development ฉบับ Basic & Workshop เล่มนี้ เป็นหนังสือสอนและอธิบาย
การเขียน Android App ร่วมกับโปรแกรม Eclipse โดยมีเป้าหมายเพื่อต้องการให้ผู้อ่านสามารถสร้าง Android
App ที่มีมาตรฐานตามที่พบเห็นอยู่ในตลาด Play Store
ค�ำถามหนึ่งที่ผู้เขียนคิดว่าเกิดขึ้นกับผู้อ่านหลายๆ คนก็คือ เมื่อเราเห็นส่วนแสดงผลใน Android App
ต่างๆ ที่เราคุ้นเคยหรือชื่นชอบแล้วมักจะกลับมาคิดอยู่เสมอว่า ส่วนแสดงผลแบบนั้นท�ำอย่างไร
เนือ้ หาทีผ่ เู้ ขียนเลือกมาน�ำเสนอทัง้ หมดในเล่มนี้ เริม่ ต้นตัง้ แต่ในระดับพืน้ ฐาน “Hello World” ไปจน
กระทัง่ ถึงสร้างส่วนแสดงผลดังเช่นทีพ่ บเห็นได้ใน Android App ทัว่ ไป และมีตวั อย่าง Workshop ส�ำหรับประมวล
ความรู้ที่น�ำเสนอในหนังสือเล่มนี้ รวมเข้ามาเป็น Android App ที่สามารถใช้งานได้จริงบนอุปกรณ์ Smartphone
และ Tablet ที่รันระบบปฏิบัติการ Android
การน�ำเสนอของหนังสือเล่มนี้ เป็นการน�ำเสนอในลักษณะการอธิบายด้วยตัวอย่าง พร้อมสอดแทรก
เทคนิคการพัฒนา Android App ในตัวอย่างนั้นๆ โดยมีหัวข้อเนื้อหาเป็นเสมือนเป้าหมายของการอธิบาย เช่น
ในหัวข้อการสร้างเหตุการณ์ click ให้กับปุ่มกด Button ผู้เขียนจะอธิบายผ่านตัวอย่างการพัฒนา Android App
ตัวอย่างหนึ่ง เพื่อให้ผู้อ่านเข้าใจหลักการและมองเห็นแนวทางจากน�ำไปใช้งานจริง เป็นต้น
ที่ส�ำคัญก็คือ เนื้อหาที่น�ำเสนอผู้อ่านสามารถน�ำไปประยุกต์หรือต่อยอดในการพัฒนา Android App
ด้วยตัวเองได้อีกด้วย
การเตรียมสภาพแวดล้อมในการพัฒนา Android App

เพื่อให้ผู้อ่านและผู้เขียนเข้าใจตรงกัน จึงต้องมีการเตรียมสภาพแวดล้อมของผู้อ่านให้พร้อมใช้งาน
ก่อน ในขณะที่หนังสือเล่มนี้จัดจ�ำหน่าย Google มักจะมีการอัพเดตความคืบหน้าของ Android อยู่ตลอดเวลา
ส่งผลให้บางขั้นตอนอาจจะเหมือน หรือแตกต่างจากที่ผู้เขียนน�ำเสนอ แต่หลักการโดยภาพรวม Google ยังคง
ยึดถือตามแนวทางเดิมมาโดยตลอด
ดาวน์โหลดและติดตั้งโปรแกรม Eclipse
โปรแกรม Eclipse เป็นเครือ่ งมือพืน้ ฐานส�ำหรับพัฒนา Android App ซึง่ มีขนั้ ตอนการติดตัง้ ดังต่อไปนี้
ไฟล์ดาวน์โหลดทุกไฟล์ที่น�ำเสนอในหนังสือเล่มนี้อยู่ในโฟลเดอร์ \Tools ใน CD-ROM ที่แถม

มากับหนังสือเล่มนี้
1. เข้าสู่เว็บไซต์ http://www.eclipse.org/downloads/ เพื่อดาวน์โหลดโปรแกรม Eclipse

รูปที่ 1-1 1.1 กรอก URL
แสดงการ
ดาวน์โหลด
โปรแกรม Eclipse
1.2 คลิก
1.3 คลิก
4 Basic Android Programming

2. เมื่อดาวน์โหลดโปรแกรม Eclipse แล้ว ให้แตกไฟล์ zip ที่ได้ไว้ในพาธตามที่ต้องการ ในกรณีนี้
part
1
ผู้เขียนแตกไฟล์ไว้ที่ C:\Android และจะถือว่าพาธนี้คือ ที่อยู่ของโปรแกรม Eclipse ด้วย
เมือ่ ใดก็ตามทีผ่ อู้ า่ นต้องการเปิดโปรแกรม Eclipse ให้มาทีพ่ าธทีต่ ดิ ตัง้ โปรแกรม Eclipse นีเ้ สมอ
รูปที่ 1-2
แสดงรายการ 2 พาธติดตั้งโปรแกรม Eclipse
ไฟล์ของโปรแกรม
Eclipse
จากรูปที่ 1-2 ให้ดับเบิลคลิกไฟล์ eclipse.exe เพื่อเปิดโปรแกรม Eclipse
แสดงการก�ำหนด
พาธที่จัดเก็บ
โปรเจ็กต์
จากรูปที่ 1-3 เมื่อเปิดโปรแกรม Eclipse ขึ้นมาครั้งแรกจะมีการสอบถามว่า ต้องการเก็บโปรเจ็กต์ไว้

ที่ไหน ให้ผู้อ่านเลือกพาธตามที่ต้องการเก็บโปรเจ็กต์ Android ไว้
บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 5

ดาวน์โหลดและติดตั้ง Android SDK

Android SDK (Android Software Development Kit) เป็นเครือ่ งมือพืน้ ฐานส�ำหรับพัฒนา Android
App ซึ่งมีขั้นตอนการติดตั้งดังต่อไปนี้
1. เข้าสู่เว็บไซต์ http://developer.android.com/sdk/index.html เพื่อดาวน์โหลด Android SDK
ตามระบบปฏิบัติการที่เราใช้งานอยู่ ในกรณีนี้ผู้เขียนเลือกเวอร์ชันท�ำงานบน Windows
ดาวน์โหลด
Android SDK
1.2 คลิก
2. ให้ดบั เบิลไฟล์ทดี่ าวน์โหลดมาได้ในข้อ 1 ในทีน่ ชี้ อื่ installer_r20.0.3-windows.exe หรือมีชอื่ ตาม

เวอร์ชันที่ดาวน์โหลดมาเพื่อเริ่มต้นติดตั้ง Android SDK
แสดงการติดตั้ง
Android SDK
2.1 คลิก

รูปที่ 1-5 (ต่อ)
part
1
Android SDK
2.2 คลิก 2.3 คลิก
3. เริม่ ต้นการติดตัง้ Android SDK โดยการเลือกเวอร์ชนั ของ Android ทีต่ อ้ งการพัฒนา ในทีน่ เี้ ลือก
เวอร์ชัน 4.0.3 ขึ้นไป ซึ่งในขั้นตอนนี้ต้องเชื่อมต่อกับอินเทอร์เน็ตอยู่ด้วย
ส�ำหรับขอบเขตของหนังสือเล่มนี้ผู้เขียนเลือกใช้ Android ตั้งแต่เวอร์ชัน 4.0.3 ขึ้นไปเพราะ

ว่าในความเห็นของผู้เขียน Android 4.0 ถือเป็นเวอร์ชันที่เป็นจุดเริ่มต้นอย่างแท้จริง แต่ในกรณีที่
ผู้อ่านต้องการพัฒนา Android App ในเวอร์ชันที่ต�่ำกว่า (2.x และ 3.x) สามารถเลือกได้ตามต้องการ
แสดงรายการ
คอมโพเนนต์ต่างๆ
ของ Android
SDK ที่ติดตั้ง
เลือก 3.1
3.4 คลิก

คอมโพเนนต์ต่างๆ
ของ Android
SDK ที่ติดตั้ง
3.2 เลือก
3.3 คลิก
จากรูปที่ 1-6 รายการที่มีข้อความ Installed หมายถึง รายการที่ถูกติดตั้งแล้ว ส่วนรายการที่มีค�ำว่า

Not installed หมายถึง รายการที่ยังไม่มีการติดตั้งในเครื่อง โดยที่ผู้เขียนเลือกติดตั้ง Android SDK เวอร์ชัน
4.0.3 และเวอร์ชัน 4.1
มีสิ่งที่น่าสนใจอยู่ 2 ประการคือ
z เพื่อลดระยะเวลาการติดตั้ง ผู้อ่านสามารถยกเลิกรายการ Documentation for Android SDK
(เอกสารส่วนช่วยเหลือ) ได้ และสามารถเลือกติดตั้งได้ในภายหลัง

z ·รายการ Intel x86 Atom System Image เป็นรายการที่ผู้อ่านต้องเลือกติดตั้ง
ปัญหาที่ส�ำคัญอีกประการหนึ่งของนักพัฒนา Android App ก็คือ การทดสอบรันโปรเจ็กต์ในเวอร์ชัน

ที่ผ่านมาค่อนข้างล่าช้า สาเหตุก็คือ การทดสอบ Android App จ�ำเป็นต้องจ�ำลองสถาปัตยกรรมซีพียู ARM
รันบนซีพียู x86/x64 (อินเทลหรือเอเอ็มดี) อีกชั้นหนึ่ง จึงเป็นสาเหตุที่ท�ำให้เกิดความล่าช้าของการทดสอบ
โปรเจ็กต์ Android App นั่นเอง
แต่ในปัจจุบันอินเทลซึ่งเป็นผู้ผลิตซีพียู x86/x64 ได้สร้าง Emulator เพื่อทดสอบ Android App ที่
สามารถรันบนสถาปัตยกรรม x86 ได้โดยตรง (Native) จึงท�ำให้การทดสอบ Android App บนซีพียู x86/x64
ไม่ตอ้ งผ่านการจ�ำลองสถาปัตยกรรมซีพยี ู ARM อีกต่อไป เป็นอีกหนึง่ ทางเลือกทีท่ ำ� ให้สามารถทดสอบ Android
App ได้รวดเร็วขึ้นเล็กน้อย
ผลหลังจากที่
ติดตั้ง Android
SDK เสร็จ
เรียบร้อยแล้ว

part
1
ผลหลังจากที่
ติดตั้ง Android
SDK เสร็จ
เรียบร้อยแล้ว
การติดตั้ง ADT
ADT (Android Development Tool) เป็น Plug-in ของ Eclipse ที่จะช่วยอ�ำนวยความสะดวกใน
การพัฒนาแอพพลิเคชัน โดยที่ผู้อ่านไม่มีความจ�ำเป็นต้องเตรียมสิ่งต่างๆ ด้วยตัวเอง เช่น ADT จะเป็นตัวช่วย
สร้างโปรเจ็กต์ต้นแบบโดยมีโค้ดเริ่มต้นที่จ�ำเป็นไว้ให้ และเป็นตัวช่วยในการสร้างหน้าจอไปจนถึงการส่งไฟล์
นามสกุล .apk ส�ำหรับการติดตั้งแอพพลิเคชันบนเครื่องโทรศัพท์อีกด้วย ซึง่ มีขั้นตอนการติดตั้ง ADT ดังต่อไปนี้
1. เข้าสูเ่ ว็บไซต์ http://developer.android.com/sdk/installing/installing-adt.html เพือ่ ดาวน์โหลด
Android Developer Tool เรียกสั้นๆ ว่า ADT
แสดงการดาวน์โหลด
Android Developer
Tool (ADT)
1.2 คลิก

2. ให้ผู้อ่านแตกไฟล์ Android Developer Tool ที่ดาวน์โหลดมาไว้ในพาธตามที่ต้องการ ในกรณีนี้
ผู้เขียนยังคงเก็บไว้ที่ C:\Android
ไฟล์ในพาธ C:\
Android
3. เปิดโปรแกรม Eclipse ขึ้นมา คลิกเมนู Help > Install New Software... เพื่อก�ำหนดให้โปรแกรม
Exlipse สามารถพัฒนา Android App ได้
แสดงการเลือก
ค�ำสั่ง Install
New Software...
3 เลือก
4. เลือกพาธที่จัดเก็บไฟล์ ADT ในกรณีนี้ผู้เขียนเลือก C:\Android

แสดงการเลือก 4.1 คลิก
ADT ในเครื่อง
ของผู้เขียน

part
1
ADT ในเครื่องของ
ผู้เขียน
4.2 คลิก
4.3 เลือก
4.4 คลิก
5. คลิกเลือกรายการของ ADT ทุกรายการที่ปรากฏขึ้นมา

รายการที่อยู่ใน
ADT
เลือก 5.1
5.2 เลือก
5.3 คลิก

ระหว่างการ
ติดตั้ง ADT ให้
กับโปรแกรม
Eclipse
ณ จุดนี้โปรแกรม Eclipse สามารถสร้างโปรเจ็กต์ Android App ได้แล้ว

การก�ำหนดให้ Editors แสดงหมายเลขบรรทัดของโค้ด
1. เปิดโปรแกรม Eclipse คลิกเมนู Window > Preferences
เมนู Window >
Preferences
1 เลือก
2. จะปรากฏไดอะล็อกบ็อกซ์ Preferences
3. คลิกเลือก Editors > Text Editors
4. คลิกเลือก Show line numbers
5. คลิกปุ่ม

part
1
แสดงการคลิก
เลือก Show line
numbers
เลือก 3 4 เลือก
5 คลิก
เริ่มต้นสร้าง Hello World App

เราจะมาลองสร้าง Android App ง่ายๆ กันก่อนนั่นคือ Hello World App ซึ่งถือเป็นการทดสอบการ
ท�ำงานของโปรแกรม Eclipse ในการพัฒนาแอพพลิเคชันอีกด้วย โดยมีขั้นตอนดังนี้
1. เปิดโปรแกรม Eclipse ขึ้นมา คลิกเมนู File > New > Project...
2. จะปรากฏไดอะล็อกบ็อกซ์ New Project
3. คลิกเลือก Android > Android Application Project เพื่อเริ่มต้นสร้างโปรเจ็กต์ว่างๆ ขึ้นมา
ดังรูปที่ 1-16
แสดงการเริ่มต้น
สร้าง Android
Project แบบว่างๆ
ขึ้นมา
1 เลือก

แสดงการเริ่มต้น
สร้าง Android
Project แบบว่างๆ
ขึ้นมา
3.1 เลือก
3.2 คลิก
4. เข้าสู่ขั้นตอนการก�ำหนดรายละเอียดของ Android App ในขั้นต้นโดยที่

·ช่อง Application Name หมายถึง ชื่อ App ของเราในกรณีนี้คือ HelloWorld
·ช่อง Project Name หมายถึง ชื่อ Android Project โดยมีข้อแนะน�ำว่าควรมีชื่อ

เดียวกับ Application Name
·ช่อง Package Name หมายถึง ชือ่ Package ของ Android Project โดยมีขอ้ แนะน�ำ
ให้ใช้ชื่อที่ Eclipse แนะน�ำ
·ช่อง Build SDK หมายถึง การก�ำหนดให้ Android Project สร้างด้วย Android
SDK เวอร์ชันใด โดยขึ้นอยู่กับว่าผู้อ่านต้องการให้ App ของ
เราเผยแพร่ในระบบปฏิบัติการ Android เวอร์ชันใด ทั้งนี้ขอ
ให้ยึดถือไว้ว่า ในช่วงเวลาที่เราปล่อย Android App อุปกรณ์
Smart Phone หรือ Tablet ณ ช่วงเวลานั้นๆ ระบบปฏิบัติการ
Android อยู่ในเวอร์ชันใด
แสดงการก�ำหนด 4.1 กรอกชื่อ
รายละเอียดขั้นต้น
ให้กับ Android 4.2 กรอกชื่อ
Project
4.3 กรอกชื่อ
4..4 เลือก
4.5 คลิก

ขอบเขตของหนังสือเล่มนี้ยึดถือว่า App ที่สร้างขึ้นมาต้องการใช้งานกับระบบปฏิบัติการ Android
part
1
ตั้งแต่เวอร์ชัน 4.0.3 เป็นต้นไป
z ช่อง Minimum Required SDK ในกรณีที่ผู้อ่านคาดว่า Android App ครอบคลุมระบบ
ปฏิบตั กิ าร Android หลายเวอร์ชนั ขอให้ผอู้ า่ นระบุเวอร์ชนั

ของระบบปฏิบตั ิ Android ทีต่ ำ�่ ทีส่ ดุ ทีส่ ามารถรัน Android
App ได้ ก็จะท�ำให้ App ของเรารองรับหลายเวอร์ชนั นัน่ เอง
5. เข้าสู่ขั้นตอนการปรับแต่ง Android App โดยที่
z ·ไอคอน ให้ ผู ้ อ ่ า นคลิ ก ปุ ่ ม เพื่ อ เลื อ กไอคอนส� ำ เร็ จ รู ป ที่
มากับ Eclipse ดังรูปที่ 1-18
ไอคอนส�ำเร็จรูป
ให้กับ Android 5.1 คลิก
App
5.2 เลือก
5.3 คลิก
6. เลือกสีของไอคอนโดยการเลือกสีที่ Foreground Color ดังรูปที่ 1-19

แสดงการเลือกสี
ของไอคอน
6.2 เลือก
6.3 คลิก
คลิก 6.1
6.4 คลิก

7. เลือกประเภทของ App ที่ต้องการสร้างขึ้นมา ในขั้นต้นนี้เราต้องการ App ที่มีส่วนแสดงผลแบบ
หน้าจอเดียวจึงเลือกแบบ BlankActivity
ประเภท App ที่ 7.1 เลือก
ต้องการสร้างขึ้นมา 7.2 เลือก
7.3 คลิก
8. ก�ำหนดรายละเอียดขั้นต้นของประเภท App ในขั้นต้นนี้ให้ระบุชื่อ App ในช่อง Title ซึ่งหมายถึง

ชื่อ App ของเรา เมื่อปรากฏในอุปกรณ์ Smart Phone หรือ Tablet
ชื่อ App ปัจจุบัน
8.3 เลือก
8.5 คลิก
ณ จุดนี้โปรแกรม Eclipse จะสร้าง Android Project ว่างๆ ขึ้นมาให้

part
1
รัน Hello World App เพื่อทดสอบการท�ำงาน
ในหัวข้อนี้ผู้อ่านไม่จ�ำเป็นต้องเขียนโค้ด JAVA หรือออกแบบส่วนแสดงผลใดๆ ใน Android Project
เพราะผู้เขียนประสงค์จะน�ำเสนอเพียงขั้นตอนการพัฒนาและรันโปรเจ็กต์เท่านั้น ซึ่งมีขั้นตอนการรัน Hello
World App ดังนี้
1. ให้ผู้อ่านโฟกัสที่โฟลเดอร์ src หน้าต่าง Project Explorer (ท�ำหน้าที่เก็บโค้ดภาษา JAVA ของ
โปรเจ็กต์) ดังรูปที่ 1-22
รูปที่ 1-22 2.1 คลิก
แสดงวิธีการรัน
Android Project
ที่ถูกต้อง 1 โฟลเดอร์ src
2.2 เลือก
2.3 คลิก
จากรูปที่ 1-22 การเลือก Android Application เพื่อบอกโปรแกรม Eclipse ว่าต้องการรันโปรเจ็กต์

แบบ Android Application
ในส่วนนี้ผู้เขียนขออธิบายโดยสมมติว่ามีการสร้าง AVD ไว้แล้ว ซึ่งผู้อ่านสามารถศึกษาการ

สร้าง AVD ได้ในหัวข้อถัดไป

3. จะปรากฏหน้าต่าง Android Device Chooser เพื่อเลือก AVD ส�ำหรับรัน Android App
4. คลิกปุ่ม เพื่อรัน Android App
ระบบปฏิบัติการ
Android จ�ำลอง
เวอร์ชัน 4.0.3
3 เลือก
4 คลิก
5. จะปรากฏหน้าจอแสดงผลการท�ำงานของแอพพลิเคชันดังรูป
ผลการรัน Hello
World App บน
การรันระบบปฏิบัติ Android จ�ำลองบนเครื่องคอมพิวเตอร์ในครั้งแรกจะใช้ระยะเวลาพอสมควร

เปรียบเสมือนกับว่าเป็นการเปิดอุปกรณ์ Smart Phone หรือ Tablet เพื่อบู๊ตระบบปฏิบัติการ Android ขึ้นมา
ในอุปกรณ์ดังกล่าวนั่นเอง

จากรูปที่ 1-24 ในระหว่างการพัฒนา Android App ผู้อ่านไม่จ�ำเป็นต้องปิดระบบปฏิบัติการ Android
part
1
จ�ำลองแต่อย่างใด และการพัฒนา Android App ผู้อ่านไม่จ�ำเป็นต้องมีอุปกรณ์ Smart Phone หรือ Tablet
ของจริงก็ได้
ทั้งนี้ผู้อ่านสามารถเล่นระบบปฏิบัติการ Android จ�ำลองนี้เหมือนกับอุปกรณ์จริง เพื่อทดสอบว่า เมื่อ
Android App ของเราไปปรากฏบนอุปกรณ์ Smart Phone หรือ Tablet แล้ว มีหน้าตาอย่างไรโดยคลิกปุ่ม
Home เพื่อกลับไปหน้าแรกก่อน
แสดงหน้าแรก
ของระบบ
ปฏิบัติการ
จากนั้นกดปุ่ม All Program เพื่อไปหน้าโปรแกรมรวม ดังรูปที่ 1-26

แสดง Hello-
World App บน
5.3 Hello World App
5.2 คลิก
ส�ำหรับเนื้อหาในล�ำดับถัดไปเมื่อผู้เขียนจะกล่าวถึงระบบปฏิบัติการ Android จ�ำลอง โดยใช้ค�ำว่า

Android Emulator เพื่อให้กระชับต่อการน�ำเสนอ
ในกรณีที่ผู้อ่านไม่มีการสร้าง Android Emulator ไว้ก่อนการรันโปรเจ็กต์ โปรแกรม Eclipse

จะแจ้งว่าการรัน Android Project มีข้อผิดพลาด เพราะว่า Android Application ไม่สามารถรัน
บนเครื่องคอมพิวเตอร์ได้นั่นเอง เนื่องจากไม่มีเครื่องโทรศัพท์จ�ำลอง
แสดงข้อผิดพลาด
หลังจากรัน Android
Application บน
เครื่องคอมพิวเตอร์
การรัน Android Application ต้องรันอยู่บนระบบปฏิบัติการ Android ตามเวอร์ชันที่ก�ำหนด

ไว้เมื่อขั้นตอนการสร้างโปรเจ็กต์ ดังนั้น ผู้อ่านควรสร้างเครื่องโทรศัพท์จ�ำลองก่อนการรัน Android
Application
การสร้างเครื่องโทรศัพท์จ�ำลอง (Emulator)
ในการรัน Android Application ผูอ้ า่ นจะต้องสร้างโทรศัพท์จำ� ลองทีม่ สี ภาพแวดล้อมเหมือนโทรศัพท์
จริง หรือจะเรียกว่า Emulator ขึน้ มาก่อน ซึง่ ในการพัฒนา Android Application จะเรียกเครือ่ งโทรศัพท์จำ� ลอง
ว่า AVD (Android Visual Device) นั่นเอง โดยมีขั้นตอนการสร้าง AVD ดังนี้
1. คลิกเมนู Window > AVD Manager
แสดงการเรียก
หน้าต่าง Android
Virtual Device
Manager
1 คลิก
2. จะปรากฏหน้าต่าง Android Virtual Device Manager ให้คลิกปุ่ม เพื่อสร้างระบบ

ปฏิบัติการ Android จ�ำลองขึ้นมาใหม่ ดังรูปที่ 1-29

2 คลิก
part
1
แสดงระบบ
ปฏิบัติการ
3. จะปรากฏหน้าต่าง Create new Android Virtual Device (AVD) เพือ่ ก�ำหนดคุณสมบัตขิ องระบบ
ปฏิบัติการ Android ที่จะจ�ำลองขึ้นมา โดยที่
ช่อง Name คือ ชื่อระบบจ�ำลอง ในที่นี้ผู้เขียนแนะน�ำให้ตั้งชื่อโดยระบุว่า ระบบ
ปฏิบัติการ Android ที่จะจ�ำลองขึ้นมาเป็นเวอร์ชันอะไร เพื่อให้สะดวก
ต่อการทดสอบ Android App ในภายหลัง เช่น Android_4.0.3,
Android_2.3.3 เป็นต้น
ช่อง Target คือ เวอร์ชนั ของระบบปฏิบตั กิ าร Android ทีจ่ ะจ�ำลองให้กบั AVD ในกรณี
นี้คือ ระบบปฏิบัติการ Android เวอร์ชัน 4.0.3
ช่อง CPU/ABI คือ แพลตฟอร์มที่ก�ำหนดให้ระบบปฏิบัติการ Android ที่จะจ�ำลองขึ้นมา
ในที่นี้ในขณะที่ผู้เขียนติดตั้งคอมโพเนนต์ต่างๆ ให้กับโปรแกรม Eclipse

ผูเ้ ขียนได้เลือกระบบปฏิบตั กิ าร Android ในแพลตฟอร์มของ Intel ไว้ดว้ ย
จึงมีตัวเลือกปรากฏให้เห็น
รูปที่ 1-30 3.1 กรอกชื่อ
แสดงการก�ำหนด 3.2 เลือก
รายละเอียดของ
ระบบปฏิบัติการ 3.3 เลือก 3.4 เลือก
กำ�หนดขนาดหน่วยความจำ� 3.5
3.6 เลือก
กำ�หนดขนาดหน้าจอแสดงผล 3.7
3.8 คลิก
จากรูปที่ 1-30 เมื่อคลิกปุ่ม จะเริ่มต้นสร้างระบบปฏิบัติการ Android จ�ำลองขึ้นมาบน

เครื่องคอมพิวเตอร์ของเรา
การรัน Android Project เกิดข้อผิดพลาด

ข้อผิดพลาดที่เกิดขึ้นจากการรัน Android Project มีได้หลากหลายกรณี ในที่นี้ข้อยกตัวอย่างกรณีที่
ผูอ้ า่ นโฟกัสไฟล์อนื่ ๆ แล้วรันโปรเจ็กต์ ส่งผลให้โปรแกรม Eclipse ไม่ทราบว่าต้องท�ำอย่างไรกับไฟล์ดงั กล่าว เช่น
เมื่อผู้อ่านโฟกัสไฟล์ activity_main.xml (ท�ำหน้าที่เก็บ layout ของส่วนแสดงผลหลัก) แล้วรันโปรเจ็กต์ส่งผล
ให้เกิดข้อผิดพลาดดังรูปที่ 1-31
ในขณะรันโปรเจ็กต์
จากรูปที่ 1-31 โปรแกรม Eclipse ไม่ทราบว่าต้องท�ำอย่างไรกับไฟล์ activity_main.xml จึงสร้างไฟล์

activity_main.out.xml ขึ้นมา ส่งผลให้เกิดข้อผิดพลาดขึ้นมา
การแก้ไขข้อผิดพลาดกรณีนี้มี 2 ขั้นตอนคือ
1. ลบไฟล์ activity_main.out.xml ออกจากโปรเจ็กต์ก่อน
2. คลิกเมนู Project > Clean... ดังรูปที่ 1-32
เมนู Clean...
2 เลือก

3. จะปรากฏไดอะล็อกบ็อกซ์ให้เลือกว่า ต้องการ Clean โปรเจ็กต์ใดบ้าง โดยที่
part
1
·ตัวเลือก Clean all projects หมายถึง ต้องการ Clean โปรเจ็กต์ทั้งหมดเท่าที่มีอยู่
·ตัวเลือก Clean projects selected below หมายถึง ต้องการ Clean โปรเจ็กต์เฉพาะที่
ถูกคลิกเลือกเท่านั้น
แสดงการ Clean
เฉพาะโปรเจ็กต์
ปัจจุบัน 3.1 เลือก
3.2 เลือก
3.3 คลิก
การบันทึก Android Project

การบันทึก Android Project ผู้เขียนเลือกใช้วิธี Export โปรเจ็กต์ออกเป็นไฟล์ zip ซึ่งมีขั้นตอนดังนี้
1. คลิกเมนู File > Export...
เมนู Export...
1 เลือก

2. จะปรากฏไดอะล็อกบ็อกซ์ Export
3. คลิกเลือก General > Archive File ดังรูปที่ 1-35
รายการ Archive
File
3.1 เลือก
3.2 คลิก
4. เลือกโปรเจ็กต์ที่ต้องการ Export ในกรณีนี้คือ โปรเจ็กต์ HelloWorld App โดยเลือกทุกไฟล์ของ

5. ให้คลิกปุ่ม เพื่อเลือกที่อยู่ที่ต้องการบันทึกโปรเจ็กต์
6. คลิกเลือก Save in zip format เพื่อเลือกรูปแบบการบันทึกไฟล์โปรเจ็กต์
วิธีจัดเก็บโปร
เจ็กต์ที่ถูกเลือก
4.1 เลือก
4.2 เลือก
5.2 ที่อยู่ที่ต้องการบันทึก
5.1 คลิก
เลือก 6
7 คลิก
จากรูปที่ 1-36 สมมติว่าผู้เขียนต้องการบันทึกไว้ที่ desktop ในรูปแบบไฟล์ zip

part
1
การเปิด Android Project
การเปิด Android Project ในหัวข้อนี้เป็นการเปิดโปรเจ็กต์เดิมที่ได้บันทึกไว้ในรูปแบบของไฟล์ .zip
ซึ่งมีขั้นตอนดังนี้
1. คลิกเมนู File > Import... ดังรูปที่ 1-37
เมนู Import...
1 คลิก
2. จะปรากฏไดอะล็อกบ็อกซ์ Import
3. คลิกเลือก General > Existing Projects into Workspace เพื่อเปิดโปรเจ็กต์เดิมที่มีอยู่ ใน
Workspace ของโปรแกรม Eclipse ดังรูปที่ 1-38
หัวข้อ Existing
Projects into
Workspace 2 เลือก
3 คลิก

4. เลือกวิธีการเปิดโปรเจ็กต์ ในกรณีนี้ผู้เขียนเลือกเปิดโปรเจ็กต์ที่อยู่ในรูปแบบไฟล์ zip โดย
คลิกเลือก Select archive file
5. คลิกปุ่ม เพื่อเลือกไฟล์ zip ที่มี Android Project อยู่ภายใน
แสดงการ Import
ไฟล์ HelloWorld
App.zip 5 คลิก
เลือก 4
6 คลิก
จากรูปที่ 1-39 ส่วนตัวเลือก Select root directory หมายถึง การเปิด Android Project แบบปกติ
(เก็บอยู่ในโฟลเดอร์)
7. จะปรากฏหน้าโปรเจ็กต์ดังรูป
แสดง Android
Project ที่ถูก
เปิดในโปรแกรม
Eclipse

part
1
การถอดรายการโปรเจ็กต์ออกจากโปรแกรม Eclipse
บ่อยครั้งเมื่อเราพัฒนา Android App เสร็จเรียบร้อยแล้ว เราอาจต้องการลบรายการพัฒนาต่างๆ
ออกไปจากโปรแกรม Eclipse ซึ่งสามารถท�ำได้โดยมีขั้นตอนดังนี้
1. ในส่วนของหน้าต่าง Project Explorer ให้ผู้อ่านคลิกขวารายการโปรเจ็กต์ที่ต้องการถอดออกจาก
โปรแกรม Eclipse แล้วเลือกค�ำสั่ง Delete ดังรูปที่ 1-41
แสดงการเลือกค�ำ
สั่ง Delete ของ
1.1 คลิกขวา
โปรเจ็กต์ Hello
Android
1.2 เลือก
2. จะมีไดอะล็อกบ็อกซ์แจ้งเตือนยืนยันการถอดโปรเจ็กต์ออกจาก workspace ของโปรแกรม Eclipse

ให้คลิกปุ่ม
แสดงการแจ้ง
เตือนการถอด
โปรเจ็กต์ Hello
Android ออก
จากโปรแกรม 2 คลิก
Eclipse
ในกรณีที่ผู้อ่านคลิกเลือก Delete project contents on disk (cannot be undone) หมายถึง การ

ลบตัวโปรเจ็กต์จริงๆ ด้วย
3. โปรเจ็กต์ที่เลือกถูกถอดออกจากโปรแกรม Eclipse แล้ว
โปรแกรม Eclipse
ปัจจุบันของผู้เขียน
ไม่มีโปรเจ็กต์ใดๆ
ค้างอยู่แล้ว

การเลือกพาธจัดเก็บ Workspace ใหม่

ในขณะที่ผู้อ่านพัฒนาโปรเจ็กต์ Android ไปได้ระยะหนึ่ง ส่งผลให้โปรแกรม Eclipse มีรายการ
โปรเจ็กต์ Android ต่างๆ เก็บอยู่ใน Workspace มากมาย (ถ้าผู้อ่านไม่มีการเปลี่ยน Workspace ใดๆ) ซึ่งผู้
อ่านสามารถเปลี่ยนไปใช้ Workspace อื่นได้ โดยมีขั้นตอนดังนี้
1. คลิกเมนู File > Switch Workspace > Other...
เมนู Other...
1 เลือก
จากรูปที่ 1-44 ทุกๆ ครั้งที่ผู้เขียนสร้างโปรเจ็กต์ Android ขึ้นมา ผู้เขียนจะเก็บไว้ที่พาธเริ่มต้นของ

โปรแกรม Eclipse (เก็บอยู่ที่พาธ C:\Users\thaivb\workspace)
2. จะปรากฏไดอะล็อกบ็อกซ์ Workspace Launcher
3. คลิกปุ่ม เพื่อเลือกพาธจัดเก็บโปรเจ็กต์ใหม่ (Workspace ใหม่) ดังรูปที่ 1-45
แสดง
ไดอะล็อกบ็อกซ์
Workspace 2 กำ�หนดพาธ
Launcher
3 คลิก
สรุปท้ายบท
เนื้อหาในบทนี้เป็นการกล่าวถึงในภาพกว้างของการพัฒนา Android App ด้วยโปรแกรม Eclipse
รวมไปถึงการเตรียมสภาพแวดล้อมให้พร้อมใช้งาน เนื้อหาในบทต่อไปจะเข้าสู่การพัฒนา Android App อย่าง
แท้จริง

2
พื้นฐานการสร้าง Android App
การพัฒนา Android App ขึ้นมาจะประกอบไปด้วยการน�ำฟีเจอร์หลายๆ อย่างมาหลอมรวมเข้าด้วยกัน
ในบทนี้ เราจะมาเริ่มต้นศึกษาว่าฟีเจอร์ที่มากับ Android SDK ที่ผู้อ่านควรทราบในขั้นต้นมีอะไรบ้าง
การสร้างเหตุการณ์ click ให้กับปุ่มกด Button

ในหัวข้อนีเ้ ราจะมาเริม่ สร้าง Android App แรกกัน โดยผูเ้ ขียนตัง้ ชือ่ ว่า Hello Android App จุดประสงค์
ของ App นี้ก็คือ ศึกษาการสร้างเหตุการณ์ click ให้กับปุ่มกด Button เพื่อก�ำหนดข้อความ “Hello Android” ใน
widget ประเภท TextView ซึ่งมีขั้นตอนดังนี้
ตัวอย่างที่ 2-1 การสร้างเหตุการณ์ Click ให้กับ Button ซึ่งมีขั้นตอนดังนี้
1. เปิดโปรแกรม Eclipse คลิกเมนู File > New > Project...
2. เลือกโปรเจ็กต์แบบ Android Application Project ตัง้ ชือ่ ว่า Hello Android ก�ำหนดให้ใช้ Android
เวอร์ชัน 4.0.3 ดังรูปที่ 2-1
ให้ใช้ Android 2.1 กรอกชื่อ
เวอร์ชัน 4.0.3 2.2 กรอกชื่อ
2.4 เลือก
2.5 เลือก
2.6 คลิก
3. ที่ช่อง Title ตั้งชื่อให้กับ App นี้ว่า Hello Android ดังรูปที่ 2-2
แสดงการตั้งชื่อให้
กับ App ปัจจุบัน
3.2 กรอกชื่อ 3.3 เลือก
3.5 คลิก
4. เข้าสูส่ ภาพแวดล้อมของโปรแกรม Eclipse ว่างๆ ให้ผอู้ า่ นเปิดไฟล์ strings.xml ทีพ่ าธ \res\values\

strings.xml ของโปรเจ็กต์ เพือ่ ก�ำหนดข้อความทีต่ อ้ งการใช้งานเพราะว่า Android Project ถือว่า
ข้อความ (string) เป็นทรัพยากรประเภทหนึ่ง ดังรูปที่ 2-3
แสดงไฟล์ strings.
xml ในโฟลเดอร์ \
res\values
4.2 แสดงข้อมูลในไฟล์
4.1 ดับเบิลคลิก

5. โปรเจ็กต์นี้ต้องการใช้ 2 ข้อความ ดังนั้น ให้ผู้อ่านคลิกปุ่ม
part
เพื่อเพิ่มข้อความใหม่เข้ามา
1
ในโปรเจ็กต์
แสดงการเพิ่ม 5.1 คลิก
ข้อความที่ชื่อว่า
TextView1
5.2 เลือก
5.3 คลิก
5.4 ข้อความใหม่ ชื่อข้อความใหม่

ข้อมูลข้อความใหม่
ข้อความที่ชื่อว่า TextView1 (ช่อง Name) ท�ำหน้าที่เก็บข้อความ “TextView1” (ช่อง Value*)

6. ให้เพิ่มอีก 1 ข้อความโดยตั้งชื่อว่า Button1 ดังรูปที่ 2-5
แสดงการสร้าง
Button1
ชื่อข้อความใหม่
6 ข้อความใหม่ ข้อมูลข้อความใหม่
จากรูปที่ 2-5 ข้อความทีช่ อื่ ว่า Button1 (ช่อง Name) ท�ำหน้าทีเ่ ก็บข้อความ “Button1” (ช่อง Value*)
ส่งผลให้ในโปรเจ็กต์มีข้อความใหม่เพิ่มขึ้นมา 2 ข้อความ
บทที่ 2 พื้นฐานการสร้าง Android App 31

7. ในส่วนแสดงผล (\res\layout\activity_main.xml) ให้ผอู้ า่ นออกแบบโดยลาก widget ต่างๆ มาวาง
ในส่วนหน้าจอแสดงผลดังรูปที่ 2-6
ส่วนแสดงผล
ในขณะออกแบบ
7.1 ลากวาง
ลากวาง 7.2
จากรูปที่ 2-6 เป็นการใช้งาน widget ประเภท TextView (ท�ำหน้าที่แสดงข้อความ) และ widget

ประเภท Button (ท�ำหน้าที่เป็นปุ่มกด)
8. ก�ำหนดให้ widget ประเภท TextView ใช้ขอ้ ความทีช่ อื่ ว่า TextView1 และ widget ประเภท Button
ใช้ข้อความที่ชื่อว่า Button1 ที่เราสร้างไว้ในขั้นตอนที่แล้ว โดยก�ำหนดที่คุณสมบัติ Text ใน
หน้าต่าง Properties ดังรูป
ให้ widget
ประเภท
TextView ใช้
TextView1 8.1 เลือก
คลิก 8.2
เลือก 8.3
เลือก 8.4
8.5 คลิก

part
1
ให้ widget
ประเภท Button
ใช้ข้อความที่ชื่อ
ว่า Button1
คลิก 8.7
8.6 เลือก
เลือก 8.8
เลือก 8.9
8.10 คลิก
จากรูปที่ 2-7 และรูปที่ 2-8 เป็นการก�ำหนดให้ widget ทั้ง 2 ตัวใช้ข้อความที่มาจากทรัพยากรของ

9. ผู้อ่านสามารถคลิกแท็บ activity_main.xml เพื่อแสดงส่วนแสดงผลแบบโครงสร้าง XML ได้
แสดงโครงสร้าง
XML ของส่วน
แสดงผลปัจจุบัน
9 เลือก

ในขณะที่เราออกแบบส่วนแสดงผล โปรแกรม Eclipse จะสร้างสคริปต์ XML เหล่านี้ให้โดยอัตโนมัติ
นัน้ หมายความว่า ส่วนแสดงผลใน Android App ใช้โครงสร้างของ XML เข้ามาท�ำหน้าทีว่ าดส่วนแสดงผลนัน่ เอง
สคริปต์ XML ที่ 2-1 Hello Android App (\res\layout\activity_main.xml)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
tools:context=".MainActivity" />
<Button
android:id="@+id/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="52dp"
android:text="@string/Button1" />
<TextView
android:id="@+id/textView1"
android:text="@string/TextView1" />
</RelativeLayout>
10. จากนัน้ ให้ผอู้ า่ นเขียนโค้ดภาษา JAVA เพือ่ ก�ำหนดการท�ำงานของแอพพลิเคชันทีไ่ ฟล์ MainActivity.

java ดังต่อไปนี้
โค้ด JAVA ที่ 2-1 Hello Android App (\src\com.example.hello.android\MainActivity.java)
package com.example.hello.android; 1
import android.os.Bundle; 2
import android.app.Activity;
import android.view.Menu;
import android.widget.Button;
import android.widget.TextView;
import android.view.View;
public class MainActivity extends Activity implements View.OnClickListener { 3

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button cmd = (Button) findViewById(R.id.button1);
4
part
1
cmd.setOnClickListener(this);
}
public void onClick(View v) { 5

TextView tv =(TextView) findViewById(R.id.textView1);
tv.setText("Hello Android");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
11. รันโปรเจ็กต์จะได้ผลลัพธ์ดังนี้
ผลการรัน
ตัวอย่างที่ 2-1 11.1 คลิก 11.2 คลิก
จากรูปที่ 2-10 เมือ่ คลิกปุม่ Button1 ก็จะท�ำให้สว่ นแสดงผลปัจจุบนั แสดงข้อความ “Hello Android”
อธิบายการท�ำงานของโค้ด
1. ส่วนเริ่มต้นแพ็คเกจมีชื่อว่า com.example.hello.android เกิดในขั้นตอนที่ผู้อ่านสร้างโปรเจ็กต์
ขึ้นมาในโปรแกรม Eclipse
2. มีส่วนระบุ library ที่จ�ำเป็นในขั้นต้นให้ครบถ้วน
\src\com.example.hello.android\MainActivity.java
package com.example.hello.android;
import android.os.Bundle;
3. ส่วนก�ำหนดให้มีส่วนแสดงผลแบบหน้าจอเดียว โดยมี Activity เดียวชื่อว่า คลาส MainActivity

และก�ำหนดให้มีการรองรับ (implements) เหตุการณ์คลิกด้วย (View.OnClickListener)
public class MainActivity extends Activity implements View.OnClickListener {
@Override

ใน MainActivity เหตุการณ์ onCreate() จะเกิดขึ้นมาเป็นล�ำดับแรก (เป็นเหตุการณ์ที่เกิดขึ้นก่อน
แสดงผลให้ผู้ใช้เห็น) ซึ่งเราต้องสร้างส่วนแสดงผลใน Android App ให้พร้อมใช้งานในเหตุการณ์นี้
โดยที่โปรแกรม Eclipse จะก�ำหนดให้ใช้ส่วนแสดงผลที่ชื่อว่า activity_main (อยู่ในไฟล์ activity_
main.xml) ผ่านทางเมธอดที่ชื่อว่า setContentView() ร่วมกับคลาส R
คลาส R ถูกสร้างขึ้นมาโดยอัตโนมัติ ท�ำหน้าที่อ้างอิงสิ่งต่างๆ ที่อยู่ในโปรเจ็กต์ ในกรณีนี้เป็นการ
อ้างอิงให้สร้างส่วนแสดงผลจึงระบุว่า R.layout.activity_main
4. ให้สร้างเหตุการณ์ click() ขึ้นมารองรับการกดปุ่ม Button ที่ชื่อว่า button1 โดยที่
·ใช้เมธอดที่ชื่อว่า findViewById() ท�ำหน้าที่ค้นหาออบเจ็กต์ที่ชื่อว่า button1 ผ่านทาง
คลาส R.id ในส่วนแสดงผล และผลการค้นหาที่ได้เก็บไว้ในตัวแปรออบเจ็กต์ Button ที่ชื่อว่า

cmd ก่อน
·จากนั้นสร้างเหตุการณ์ click() ให้กับตัวแปรออบเจ็กต์ cmd ผ่านทางเมธอด setOnClick
Listener() ให้กับส่วนแสดงผล (this)

Button cmd = (Button) findViewById(R.id.button1);
}
5. ที่เหตุการณ์ onClick() สร้างตัวแปรออบเจ็กต์ TextView ที่ชื่อว่า tv ขึ้นมารับค่าจากการค้นหา

ออบเจ็กต์จากส่วนแสดงผลที่ชื่อว่า textView1 และก�ำหนดข้อความผ่านทางเมธอด setText()
public void onClick(View v) {
TextView tv =(TextView) findViewById(R.id.textView1);
tv.setText("Hello Android");
}
พื้นฐานการรับค่าจากผู้ใช้งานด้วย EditText
การท�ำงานขั้นต้นอีกอย่างหนึ่งที่ผู้อ่านควรรู้ก็คือ การรับค่าต่างๆ ที่ผู้ใช้ป้อนเข้ามาใน Android App
เพื่อน�ำข้อมูลดังกล่าวไปใช้ในการท�ำงานระดับถัดไป ซึ่งอยู่ในความรับผิดชอบของ widget ประเภท EditText
ตัวอย่างที่ 2-2 พื้นฐานการรับค่าจากผู้ใช้งานด้วย EditText โดยหน้าที่ของ App นี้ก็คือ รับข้อความ
จากผู้ใช้งานเข้ามาก่อนแล้วแสดงข้อความดังกล่าวออกมา ซึ่งมีขั้นตอนดังนี้

1. เริ่มต้นสร้าง App ที่ชื่อว่า BasicInput ขึ้นมา โดยก�ำหนดให้ใช้ Android เวอร์ชัน 4.0.3 ดังรูปที่
part
1
2-11
เวอร์ชันของ 1.1 กรอกชื่อ
โปรเจ็กต์ปัจจุบัน
1.4 เลือก
1.5 เลือก
1.6 คลิก
2. ที่ช่อง title : ตั้งชื่อว่า Basic Input App ดังรูปที่ 2-12

แสดงการตั้งชื่อ
App ที่ช่อง Title : 2.1 กรอกชื่อ
2.5 คลิก

3. ในไฟล์ strings.xml ให้สร้างข้อความขึ้นมา 3 ชุดโดยที่
·ข้อความที่ชื่อว่า tvFullNameText ให้ก�ำหนดข้อความ “กรุณาป้อนชื่อ-สกุล : ” ใช้กับ
widget ประเภท TextView

·ข้อความทีช ่ อื่ ว่า cmdCheck ให้กำ� หนดข้อความ “ตรวจสอบ” ใช้กบั widget ประเภท Button
·ข้อความที่ชื่อว่า tvResult ให้ก�ำหนดข้อความ “ผลการตรวจสอบ” ใช้กับ widget ประเภท
TextView
ข้อความขึ้นมา
3 ชุด
4. การสร้างส่วนแสดงผลที่มีการใช้งาน widget หลายตัว โดยใช้ประโยชน์จากหน้าต่าง Outline ใน

กรณีนี้ผู้เขียนใช้งาน widget จ�ำนวน 4 ตัวกล่าวคือ
4.1 widget ประเภท TextView1 ก�ำหนดให้ใช้ข้อความที่ชื่อว่า tvFullNameText
4.2 widget ประเภท editFullName
4.3 widget ประเภท cmdCheck ก�ำหนดให้ใช้ข้อความที่ชื่อว่า cmdCheck
4.4 widget ประเภท tvResult ก�ำหนดให้ใช้ข้อความที่ชื่อว่า tvResult
ให้ widget
ประเภทต่างๆ
ในส่วนแสดงผลใช้
ข้อความที่สร้างไว้ 4.1 TextView
EditText 4.2 4.3 Button

4.4 TextView

ส่วนแสดงผลที่ได้แสดงดังสคริปต์ XML ดังต่อไปนี้
part
1
สคริปต์ XML ที่ 2-2 พื้นฐานการรับค่าจากผู้ใช้งานด้วย EditText (\res\layout\activity_main.xml)
<TextView 4.1 TextView

<TextView
android:text="@string/tvFullNameText" />
<EditText 4.2 EditText

android:id="@+id/edtFullName"
android:layout_below="@+id/textView1"
android:ems="10"
android:inputType="textPersonName" />
<Button 4.3 Button

android:id="@+id/cmdCheck"
android:layout_alignTop="@+id/edtFullName"
android:layout_toRightOf="@+id/edtFullName"
android:text="@string/cmdCheck" />
<TextView 4.4 TextView

android:id="@+id/tvResult"
android:layout_below="@+id/cmdCheck"
android:text="@string/tvResult" />
</RelativeLayout>

5. จากนั้นให้ผู้อ่านเขียนโค้ดภาษา JAVA เพื่อก�ำหนดการท�ำงานของ Android App ดังต่อไปนี้
โค้ด JAVA ที่ 2-2 พื้นฐานการรับค่าจากผู้ใช้งานด้วย Basic Input App (\src\com.example.basicinput\Main
Activity.java)
package com.example.basicinput;
import android.widget.EditText;
public class MainActivity extends Activity implements View.OnClickListener{ 1

@Override
Button cmd = (Button) findViewById(R.id.cmdCheck);

}

EditText edt = (EditText) findViewById(R.id.edtFullName);
String str = edt.getText().toString();
TextView tv = (TextView) findViewById(R.id.tvResult); 3
tv.setText(str);
}
@Override
return true;
}
}
6. รันโปรเจ็กต์เพื่อทดสอบการท�ำงานดังนี้
ให้ผู้อ่านคลิกที่ช่องป้อนข้อมูลแล้ว
Android Emulator จะแสดงคีย์บอร์ดขึ้นมา 6.1 ป้อนข้อมูล 6.2 คลิก
ให้ป้อนข้อความตามที่ต้องการ จากนั้นคลิกปุ่ม
ตรวจสอบข้อความที่ป้อนเข้าไปจะปรากฏขึ้นมา
ในส่วนแสดงผลด้านล่าง 6.3 แสดงผล
ตัวอย่างที่ 2-2

part
1
1. เริม่ ต้นใน MainActivity ให้อา้ งอิงเหตุการณ์ click ไว้กอ่ น จากนัน้ ค้นหาปุม่ ทีช่ อื่ ว่า cmdCheck ใน
ส่วนแสดงผล และเก็บไว้ในตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd
\src\com.example.basicinput\MainActivity.java
public class MainActivity extends Activity implements View.OnClickListener{
@Override

}
2. ในเหตุการณ์ click() มีการท�ำงานย่อย 2 ขั้นตอนคือ ให้ค้นหา widget ประเภท EditText ที่ชื่อว่า

edtFullName ในส่วนแสดงผล และเก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชอื่ ว่า edt ก่อน จากนั้น
ให้อ่านข้อความที่ผู้ใช้ป้อนเข้ามาผ่านทางเมธอด getText() เก็บไว้ที่ตัวแปร str ก่อน
EditText edt = (EditText) findViewById(R.id.edtFullName);
3. ท้ายที่สุดให้ค้นหา widget ประเภท TextView ที่ชื่อว่า tvResult ในส่วนแสดงผล และเก็บไว้ที่

ตัวแปรออบเจ็กต์ TextView ที่ชื่อว่า tv ก่อน จากนั้นสั่งให้แสดงข้อความที่เก็บอยู่ในตัวแปร str
ในตัวแปรออบเจ็กต์ tv ผ่านทางเมธอด setText()
TextView tv = (TextView) findViewById(R.id.tvResult);
tv.setText(str);
}

การแสดงแถบข้อความด้วย Toast Notification

ในบางกรณีทเี่ ราต้องการแสดงข้อความแจ้งให้ผใู้ ช้ทราบว่า สถานะปัจจุบนั ของการท�ำงานใน Android
App เป็นอย่างไร สามารถท�ำได้หลายวิธีในหัวข้อนี้ผู้เขียนจะแนะน�ำการแจ้งข้อความขั้นพื้นฐานที่สุดที่เรียกว่า
Toast Notification
ตัวอย่างที่ 2-3 การแสดงแถบข้อความด้วย Toast Notification มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า Toast Notification ดังรูปที่ 2-16
โปรเจ็กต์ Toast 1.1 กรอกชื่อ
Notification App
1.4 เลือก
1.5 เลือก
1.6 คลิก
2. ที่ไฟล์ strings.xml ให้สร้างข้อความที่ชื่อว่า cmdToast โดยก�ำหนดค่าเป็น Show Toast... ดังรูป

ที่ 2-17
cmdToast

3. ออกแบบส่วนแสดงผลดังรูปที่ 2-18
part
1
ส่วนแสดงผลที่ได้
โดยมีสคริปต์ XML ที่ได้จากส่วนแสดงผลข้างต้น แสดงดังต่อไปนี้

สคริปต์ XML ที่ 2-3 การแสดงแถบข้อความด้วย Toast Notification (\res\layout\activity_main.xml)
<TextView
<Button
android:id="@+id/cmdToast"
android:text="@string/cmdToast" />
</RelativeLayout>
4. จากนั้นให้ผู้อ่านเขียนโค้ดภาษา JAVA เพื่อก�ำหนดการท�ำงานของ Android App ดังต่อไปนี้

โค้ด JAVA ที่ 2-3 การแสดงแถบข้อความด้วย Toast Notification (\src\com.example.toast.notification\Main-
Activity.java)
package com.example.toast.notification;
import android.widget.Toast;

@Override
public void onCreate(Bundle savedInstanceState) { 1
Button cmd = (Button) findViewById(R.id.cmdToast);

}
3
Toast.makeText(MainActivity.this,"สวัสดี Android App " ,Toast.LENGTH_LONG).show();
}
@Override
return true;
}
}
ตัวอย่างที่ 2-3 5.1 คลิก
5.2 แสดงผล
จากรูปที่ 2-19 ข้อความแบบ Toast Notification จะปรากฏขึ้นมาเหนือส่วนแสดงผลและจางหาย

ไปโดยอัตโนมัติ
1. เริม่ ต้นให้หาปุม่ ทีช่ อื่ ว่า cmdToast ในส่วนแสดงผลด้วยเมธอด findViewById และผลการค้นหา
ที่ได้เก็บไว้ในตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd จากนั้นให้สร้างเหตุการณ์ Click() ขึ้นมา
\src\com.example.toast.notification\MainActivity.java
Button cmd = (Button) findViewById(R.id.cmdToast);

}

2. มาที่เหตุการณ์ Click() การสร้างข้อความแบบ Toast อาศัยคลาสที่ชื่อว่า Toast ร่วมกับเมธอด
part
1
makeText() ซึ่งท�ำหน้าที่ก�ำหนดข้อความ โดยที่
·พารามิเตอร์ที่ 1 MainActivity.this หมายถึง ส่วนแสดงผลปัจจุบัน
·พารามิเตอร์ที่ 2 หมายถึง ข้อความที่ปรากฏขึ้นมาเหนือส่วนแสดงผลปัจจุบัน
·พารามิเตอร์ที่ 3 Toast.LENGTH_LONG หมายถึง ระยะเวลาปรากฏของข้อความเหนือ
ส่วนแสดงผลปัจจุบัน
3. การสั่งให้แสดงข้อความแบบ Toast Notification ให้ท�ำผ่านทางเมธอด show()
\src\com.example.toast.notification\MainActivity.java
Toast.makeText(MainActivity.this,"สวัสดี Android App " ,Toast.LENGTH_LONG).show();
}
การก�ำหนดสีให้กับ widget ต่างๆ

ส�ำหรับการก�ำหนดคุณสมบัติประเภทสี มีลักษณะคล้ายกับการก�ำหนดคุณสมบัติของกลุ่มข้อความ
นั่นคือ ผู้อ่านควรสร้างสีที่ต้องการใช้งานแยกออกมาเป็นสไตล์ (Style) ต่างหากเพื่อเรียกใช้ในภายหลัง
ตัวอย่างที่ 2-4 การก�ำหนดสีให้กับ widget ต่างๆ มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleColor (ผู้อ่านสามารถศึกษาวิธีการสร้าง
โปรเจ็กต์ได้จากบทที่ 1)
2. ทีโ่ ฟลเดอร์ values (\res\values) มีไฟล์ทชี่ อื่ ว่า styles.xml ท�ำหน้าทีเ่ ก็บสไตล์ทมี่ กี ารใช้ในโปรเจ็กต์
ให้ผู้อ่านคลิกปุ่ม เพื่อเพิ่มสีเข้ามาเก็บไว้ใน styles.xml ดังรูป
3 สี 2.1 คลิก
2.2 เลือก
2.3 คลิก

3 สี
2.4 กำ�หนดชื่อสไตล์
2.5 กำ�หนดสี
จากรูปที่ 2-20 ผู้เขียนก�ำหนดสีที่ต้องการใช้งานขึ้นมา 3 สี

3. ส่วนของการใช้งานให้ก�ำหนดที่คุณสมบัติ Text Color โดยเลือกสีเท่าที่มีอยู่ในโปรเจ็กต์ ดังรูปที่
2-21
แสดงการใช้งานสี
เท่าที่มีอยู่ใน
3.1 เลือก
3.3 เลือก
คลิก 3.2
3.4 คลิก
4. รันโปรเจ็กต์เพื่อทดสอบการท�ำงานได้ผลลัพธ์ดังนี้

part
1
การลงสีแบบไล่โทนสี (Gradient Color)
ในกรณีที่คุณต้องการลงสีแบบไล่โทนสีจากสีหนึ่งไปสู่อีกสีหนึ่งก็สามารถท�ำได้เช่นกัน โดยมี 2 วิธีคือ
1. ก�ำหนดในขณะออกแบบ
2. เขียนโค้ด JAVA สั่งให้ลงสีแบบ Gradient
ก�ำหนดสีแบบไล่โทนสีในขณะออกแบบ
ในหัวข้อนี้ผู้เขียนจะยกตัวอย่างการก�ำหนดสีแบบไล่โทนสีให้กับพื้นหลังของหน้าจอแอพพลิเคชันใน
ขณะออกแบบ ซึ่งผู้อ่านศึกษาได้จากตัวอย่างต่อไปนี้
ตัวอย่างที่ 2-5 การลงสีแบบไล่โทนสี (Gradient Color) มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชนั 4.0.3 ตัง้ ชือ่ ว่า GradientColor (ผูอ้ า่ นสามารถศึกษาวิธกี ารสร้าง
โปรเจ็กต์ได้จากบทที่ 1)
2. ให้คลิกขวาที่โฟลเดอร์ drawable-hdpi เลือกค�ำสั่ง New > Other... เพื่อสร้างไฟล์แบบ Android
XML File ดังรูปที่ 2-23
ไฟล์ที่ชื่อว่า
bggradient.xml
2.2 เลือก
2.3 เลือก
2.4 คลิก

ไฟล์ที่ชื่อว่า 2.5 เลือก
bggradient.xml
2.6 เลือก
2.7 เลือก
2.8 เลือก
2.9 คลิก
จากรูปที่ 2-23 เลือกระบุประเภทของไฟล์เป็นแบบ shape

3. โปรแกรม Eclipse จะสร้างไฟล์ที่ชื่อว่า bggradient.xml ว่างๆ ในโฟลเดอร์ที่ชื่อว่า drawable
จากนั้นให้เขียนสคริปต์ XML เพิ่มเติมดังต่อไปนี้
สคริปต์ XML ที่ 2-5 การลงสีแบบไล่โทนสี (Gradient Color) (\res\drawable\bggradient.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:startColor="#FFFFFF"
android:endColor="#000000"
android:type="linear" >
</gradient>
</shape>
จากสคริปต์ XML ข้างต้นเป็นการก�ำหนดโทนสีที่ต้องการ สามารถอธิบายดังนี้

z อิลิเมนต์ <shape>...</spape> หมายถึง ต้องการสร้างกราฟิกแบบ 2 มิติแบบพื้นที่สี่เหลี่ยม
ขึ้นมาในส่วนแสดงผล (แอตทริบิวต์ android:shape=“rectangle”)

z อิลิเมนต์ <gradient>...</gradient> หมายถึง ต้องการก�ำหนดโทนสีส�ำหรับลงสีแบบไล่โทน
โดยที่
| แอตทริบิวต์ android:angle หมายถึง มุมองศาส�ำหรับไล่โทนสีก�ำหนดค่าเป็น 90 องศา
| แอตทริบิวต์ startColor หมายถึง สีเริ่มต้น โดยก�ำหนดสีแบบแม่สี RGB
| แอตทริบิวต์ endColor หมายถึง สีสิ้นสุด โดยก�ำหนดสีแบบแม่สี RGB
| แอตทริบิวต์ type หมายถึง วิธีการไล่โทนสี โดยก�ำหนดค่าเป็นแบบเส้นตรง (linear)

part
1
แสดงโครงสร้างใน
ไฟล์ bggradient.
xml
4. ในกรณีนตี้ อ้ งการให้สพี นื้ หลังของส่วนแสดงผล Activity (MainActivity) ใช้สี Gradient ทีส่ ร้างขึน้ มา
โดยการก�ำหนดที่คุณสมบัติ Background โดยเลือกสีพื้นหลังจาก bggradient ตามที่เราสร้างไว้
ก่อนหน้านี้
ผลของการลงสี
แบบ Gradient
จากไฟล์
bggradient.xml
4.3 เลือก
คลิก 4.2
เลือก 4.1
4.4 คลิก

ก�ำหนดสีแบบไล่โทนสีด้วยการเขียนโค้ด
ในหัวข้อนีผ้ เู้ ขียนจะยกตัวอย่างการเขียนโค้ดเพือ่ ก�ำหนดให้ลงสีพนื้ หลังแอพพลิเคชันในแบบ Gradient
เพื่อเป็นแนวทางในการศึกษาให้กับผู้อ่าน โดยมีโค้ดดังนี้
โค้ด JAVA ที่ 2-5 การลงสีแบบไล่โทนสี (Gradient Color) (\src\com.example.gradientcolor\MainActiviy.java)
package com.example.gradientcolor;
public class MainActivity extends Activity {
@Override
View v = new View(this);
setContentView(v);
v.setBackgroundResource(R.drawable.bggradient);
}
@Override
return true;
}
}
ถ้าผู้อ่านเลือกใช้วิธีการเขียนโค้ด ผลการท�ำงานที่ได้จะเกิดขึ้นในขณะรันโปรเจ็กต์เท่านั้นซึ่งจะได้
ผลลัพธ์ดังรูปที่ 2-25

part
1
การท�ำงานก็คือ ในเหตุการณ์ onCreate() ให้สร้างตัวแปรออบเจ็กต์ View ที่ชื่อว่า v ขึ้นมาท�ำหน้าที่
แทนส่วนแสดงผลปัจจุบัน (new View(this)) ก่อน
\src\com.example.gradientcolor\MainActiviy.java
@Override
View v = new View(this);
setContentView(v);
v.setBackgroundResource(R.drawable.bggradient);
}
จากนัน้ ใช้ฟงั ก์ชนั setContentView() ก�ำหนดให้สว่ นแสดงผลใช้สว่ นแสดงผลจากตัวแปรออบเจ็กต์ v

และใช้เมธอด setBackgroundResource() อ่านสีพื้นหลังจาก bggradient
การสร้างตัวเลือกแบบเลือกได้มากกว่า 1 รายการด้วย
CheckBox
ในกรณีที่เราต้องการสร้างตัวเลือกในส่วนแสดงผล เพื่อให้ผู้ใช้สามารถเลือกตัวเลือกได้มากกว่า 1
ตัวเลือกในเวลาเดียวกันจะเป็นหน้าที่ของ widget ที่ชื่อว่า CheckBox ซึ่งยกตัวอย่างได้ดังนี้
ตัวอย่างที่ 2-6 การสร้างตัวเลือกแบบเลือกมากกว่า 1 รายการด้วย CheckBox มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleCheckBox
2. ออกแบบส่วนแสดงผล โดยใช้ CheckBox จ�ำนวน 3 ตัวดังรูปที่ 2-27
ส่วนแสดงผลที่ได้ CheckBox 2.1
CheckBox 2.2
CheckBox 2.3 2.4 Button

จากรูปที่ 2-27 จะได้สคริปต์ XML ดังต่อไปนี้
สคริปต์ XML ที่ 2-6 การสร้างตัวเลือกแบบเลือกมากกว่า 1 รายการด้วย CheckBox (\res\layout\activity_main.xml)
<CheckBox
android:id="@+id/chk1"
android:text="@string/chk1" />
<CheckBox
android:layout_below="@+id/chk1"
<CheckBox
<Button
android:layout_alignRight="@+id/chk3"
</RelativeLayout>

3. ให้เขียนโค้ด JAVA เพื่อก�ำหนดการท�ำงานดังต่อไปนี้
part
1
โค้ด JAVA ที่ 2-6 การสร้างตัวเลือกแบบเลือกมากกว่า 1 รายการด้วย CheckBox (\src\com.example.simple-
checkbox\MainActivity.java)
package com.example.simplecheckbox;
import android.widget.CheckBox;
@Override
final CheckBox c1 = (CheckBox) findViewById(R.id.chk1);
cmd.setOnClickListener(new Button.OnClickListener() {
// TODO Auto-generated method stub
String str = "รายการที่ถูกเลือก" + "\n";
if (c1.isChecked()) {
str = str + "-ตัวเลือก 1 ถูกเลือก" + "\n";
}
}
}
Toast.makeText(getApplicationContext(), str, Toast.LENGTH_SHORT).show();
}
});
}
@Override
return true;
}
}

เลือก 4.1
เลือก 4.2
4.3 คลิก
จากรูปที่ 2-28 พบว่า ผู้เขียนคลิกเลือก 2 รายการตามผลการตรวจสอบที่ได้

1. เริ่มต้นในเหตุการณ์ onCreate() ให้ท�ำ
·อ่าน CheckBox ที่ชื่อว่า chk1, chk2 และ chk3 เก็บไว้ที่ตัวแปรออบเจ็กต์ CheckBox
ที่ชื่อว่า c1, c2 และตัวแปร c3 ตามล�ำดับ

อ่าน Button ที่ชื่อว่า cmdCheck เก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd
\src\com.example.simplecheckbox\MainActivity.java
@Override
2. ในเหตุการณ์ Click() ของปุ่ม cmd ท�ำหน้าที่ตรวจสอบว่า ตัวเลือกใดอยู่ในสถานะถูกเลือก โดย

ตรวจสอบได้จากเมธอด isChecked() และการสะสมค่าไว้ที่ตัวแปร str แล้วสั่งให้แสดงผลการ
ตรวจสอบกับ Toast Notification

\src\com.example.simplecheckbox\MainActivity.java
part
1
}
}
}
}
});
}
การสร้างตัวเลือกแบบ 1 ตัวเลือกด้วย RadioButton

ในกรณีที่เราต้องการสร้างตัวเลือกที่ยินยอมให้ผู้ใช้สามารถคลิกเลือกได้เพียง 1 ตัวเลือก จะเป็น
หน้าที่ของ widget ที่ชื่อว่า RadioButton ซึ่งยกตัวอย่างได้ดังนี้
ตัวอย่างที่ 2-7 การสร้างตัวเลือกแบบ 1 ตัวเลือกด้วย RadioButton มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleRadio
2. สร้างส่วนแสดงผลโดยการใช้ RadioButton จ�ำนวน 2 ตัว ดังรูปที่ 2-29
ส่วนแสดงผลที่ได้ RadioButton 2.1
RadioButton 2.2
2.3 Button
จากรูปที่ 2-29 จะได้สคริปต์ XML ดังนี้

สคริปต์ XML ที่ 2-7 การสร้างตัวเลือกแบบ 1 ตัวเลือกด้วย RadioButton (\res\layout\activity_main.xml)
<Button

<RadioButton
android:id="@+id/optMale"
android:checked="true"
android:text="@string/optMale" />
<RadioButton
android:id="@+id/optFemale"
android:layout_below="@+id/optMale"
android:text="@string/optFemale" />
</RelativeLayout>
3. ให้เขียนโค้ด JAVA ก�ำหนดการท�ำงานดังต่อไปนี้

โค้ด JAVA ที่ 2-7 การสร้างตัวเลือกแบบ 1 ตัวเลือกด้วย RadioButton (\src\com.example.simpleradio\Main-
Activity.java)
package com.example.simpleradio;
import android.widget.RadioButton;
@Override
final RadioButton oMale = (RadioButton) findViewById(R.id.optMale);
final RadioButton oFemale = (RadioButton) findViewById(R.id.optFemale);
cmd.setOnClickListener(new Button.OnClickListener() { 2
@Override
public void onClick(View arg0) {
if (oMale.isChecked()) {
str = str + "-ตัวเลือกผู้ชายถูกเลือก" + "\n";
}
if (oFemale.isChecked()) {
str = str + “-ตัวเลือกผู้หญิงถูกเลือก” + “\n”;

}
part
1
}
});
}
@Override
return true;
}
}
ตัวอย่างที่ 2-7 เลือก 4.1
4.2 คลิก
z อ่ า น RadioButton ที่ ชื่ อ ว่ า optMale และ optFemale มาเก็ บ ไว้ ที่ ตั ว แปรออบเจ็ ก ต์
RadioButton ที่ชื่อว่า oMale และ oFemale ตามล�ำดับ

z ·อ่าน Button ที่ชื่อว่า cmdCheck มาเก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd
\src\com.example.simpleradio\MainActivity.java
@Override
final RadioButton oMale = (RadioButton) findViewById(R.id.optMale);
final RadioButton oFemale = (RadioButton) findViewById(R.id.optFemale);

2. ทีป่ มุ่ cmd ในเหตุการณ์ Click() จะตรวจสอบสถานะ RadioButton ว่าถูกเลือกหรือไม่ได้ทเี่ มธอด
isChecked()
\src\com.example.simpleradio\MainActivity.java
@Override
if (oMale.isChecked()) {
str = str + "-ตัวเลือกผู้ชายถูกเลือก" + "\n";
}
if (oFemale.isChecked()) {
str = str + "-ตัวเลือกผู้หญิงถูกเลือก" + "\n";
}
}
});
}
พื้นฐานการตรวจสอบข้อผิดพลาด
การตรวจสอบข้อผิดพลาดในการเขียนโค้ด JAVA มีมากมายหลายแบบ แต่กม็ กี ารตรวจสอบในขัน้ ต้น
อยูอ่ ย่างหนึง่ ทีผ่ อู้ า่ นควรทราบก็คอื การตรวจสอบเพือ่ บังคับให้ผใู้ ช้งานป้อนข้อมูลให้ครบตามทีเ่ ราต้องการนัน่ เอง
ซึ่งยกตัวอย่างได้ดังนี้
ตัวอย่างที่ 2-8 พื้นฐานการตรวจสอบข้อผิดพลาดมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า CheckError
2. ออกแบบส่วนแสดงผล ดังรูปที่ 2-31
2.2 Button
2.1 EditText
จากรูปที่ 2-31 จะได้สคริปต์ XML ดังต่อไปนี้

สคริปต์ XML ที่ 2-8 พื้นฐานการตรวจสอบข้อผิดพลาด (\res\layout\activity_main.xml)
<Button

part
1
android:layout_alignParentRight="true"
android:text="@string/strCheck" />
<EditText
android:id="@+id/edtData"
android:layout_marginRight="14dp"
android:ems="10" >
<requestFocus />
</EditText>
</RelativeLayout>
3. เขียนโค้ด JAVA ก�ำหนดการท�ำงานดังต่อไปนี้

โค้ด JAVA ที่ 2-8 พื้นฐานการตรวจสอบข้อผิดพลาด (\src\com.example.checkerror\MainActivity.java)
package com.example.checkerror;
@Override
final EditText edt = (EditText) findViewById(R.id.edtData);

cmd.setOnClickListener(new View.OnClickListener() { 2
if(edt.getText().length()==0)
{
edt.setError("กรุณาป้อนข้อมูลให้ครบ");
Toast.makeText(MainActivity.this,"กรุณาป้อนข้อมูลให้ครบ",
Toast.LENGTH_SHORT).show();
}else{ 3
Toast.makeText(MainActivity.this,"ข้อมูลที่คุณป้อน : " + edt.getText(),
}
}
});
}
@Override
return true;
}
}

4.1 คลิก
จากรูปที่ 2-32 พบว่าถ้าผู้ใช้ไม่ป้อนข้อความจะมีข้อความแจ้งข้อผิดพลาดปรากฏขึ้นมา โดยที่

ผู้เขียนก�ำหนดให้แจ้งข้อความ error และแบบ Toast Notification
1. เริ่มต้นในเหตุการณ์ onCreate() ที่ส่วนแสดงผลให้ท�ำ
อ่าน EditText ที่ชื่อว่า edtData เก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชื่อว่า edt
·อ่าน Button ที่ชื่อว่า cmdCheck เก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd
\src\com.example.checkerror\MainActivity.java
final EditText edt = (EditText) findViewById(R.id.edtData);

2. ในเหตุการณ์ Click() ของปุ่ม cmd ให้ตรวจสอบว่า ถ้าความยาวของข้อความที่อยู่ใน edt เท่ากับ

0 ตีความได้ว่า ผู้ใช้ยังไม่ได้ป้อนข้อความใดๆ ให้ท�ำ
·แสดงข้อผิดพลาดผ่านทางเมธอด setError()
·แสดงข้อความแจ้งเตือนผู้ใช้แบบ Toast Notification ผ่านทาง Toast
cmd.setOnClickListener(new View.OnClickListener() {
if (edt.getText().length() == 0) {
edt.setError("กรุณาป้อนข้อมูลให้ครบ");
Toast.makeText(MainActivity.this, "กรุณาป้อนข้อมูลให้ครบ",

3. แต่ถ้าผู้ใช้ป้อนข้อความสั่งให้แสดงข้อความที่ผู้ใช้ป้อนผ่านทางคลาส Toast เช่นกัน
part
1
} else {
Toast.makeText(MainActivity.this,
"ข้อมูลที่คุณป้อน : " + edt.getText(),
}
}
});
}
การส่ง SMS ด้วย Android App

ความสามารถพื้นฐานอีกอย่างหนึ่งของอุปกรณ์ที่ติดตั้ง Android ที่มีการใส่ SIM นั่นคือ การส่ง SMS
นั่นเอง
ตัวอย่างที่ 2-9 การส่ง SMS ด้วย Android App มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android 4.0.3 ตั้งชื่อว่า SimpleSMS
2.1 EditText
Button 2.3 2.2 EditText
จากรูปที่ 2-33 ได้สคริปต์ XML ดังต่อไปนี้

สคริปต์ XML ที่ 2-9 การส่ง SMS ด้วย Android App (\res\layout\activity_main.xml)
<TextView
android:text="@string/strNumber" />
<EditText
android:id="@+id/edtNumber"

android:layout_toRightOf="@+id/textView1"
android:ems="10"
android:inputType="phone" >
<requestFocus />
</EditText>
<EditText
android:id="@+id/edtMessage"
android:layout_alignLeft="@+id/edtNumber"
android:layout_below="@+id/edtNumber"
android:ems="10" />
<TextView
android:layout_alignRight="@+id/textView1"
android:layout_alignTop="@+id/edtMessage"
android:text="@string/strMessage" />
<Button
android:id="@+id/cmdSend"
android:layout_alignLeft="@+id/edtMessage"
android:layout_below="@+id/edtMessage"
android:text="@string/cmdSend" />
</RelativeLayout>
3. ก�ำหนดให้โปรเจ็กต์มคี วามสามารถในการส่ง SMS ในไฟล์ทชี่ อื่ ว่า AndroidManifest.xml โดยการ

เพิม่ อิลเิ มนต์ <uses-permission android:name=“android.permission.SEND_SMS” /> ดังรูปที่ 2-34
แสดงการแก้ไขค่า
ในไฟล์
AndroidMani-
fest.xml

part
1
โค้ด JAVA ที่ 2-9 การส่ง SMS ด้วย Android App (\src\com.example.simplesms\MainActivity.java)
package com.example.simplesms;
import android.telephony.SmsManager;
import android.view.View.OnClickListener;
@Override
final EditText edt_Number = (EditText) findViewById(R.id.edtNumber);

final EditText edt_Message = (EditText) findViewById(R.id.edtMessage);
Button cmd = (Button) findViewById(R.id.cmdSend);
cmd.setOnClickListener(new OnClickListener() { 2
String strNumber = edt_Number.getText().toString();
String strMessage = edt_Message.getText().toString();
try { 3
SmsManager sms = SmsManager.getDefault();
sms.sendTextMessage(strNumber, null, strMessage, null, null);
Toast.makeText(getApplicationContext(),
"ส่ง sms เรียบร้อยแล้ว", Toast.LENGTH_SHORT).show();
} catch (Exception e) {
"ไม่สามารถส่ง SMS ได้เนื่องจาก : " + e.getMessage(),
}
}
});
}
@Override
return true;
}
}

5.1 กรอกข้อมูล
5.2 คลิก
การส่ง SMS เราต้องการเพียง 2 อย่างคือ หมายเลขโทรศัพท์ปลายทางและข้อความที่ต้องการส่งไป
อ่าน EditText ที่ชื่อว่า edtNumber มาเก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชื่อว่า
edt_Number ซึ่งท�ำหน้าที่รับเบอร์โทรศัพท์ปลายทาง
·อ่าน EditText ที่ชื่อว่า edtMessage มาเก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชื่อว่า
edt_Message ซึ่งท�ำหน้าที่รับข้อความที่ผู้ใช้ต้องการส่ง
·อ่าน Button ที่ชื่อว่า cmdSend มาเก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd
\src\com.example.simplesms\MainActivity.java
@Override
final EditText edt_Number = (EditText) findViewById(R.id.edtNumber);

final EditText edt_Message = (EditText) findViewById(R.id.edtMessage);
2. ที่ปุ่ม cmd ในเหตุการณ์ Click() ให้อ่านเบอร์โทรและข้อความที่ผู้ใช้ป้อนเข้ามาเก็บไว้ที่ตัวแปร

strNumber และตัวแปร strMessage ตามล�ำดับก่อน
cmd.setOnClickListener(new OnClickListener() {
String strNumber = edt_Number.getText().toString();
String strMessage = edt_Message.getText().toString();

part
3. การส่ง SMS อาศัยคลาส SmsManager และตัง้ ทีช่ อื่ ว่า sms ร่วมกับเมธอด sendTextMessage()
1
โดยที่
พารามิเตอร์ตัวที่ 1 หมายถึง เบอร์โทรศัพท์ปลายทาง ในกรณีนี้เก็บอยู่ที่ตัวแปร strNumber
·พารามิเตอร์ตัวที่ 2 หมายถึง ข้อความที่ต้องการส่ง
try {
SmsManager sms = SmsManager.getDefault();
sms.sendTextMessage(strNumber, null, strMessage, null, null);
"ส่ง sms เรียบร้อยแล้ว", Toast.LENGTH_SHORT).show();
การใช้งาน widget ต่างๆ ที่น�ำเสนอในบทนี้จะถูกน�ำไปใช้ร่วมกับ widget ประเภทอื่นๆ ในเนื้อหา
บทต่อๆ ไป ดังนั้น ผู้อ่านควรศึกษาเนื้อหาให้เข้าใจ

3
การแจ้งเตือนใน Android App
การแจ้งเตือนจัดเป็นองค์ประกอบของการพัฒนา Android App ที่มีความส�ำคัญอีกประการหนึ่ง เพื่อ
ใช้ในกรณีที่ต้องการแจ้งให้ผู้ใช้ App ทราบว่า ณ ช่วงเวลานั้นๆ ก�ำลังเกิดอะไรขึ้น
การแจ้งเตือนใน Android App มีมากมายหลายแบบ การแสดงข้อความแบบ Toast Noification ถือว่า
เป็นการแจ้งเตือนลักษณะหนึ่งเช่นกัน และรูปแบบการแจ้งเตือนที่น�ำเสนอในบทนี้เป็นรูปแบบที่ถูกน�ำไปใช้กัน
โดยทั่วไป
พื้นฐานการแสดงไดอะล็อกบ็อกซ์แบบ Alert
ไดอะล็อกบ็อกซ์แบบ Alert (Alert Dialog) หมายถึง กรอบข้อความที่ปรากฏขึ้นมาในส่วนแสดงผล
เพื่อแจ้งเตือนให้แก่ผู้ใช้รับทราบว่า ณ ช่วงเวลานั้นๆ เกิดอะไรขึ้น หรือต้องการให้ท�ำอะไร โดยผู้อ่านศึกษาการ
ใช้งานได้จากตัวอย่างต่อไปนี้
ตัวอย่างที่ 3-1 พื้นฐานการแสดงไดอะล็อกบ็อกซ์แบบ Alert มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ที่ชื่อว่า Alert Dialog ขึ้นมา ดังรูปที่ 3-1
แสดงการ 1.1 กรอกชื่อ
สร้างโปรเจ็กต์
Android ที่ชื่อว่า 1.2 กรอกชื่อ
Alert Dialog 1.4 เลือก
1.5 เลือก
1.6 คลิก
2. สร้างข้อความที่ชื่อว่า cmdShowAlert ขึ้นมาโดยก�ำหนดค่าเป็น Show Alert... ดังรูปที่ 3-2
cmdShowAlert
2.1 ชื่อ
2.2 ข้อมูล
3 Button
แสดงสคริปต์ XML ที่ได้จากส่วนแสดงผลข้างต้น ดังนี้

สคริปต์ XML ที่ 3-1 พื้นฐานการแสดงไดอะล็อกบ็อกซ์แบบ Alert (\res\layout\activity_main.xml)
<TextView
<Button
android:id="@+id/cmdShowAlert"
android:text="@string/cmdShowAlert" />
</RelativeLayout>

4. เขียนโค้ดเพื่อก�ำหนดการท�ำงานดังต่อไปนี้
part
1
โค้ด JAVA ที่ 3-1 พืน้ ฐานการแสดงไดอะล็อกบ็อกซ์แบบ Alert (\src\com.example.alert.dialog\MainActivity.java)
package com.example.alert.dialog;
import android.app.AlertDialog;
@Override
Button cmd = (Button) findViewById(R.id.cmdShowAlert);

}

AlertDialog aDlg = new AlertDialog.Builder(this).create();
aDlg.setTitle("ทดสอบ"); 2
aDlg.setMessage("ข้อความจาก Alert Dialog");
aDlg.show();
}
@Override
return true;
}
}
5.1 คลิก
บทที่ 3 การแจ้งเตือนใน Android App 69

1. ในเหตุการณ์ Click() ให้สร้างตัวแปรออบเจ็กต์ AlertDialog ที่ชื่อว่า aDlg ขึ้นมาผ่านทางเมธอด
create()
\src\com.example.alert.dialog\MainActivity.java
AlertDialog aDlg = new AlertDialog.Builder(this).create();
2. การสร้างไดอะล็อกบ็อกซ์ในขั้นต้นมีสิ่งที่ควรท�ำดังนี้
·ข้อความแถบไตเติล เพื่อบอกให้ผู้ใช้ทราบว่าเป็นข้อความประเภทอะไร โดยสั่งผ่านทาง
เมธอด setTitle()
·ข้อความที่ต้องการแจ้ง โดยผู้อ่านต้องก�ำหนดข้อความให้ชัดเจนว่า ต้องการแจ้งข้อมูลอะไร
กับผู้ใช้งานซึ่งสั่งผ่านทางเมธอด setMessage()
\src\com.example.alert.dialog\MainActivity.java
aDlg.setTitle("ทดสอบ");
aDlg.setMessage("ข้อความจาก Alert Dialog");
aDlg.show();
}
ท้ายที่สุดสั่งให้แสดง AlertDialog ขึ้นมาด้วยเมธอด show()

การแสดง AlertDialog แบบมีการตรวจสอบปุ่มกด
ในกรณีที่ผู้อ่านต้องการแสดง AlertDialog เพือ่ สร้างทางเลือกให้กบั การท�ำงานใน Android App เช่น
เมื่อกดปุ่ม OK ให้ท�ำอะไร, เมื่อกดปุ่ม No ให้ท�ำอะไร เป็นต้น
สิ่งที่น่าสนใจก็คือ วิธีการตรวจสอบว่า ผู้ใช้กดปุ่มใดนั่นเอง โดยแยกออกเป็น 2 กรณีคือ
z ·กรณีสนใจเพียง 1 ปุ่ม
z ·กรณีสนใจ 2 ปุ่ม
ตัวอย่างที่ 3-2 การแสดง Alert Dialog แบบมีการตรวจสอบปุ่มกด มีขั้นตอนดังนี้

1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า AlertDialogWithButton ขึ้นมา ดังรูปที่ 3-5
แสดงการสร้าง 1.1 กรอกชื่อ
AlertDialog
WithButton App 1.2 กรอกชื่อ
1.4 เลือก
1.5 เลือก
1.6 คลิก

2. สร้างข้อความที่ชื่อว่า cmdShowAlertWithButton ขึ้นมาใน strings.xml โดยก�ำหนดข้อความ
part
1
Show Alert... ดังรูปที่ 3-6
cmdShowAlert
WithButton 2.1 ชื่อ
2.2 ข้อมูล
ออกแบบส่วน
แสดงผล
3 Button
แสดงสคริปต์ XML ที่ได้จากส่วนแสดงผลข้างต้น ดังต่อไปนี้

สคริปต์ XML ที่ 3-2 การแสดง Alert Dialog แบบมีการตรวจสอบปุ่มกด (\src\res\layout\activity_main.xml)
<TextView
<Button
android:id="@+id/cmdShowAlert"
android:text="@string/cmdShowAlertWithButton" />
</RelativeLayout>

โค้ด JAVA ที่ 3-2 การแสดง Alert Dialog แบบมีการตรวจสอบปุ่มกด (\src\com.example.alertdialogwithbut-
ton\MainActivity.java)
package com.example.alertdialogwithbutton;
import android.content.DialogInterface;
@Override
final AlertDialog.Builder aDlg = new AlertDialog.Builder(this);

aDlg.setTitle("ค�ำยืนยัน");
aDlg.setMessage("คุณต้องการบันทึกข้อมูล ใช่หรือไม่?");
aDlg.setNegativeButton("No", null);
aDlg.setPositiveButton("Yes", new AlertDialog.OnClickListener() { 3
public void onClick(DialogInterface dialog, int arg1) { 4
Toast.makeText(MainActivity.this,"คุณคลิกปุ่ม Yes "
,Toast.LENGTH_LONG).show();
}
});
aDlg.show();
}
});
}
@Override
return true;
}
}

5. รันโปรเจ็กต์เพื่อทดสอบการท�ำงานของแอพพลิเคชัน
part
1
กรณีผู้ใช้คลิกปุ่ม No ไม่มีการตอบสนองใดๆ ดังรูปที่ 3-8
กรณีผู้ใช้แตะปุ่ม No
5.1 คลิก
5.2 คลิก
กรณีคลิกปุ่ม Yes จะมีการตรวจสอบ โดยการแสดงข้อความแจ้งให้ผู้ใช้ทราบ ดังรูปที่ 3-9

กรณีผู้ใช้แตะปุ่ม Yes
1 คลิก
2 คลิก
3 แสดงผล
1. เริ่มต้นสร้างตัวแปรออบเจ็กต์ AlertDialog ที่ชื่อว่า aDlg ขึ้นมาก่อน
\src\com.example.alertdialogwithbutton\MainActivity.java

2. ในเหตุการณ์ Click() ของปุ่ม cmd ให้ท�ำ
·ก�ำหนดไตเติลและข้อความ ผ่านทางเมธอด setTitle() และเมธอด setMessage() ตาม
ล�ำดับ
·ก�ำหนดปุ่ม No ผ่านทางเมธอด setNegativeButton() ก�ำหนดให้ไม่ต้องท�ำงานใดๆ ด้วย
ค่า null
3. ส่วนการก�ำหนดปุม่ Yes ให้ทำ� ผ่านเมธอด setPositiveButton() จากนัน้ ให้สร้างเหตุการณ์ Click()

ให้กับปุ่ม Yes ขึ้นมา
aDlg.setPositiveButton("Yes", new AlertDialog.OnClickListener() {
4. ทีเ่ หตุการณ์ Click() ของปุม่ Yes สัง่ ให้แสดงข้อความ “คุณคลิกปุม่ Yes” แบบ Toast Notification
public void onClick(DialogInterface dialog, int arg1) {
Toast.makeText(MainActivity.this,"คุณคลิกปุ่ม Yes "
,Toast.LENGTH_LONG).show();
}
});
aDlg.show();
}
});
}
ในกรณีที่ผู้อ่านต้องการตรวจสอบการกดทั้ง 2 ปุ่มให้แก้ไขโค้ด JAVA ดังต่อไปนี้

package com.example.alertdialogwithbutton;
@Override

part
1
aDlg.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,int which) {
Toast.makeText(getApplicationContext(), "คุณคลิกปุ่ม Yes",
Toast.LENGTH_LONG).show();
}
});
aDlg.setNegativeButton("No", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {
Toast.makeText(getApplicationContext(), "คุณคลิกปุ่ม No",
Toast.LENGTH_LONG).show();
dialog.cancel();
}
});
aDlg.show();
}
});
}
@Override
return true;
}
}
จากโค้ด JAVA ข้างต้นไม่ว่าผู้ใช้จะคลิกปุ่ม Yes หรือ No ก็จะมีการแสดงข้อความแบบ Toast

Notification แจ้งผู้ใช้งานทั้ง 2 ปุ่ม
การรับข้อมูลจากผู้ใช้ด้วย Input Dialog

ในกรณีที่เราต้องการสร้างไดอะล็อกบ็อกซ์เพื่อรับข้อมูลจากผู้ใช้งานก็สามารถท�ำได้เช่นกัน โดยการ
สร้างไดอะล็อกบ็อกซ์รับข้อมูลเรียกว่า Input Dialog ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 3-3 การรับข้อมูลจากผู้ใช้ด้วย Input Dialog มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 และตั้งชื่อว่า Input Dialog
ส่วนแสดงผลใน
Input Dialog App
2 Button

แสดงสคริปต์ XML ที่ได้ดังต่อไปนี้
สคริปต์ XML ที่ 3-3 การรับข้อมูลจากผู้ใช้ด้วย Input Dialog (\res\layout\activity_main.xml)
<TextView
<Button
android:id="@+id/cmdShow"
android:text="@string/cmdShow" />
</RelativeLayout>
โค้ด JAVA ที่ 3-3 การรับข้อมูลจากผู้ใช้ด้วย Input Dialog (\src\com.example.input.dialog\MainActivity.java)
package com.example.input.dialog;
@Override
final EditText edt = new EditText(this);
Button cmd = (Button) findViewById(R.id.cmdShow); 2

aDlg.setTitle("ข้อมูลผู้ใช้");
aDlg.setMessage("กรุณาป้อนชื่อ-นามสกุล :");

aDlg.setView(edt);
part
1
aDlg.setNegativeButton("No", null); 3
Toast.makeText(MainActivity.this,"คุณป้อน : " +
str ,Toast.LENGTH_LONG).show();
}
});
aDlg.show();
}
});
}
@Override
return true;
}
}
4.1 ให้คลิกปุ่ม
4.2 แสดงไดอะล็อกบ็อกซ์ ดังรูปที่ 3-11 4.1 คลิก
ตัวอย่างที่ 3-3 แสดงไดอะล็อกบ็อกซ์ 4.2
4.3 ให้คลิกที่ช่องรับข้อมูลเพื่อป้อนข้อความตามที่ต้องการ
4.4 คลิกปุ่ม Yes เพื่อตรวจสอบว่าผู้ใช้ป้อนข้อมูลใดเข้ามา ดังรูปที่ 3-12
ผลการตรวจสอบ
ข้อความที่ถูก
ป้อนเข้ามา
4.3 ป้อนข้อความ
4.4 คลิก

1. เริม่ ต้นสร้างตัวแปรออบเจ็กต์ AlertDialog ทีช่ อื่ ว่า aDlg ขึน้ มา และสร้างตัวแปรออบเจ็กต์ EditText
ที่ชื่อว่า edt ขึ้นมาท�ำหน้าที่รับข้อมูลจากผู้ใช้งาน
\src\com.example.input.dialog\MainActivity.java
final EditText edt = new EditText(this);
2. ที่ส่วนแสดงผลให้ค้นหาปุ่มที่ชื่อว่า cmdShow เก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd

จากนั้นสร้างเหตุการณ์ Click() ขึ้นมาโดย
·ก�ำหนดข้อความบนแถบไตเติลผ่านทางเมธอด setTitle()
·ก�ำหนดข้อความผ่านทางเมธอด setMessage()
·ก�ำหนดให้ส่วนแสดงผลแสดงผลจากตัวแปรออบเจ็กต์ edt
Button cmd = (Button) findViewById(R.id.cmdShow);
aDlg.setTitle("ข้อมูลผู้ใช้");
aDlg.setMessage("กรุณาป้อนชื่อ-นามสกุล :");
aDlg.setView(edt);
3. ก�ำหนดปุ่มที่จะปรากฏในไดอะล็อกบ็อกซ์ที่สร้างขึ้นมาโดยที่
·ปุ่ม No ก�ำหนดให้ไม่ต้องมีการท�ำงานใดๆ โดยก�ำหนดค่าเป็น null
·ปุ ่ ม Yes ให้สร้างเหตุการณ์ Click() ขึ้นมาก่อน และอ่านข้อความที่ผู้ใช้ป้อนผ่านทาง
คุณสมบัติ getText() เก็บไว้ในตัวแปร str ก่อน จากนั้นสั่งให้แสดงข้อความผ่านที่ได้แบบ

Toast Notification
Toast.makeText(MainActivity.this,"คุณป้อน : " +
str ,Toast.LENGTH_LONG).show();
}
});
aDlg.show();
}
});
}

part
1
การสร้างไดอะล็อกบ็อกซ์ยืนยันก่อนออกจาก Android
App
ฟีเจอร์หนึ่งที่เรามักจะเห็นเสมอในกลุ่ม App ประเภทเกมนั่นคือ เมื่อกดปุ่ม Back ไปจนกระทั่งถึง
ส่วนแสดงผลหลักของเกมดังกล่าว จะมีไดอะล็อกบ็อกซ์ปรากฏขึ้นมาถามค�ำยืนยันว่า ต้องการออกจาก App
ดังกล่าวหรือไม่ ซึ่งเราจะมาดูกันว่าการสร้างไดอะล็อกบ็อกซ์ยืนยันแบบนี้ท�ำอย่างไร
ตัวอย่างที่ 3-4 การสร้างไดอะล็อกบ็อกซ์ยืนยันก่อนออกจาก Android App มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า QuitDialog
2. เขียนโค้ด JAVA เพื่อก�ำหนดการท�ำงานดังต่อไปนี้
โค้ด JAVA ที่ 3-4 การสร้างไดอะล็อกบ็อกซ์ยืนยันก่อนออกจาก Android App (\src\com.example.quitdialog\
MainActivity.java)
package com.example.quitdialog;
import android.content.DialogInterface.OnClickListener;
@Override
}
@Override
public void onBackPressed() {
AlertDialog.Builder qDlg = new AlertDialog.Builder(this);
qDlg.setTitle("คุณต้องการออกจากโปรแกรม ใช่หรือไม่?");
qDlg.setPositiveButton("Cancel", null);
qDlg.setNegativeButton("OK", new OnClickListener() {
public void onClick(DialogInterface arg0, int arg1) {
finish();
}
});
qDlg.show();
}
@Override
return true;
}
}

จากรูปที่ 3-13 เมื่อผู้ใช้คลิกปุ่ม Back จนกระทั่งมาถึงส่วนแสดงผลหลัก (activity_main.xml) ก็จะมี

ไดอะล็อกบ็อกซ์ยืนยันการออกจาก App ปรากฏขึ้นมา
ประเด็นส�ำคัญอยู่ที่การดักจับเหตุการณ์กดปุ่ม Back ส่งผลให้เกิดเหตุการณ์ onBackPressed() ซึ่ง
เราสนใจเฉพาะเมื่อผู้ใช้คลิกปุ่ม OK เท่านั้น ส่งผลให้เกิดเหตุการณ์ Click() ก็จะสั่งให้ออกจาก App ปัจจุบัน
ด้วยฟังก์ชัน finish()
\src\com.example.quitdialog\MainActivity.java
@Override
public void onBackPressed() {
AlertDialog.Builder qDlg = new AlertDialog.Builder(this);
qDlg.setTitle("คุณต้องการออกจากโปรแกรม ใช่หรือไม่?");
qDlg.setPositiveButton("Cancel", null);
qDlg.setNegativeButton("OK", new OnClickListener() {
public void onClick(DialogInterface arg0, int arg1) {
finish();
}
});
qDlg.show();
}
ในทางปฏิบัติยังมีรูปแบบการแจ้งเตือนอีกหลายแบบที่ผู้อ่านสามารถพบเห็นได้ใน App ต่างๆ แต่
อย่างน้อยทีส่ ดุ รูปแบบแจ้งเตือนทีผ่ เู้ ขียนเลือกมาน�ำเสนอในบทนีเ้ พียงพอต่อการน�ำไปใช้งานจริงได้ในระดับหนึง่

4
ส่วนแสดงผลใน Android App
เนื้อหาที่น�ำเสนอในบทนี้ถือได้ว่ามีความส�ำคัญเป็นอย่างมากอีกหัวข้อหนึ่ง เพราะว่าหน้าตา App ของ
เราจะมีหน้าตาเป็นอย่างไรก็ขึ้นอยู่กับการออกแบบส่วนแสดงผล (Layout) ใน App นั่นเอง เราจะมาดูว่า widget
ในกลุ่มของการสร้างส่วนแสดงผลมีอะไรบ้างที่น่าสนใจ
ท�ำความรู้จักกับส่วนแสดงผลแบบ RelativeLayout
ส่วนแสดงผลแบบ RelativeLayout เป็นส่วนแสดงผลเริ่มต้น เมื่อสร้างโปรเจ็กต์ Android ขึ้นมา ซึ่ง
อยู่ในความรับผิดชอบของอิลิเมนต์ <RelativeLayout>...</RelativeLayout>
หลักการของการจัดส่วนแสดงผลแบบนี้ก็คือ เมื่อใช้ widget ใดๆ ก็ตามในส่วนแสดงผลจะอาศัยการ
อ้างอิงต�ำแหน่งระหว่างกัน เพื่อระบุต�ำแหน่งให้กับ widget แต่ละตัวนั่นเอง ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 4-1 ท�ำความรู้จักกับส่วนแสดงผลแบบ RelativeLayout
1. ผู้เขียนลองใช้ widget ประเภท Button จ�ำนวน 3 ปุ่มในส่วนแสดงผล ดังรูปที่ 4-1
ขณะใช้ widget
ประเภท Button
ในส่วนแสดงผล
จากรูปที่ 4-1 เมือ่ เลือ่ น/ย้ายต�ำแหน่ง widget พบว่า จะมีสว่ นช่วยเหลือปรากฏขึน้ มาเพือ่ ระบุวา่ widget
ที่ก�ำลังสนใจอยู่อ้างอิงต�ำแหน่งกับ widget ใดในส่วนแสดงผลปัจจุบัน
2. ผลของการออกแบบส่วนแสดงผลหลักที่ได้จะถูกสร้างเป็นไฟล์ XML โดยอัตโนมัติ ที่ชื่อว่า
activity_main.xml และถูกเก็บอยู่ในโฟลเดอร์ \res\layout ดังรูปที่ 4-2
แสดงสคริปต์
activity_main.
xml ที่ได้
การเปลี่ยนประเภท Layout
ในกรณีที่เราต้องการเปลี่ยน Layout ของส่วนแสดงผลให้เป็น Layout ประเภทอื่นๆ ก็สามารถท�ำได้
เช่นกัน ซึ่งมีขั้นตอนดังนี้
1. ที่ส่วนแสดงผลให้คลิกขวาเลือกค�ำสั่ง Change Layout... ดังรูปที่ 4-3
แสดงการเลือก 1.1 คลิกขวา
ค�ำสั่ง Change
Layout...
1.2 เลือก

2. จะมีไดอะล็อกบ็อกซ์ Change Layout ปรากฏขึ้นมา
part
1
3. ให้เลือก Layout ได้ที่ช่อง New Layout Type: ดังรูปที่ 4-4
Layout ประเภท 3 เลือก
ต่างๆ ที่ Android
รองรับ
จากรูปที่ 4-4 Layout ทีป่ รากฏขึน้ มาเป็น Layout ที่ Android รองรับ โดยผูเ้ ขียนจะน�ำเสนอเป็นเนือ้ หา
ในล�ำดับต่อๆ ไป
ท�ำความรู้จักกับส่วนแสดงผลแบบ LinearLayout
ส่วนแสดงผลแบบ LinearLayout หมายถึง ส่วนแสดงผลในแนวเส้นตรง โดยอยู่ในความรับผิดชอบ
ของอิลิเมนต์ <LinearLayout>...</LinearLayout> ซึ่งมี 2 แบบคือ
z ·แนวตั้ง อยู่ในความรับผิดชอบของแอตทริบิวต์ android:orientation=“vertical”
z ·แนวนอน อยู่ในความรับผิดชอบของแอตทริบิวต์ android:orientation=“horizontal”
ตัวอย่างที่ 4-2 ท�ำความรู้จักกับส่วนแสดงผลแบบ LinearLayout

1. ผู้เขียนใช้ widget ประเภท Button จ�ำนวน 3 ปุ่มก�ำหนดให้ใช้ส่วนแสดงผล LinearLayout แบบ
แนวตั้ง (veritcal) ดังรูปที่ 4-5
รูปที่ 4-5 ส่วน
แสดงผล Linear
Layout แบบ
แนวตั้ง
บทที่ 4 ส่วนแสดงผลใน Android App 83

แสดงสคริปต์ XML ที่ได้ดังต่อไปนี้
สคริปต์ XML ที่ 4-2 ท�ำความรู้จักกับส่วนแสดงผลแบบ LinearLayout (แนวตั้ง) (\res\layout\activity_main.xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout1"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
<Button
android:text="Button" />
<Button
<Button
</LinearLayout>
2. ในกรณีทตี่ อ้ งการก�ำหนดให้สว่ นแสดงผลเป็นแบบแนวนอน ให้แก้ไขทีแ่ อตทริบวิ ต์ android:orien

tation=“horizontal” ดังสคริปต์ XML ต่อไปนี้
สคริปต์ XML ที่ 4-2 ท�ำความรูจ้ กั กับส่วนแสดงผลแบบ LinearLayout (แนวนอน) (\res\layout\activity_main.xml)
android:orientation="horizontal" >
<TextView
<Button

<Button
part
1
<Button
</LinearLayout>
3. ได้ผลลัพธ์ดังนี้
LinearLayout
แบบแนวนอน
ท�ำความรู้จักกับส่วนแสดงผลแบบ TableLayout
ส่วนแสดงผลแบบ TableLayout หมายถึง การมองส่วนแสดงผลแบบเป็นแถว (Row) หรือคอลัมน์
(Column) อยู่ในความรับผิดชอบของอิลิเมนต์ <TableLayout>...</TableLayout>
ตัวอย่างที่ 4-3 ท�ำความรู้จักกับส่วนแสดงผลแบบ TableLayout ซึ่งมีรายละเอียดดังนี้
ผู้เขียนใช้ widget ประเภท TextView จ�ำนวน 5 ตัววาดลงในส่วนแสดงผล ดังรูปที่ 4-7
ส่วนแสดงผลแบบ
TableLayout

จากรูปที่ 4-7 ผลของอิลเิ มนต์ <TableLayout>...</TableLayout> ท�ำให้ TextView ทัง้ 5 ตัวถูกจัดเรียง
ให้เป็น 5 แถว ซึ่งแสดงสคริปต์ XML ที่ได้ดังต่อไปนี้
สคริปต์ XML ที่ 4-3 ท�ำความรู้จักกับส่วนแสดงผลแบบ TableLayout (\res\layout\activity_main.xml)
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/TableLayout1"
<TextView
<TextView
android:text="@string/Row1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
<TextView
<TextView
<TextView
</TableLayout>
จากสคริปต์ XML ข้างต้นพบว่า อะไรก็ตามที่อยู่ระหว่างอิลิเมนต์ <TableLayout>...</TableLayout>

ถูกก�ำหนดให้เรียงเป็นแถวดังเช่น TextView ทั้ง 5 ตัวข้างต้น

ในกรณีที่ต้องการจัดส่วนแสดงตามแนวคอลัมน์อยู่ในความรับผิดชอบของอิลิเมนต์ <TableRow>...
part
1
</TableRow>
ตัวอย่างที่ 4-4 การจัดส่วนแสดงผลตามแนวคอลัมน์มีรายละเอียดดังนี้
ส่วนแสดงผลตาม
แนวคอลัมน์
ส่วนแสดงผลข้างต้นแสดงสคริปต์ XML ได้ดังต่อไปนี้

สคริปต์ XML ที่ 4-4 การจัดส่วนแสดงผลตามแนวคอลัมน์ (\res\layout\activity_main.xml)
<TextView
<TableRow>
<Button
<Button
<Button
<Button
</TableRow>
</TableLayout>
จากสคริปต์ XML ข้างต้นพบว่า ปุ่ม Button ทั้ง 4 ปุ่มข้างต้นอยู่ระหว่างอิลิเมนต์ <TableRow>...

</TableRow> ส่งผลให้ถูกจัดต�ำแหน่งตามแนวคอลัมน์
การสร้างส่วนแสดงผลแบบแนวนอน
โดยปกติแล้วส่วนแสดงผลทีป่ รากฏใน Android App ของเราถูกก�ำหนดให้แสดงผลตามแนวตัง้ ในบาง
กรณีเราต้องการก�ำหนดให้ Android App ของเราแสดงผลตามแนวนอนก็สามารถท�ำได้เช่นกัน โดยมี 2 วิธี ดังนี้
1. ก�ำหนดในขณะออกแบบ
2. เขียนโค้ด JAVA ควบคุม
ตัวอย่างที่ 4-5 การสร้างส่วนแสดงผลแบบแนวนอนมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า FixOrientation
2. ในกรณีที่ต้องการเขียนโค้ด JAVA ควบคุมแสดงได้ดังต่อไปนี้
โค้ด JAVA ที่ 4-5 การสร้างส่วนแสดงผลแบบแนวนอน (\src\MainActivity.java)
package com.example.fixorientation;
import android.content.pm.ActivityInfo;
@Override
int CurrentOrientation = getRequestedOrientation();
if ( CurrentOrientation != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE ) { 2
setRequestedOrientation( ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE );
}
}
@Override
return true;
}
}
จากรูปที่ 4-9 พบว่า ค�ำว่า “Hello world!” ถูกก�ำหนดให้แสดงตามแนวนอนตามที่เราต้องการ

part
1
การก�ำหนดให้สว่ นแสดงผลแสดงแบบแนวนอนตัง้ แต่เริม่ แรกให้ทำ� ในเหตุการณ์ onCreate() เป็นช่วง
ที่เกิดก่อนที่ Android App ปรากฏในส่วนแสดงผลกล่าวคือ
1. ให้อ่านรูปแบบส่วนแสดงผลผ่านทางฟังก์ชันที่ชื่อว่า getRequestedOrientation() เก็บไว้ที่
ตัวแปร CurrentOrientation
\src\MainActivity.java
int CurrentOrientation = getRequestedOrientation();
2. ตรวจสอบว่าถ้าส่วนแสดงผลปัจจุบนั (CurrentOrientation) ไม่ใช่แนวนอน (ActivityInfo.SCREEN_

ORIENTATION_LANDSCAPE) สัง่ ให้สว่ นแสดงผล แสดงแบบแนวนอนผ่านทางฟังก์ชนั setRe
questedOrientation() โดยก�ำหนดค่าเป็น ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
\src\MainActivity.java
if ( CurrentOrientation != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE ) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
}
ในกรณีที่ต้องการก�ำหนดตายตัวในขณะออกแบบเลยว่า ต้องการให้ Android App ใช้ส่วนแสดงผล

แบบแนวนอนเท่านั้นมีขั้นตอนดังนี้
1. ที่ไฟล์ AndroidManifest.xml ซึ่งท�ำหน้าที่ก�ำหนดค่าต่างๆ ให้กับโปรเจ็กต์ Android ให้คลิกแท็บ
AndroidManifest.xml ดังรูปที่ 4-10
แสดงรายละเอียดของ

2. เพิ่มแอตทริบิวต์ android:screenOrientation โดยก�ำหนดค่าเป็น Landscape ให้กับอิลิเมนต์
<activity>...</activity> เพื่อก�ำหนดให้ activity แสดงผลตามแนวนอน
\AndroidManifest.xml
<activity
android:name=".MainActivity"
android:screenOrientation="landscape"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
การควบคุมรูปแบบส่วนแสดงผล
ในกรณีที่ต้องการให้ Android App มีความยืดหยุ่นมากพอ โดยการเปิดโอกาสให้ผู้ใช้งานสามารถ
ควบคุมรูปแบบส่วนแสดงผลได้ด้วยก็สามารถท�ำได้เช่นกัน โดยที่การควบคุมที่ผู้เขียนกล่าวถึงในโปรเจ็กต์นี้
ไม่เกี่ยวข้องกับระบบเซนเซอร์บนอุปกรณ์แท็บเล็ตหรือสมาร์ทโฟนแต่อย่างใด ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 4-6 การควบคุมรูปแบบส่วนแสดงผลมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า ControlOrientation
ส่วนแสดงผลของ
ControlOrien-
taion App

part
จากรูปที่ 4-11 ผูเ้ ขียนเลือกใช้สว่ นแสดงผลแบบ TableLayout ซึง่ แสดงสคริปต์ XML ทีไ่ ด้ดงั ต่อไปนี้
1
สคริปต์ XML ที่ 4-6 การควบคุมส่วนแสดงผล (\res\layout\activity_main.xml)
<TextView
<EditText
android:id="@+id/edtInput"
android:ems="10"
android:hint="@string/edtInput" >
<requestFocus />
</EditText>
<Button
android:id="@+id/cmdLandscape"
android:layout_marginBottom="53dp"
android:text="@string/cmdLandscape" />
<Button
android:id="@+id/cmdPortrait"
android:text="@string/cmdPortrait" />
</TableLayout>
3. เขียนโค้ดก�ำหนดการท�ำงานดังต่อไปนี้
โค้ด JAVA ที่ 4-6 การควบคุมรูปแบบส่วนแสดงผล (\src\com.example.controlorientation\MainActivity.java)
package com.example.controlorientation;
import android.content.pm.ActivityInfo;
@Override

Button cmdPort = (Button) findViewById(R.id.cmdPortrait);

Button cmdLand = (Button) findViewById(R.id.cmdLandscape);
cmdPort.setOnClickListener(new Button.OnClickListener() { 2
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
});
cmdLand.setOnClickListener(new Button.OnClickListener() { 3
}
});
}
@Override
return true;
}
}
จากรูปที่ 4-12 โดยปกติแล้ว ส่วนแสดงผลจะถูกก�ำหนดให้แสดงแบบแนวตั้ง ผู้อ่านสามารถคลิกปุ่ม

เพื่อก�ำหนดให้ส่วนแสดงผลเป็นแบบแนวนอนได้ดังรูปที่ 4-13

part
1
กรณีก�ำหนดให้
ปัจจุบันเป็นแบบ
แนวนอน
1. เริ่มต้นในเหตุการณ์ onCreate()
ปุม ่ แนวตัง้ ให้หาปุม่ ทีช่ อื่ ว่า cmdPortrait เก็บไว้ทตี่ วั แปรออบเจ็กต์ Button ทีช่ อื่ ว่า cmdPort
ปุ่มแนวนอน ให้หาปุ่มที่ชื่อว่า cmdLandscape เก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า
cmdLand
\src\com.example.controlorientation\MainActivity.java
Button cmdPort = (Button) findViewById(R.id.cmdPortrait);

Button cmdLand = (Button) findViewById(R.id.cmdLandscape);
2. ในเหตุการณ์ Click() ของปุ่ม cmdPort ก�ำหนดให้ส่วนแสดงผลเป็นแบบแนวตั้งผ่านทางฟังก์ชัน

setRequestedOrientation() โดยก�ำหนดค่าเป็น ActivityInfo.SCREEN_ORIENTATION_POR-
TRAIT
cmdPort.setOnClickListener(new Button.OnClickListener() {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
});
3. ในเหตุการณ์ Click() ของปุม่ cmdLand ก�ำหนดให้สว่ นแสดงผลเป็นแบบแนวนอนผ่านทางฟังก์ชนั

setRequestedOrientation() โดยก�ำหนดค่าเป็น ActivityInfo.SCREEN_ORIENTATION_LAND-
SCAPE
cmdLand.setOnClickListener(new Button.OnClickListener() {
}
});
}

การสร้างส่วนแสดงผลแบบเลื่อนขึ้น-ลงด้วย Sliding-
Drawer
ในกรณีทตี่ อ้ งการให้สว่ นแสดงผลของเราสามารถเลือ่ นขึน้ หรือเลือ่ นลงได้โดยมีปมุ่ Button ท�ำหน้าที่
ควบคุมจะเป็นหน้าที่ของ widget ที่ชื่อว่า SlidingDrawer
ตัวอย่างที่ 4-7 การสร้างส่วนแสดงผลแบบเลื่อนขึ้น-ลงด้วย SlidingDrawer มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleSlidingDrawer
TextView 2 ตัว
จากรูปที่ 4-14 ผู้เขียนใช้ TextView จ�ำนวน 2 ตัวเพื่อให้เห็นลักษณะการเลื่อนขึ้น-ลง ซึ่งได้สคริปต์

XML ดังต่อไปนี้
สคริปต์ XML ที่ 4-7 การสร้างส่วนแสดงผลแบบเลือ่ นขึน้ -ลงด้วย SlidingDrawer (\res\layout\activity_main.xml)
<SlidingDrawer
android:id="@+id/slidingDrawer1"
android:content="@+id/content" 1
android:handle="@+id/handle" >
<Button
android:id="@+id/handle"

android:text="Handle" />
part
1
<LinearLayout
android:id="@+id/content"
android:layout_height="458dp"
<TextView
android:text="Large Text"
<TextView
android:text="Large Text"
</LinearLayout>
</SlidingDrawer>
</RelativeLayout>

โค้ด JAVA ที่ 4-7 การสร้างส่วนแสดงผลแบบเลื่อนขึ้น-ลงด้วย SlidingDrawer (\src\com.example.sim-
pleslidingdrawer\MainActivity.java)
package com.example.simpleslidingdrawer;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
@Override
final Button cmd = (Button) findViewById(R.id.handle);

cmd.setText(R.string.cmdUp);
SlidingDrawer sld = (SlidingDrawer) findViewById(R.id.slidingDrawer1); 2

sld.setOnDrawerOpenListener(new OnDrawerOpenListener() {
public void onDrawerOpened() {
cmd.setText(R.string.cmdDown);
}
});

sld.setOnDrawerCloseListener(new OnDrawerCloseListener() {
public void onDrawerClosed() {
}
});
}
@Override
return true;
}
}
4. รันโปรเจ็กต์ได้ผลลัพธ์ดังนี้
1. หลักการท�ำงานของส่วนแสดงผลแบบนี้มีอยู่ 2 ส่วน เริ่มต้นที่ส่วนแสดงผลของอิลิเมนต์
<SlidingDrawer>...</SlidingDrawer> ให้ต้องก�ำหนดค่า ดังนี้
แอตทริบิวต์ android:content ท�ำหน้าที่ระบุว่าให้อิลิเมนต์ใดท�ำหน้าที่แสดงเนื้อหา ในกรณี
นี้คือ อิลิเมนต์ที่ชื่อว่า content ซึ่งหมายถึง อิลิเมนต์ <LinearLayout>...</Linearlayout>

ตัวล่างนั่นเอง
แอตทริบิวต์ android:handle ท�ำหน้าที่ระบุว่าให้อิลิเมนต์ใดท�ำหน้าที่ควบคุมเลื่อนขึ้น-ลง
ในกรณีนี้คือ อิลิเมนต์ที่ชื่อว่า handle ซึ่งหมายถึง อิลิเมนต์ <Button>...</Button> ตัวล่าง

เช่นกัน

\res\layout\activity_main.xml
part
1
<SlidingDrawer
android:id="@+id/slidingDrawer1"
android:content="@+id/content"
android:handle="@+id/handle" >
<Button
android:id="@+id/handle"
android:text="Handle" />
<LinearLayout
android:id="@+id/content"
<TextView
/>
<TextView
/>
</LinearLayout>
</SlidingDrawer>
</RelativeLayout>
2. ส่วนต่อมาอยู่ที่โค้ด JAVA การควบคุมส่วนแสดงผลให้เลื่อนขึ้น-ลงอยู่ในเหตุการณ์ onDrawer-

Opened() และเหตุการณ์ onDrawerClosed() ตามล�ำดับ
\src\com.example.simpleslidingdrawer\MainActivity.java
SlidingDrawer sld = (SlidingDrawer) findViewById(R.id.slidingDrawer1);
sld.setOnDrawerOpenListener(new OnDrawerOpenListener() {
public void onDrawerOpened() {
cmd.setText(R.string.cmdDown);
}
});
sld.setOnDrawerCloseListener(new OnDrawerCloseListener() {
public void onDrawerClosed() {
}
});

การใช้งานกลุ่ม widget ที่ท�ำหน้าที่จัด Layout ในทางปฏิบัติ ผู้อ่านสามารถน�ำมาผสมผสานกันเพื่อ
ให้ได้ส่วนแสดงผลที่มีรูปแบบเฉพาะได้หลากหลาย ขอให้ผู้อ่านยึดถือรูปแบบพื้นฐานของ widget แต่ละตัวว่า
มีเอกลักษณ์การแสดงผลอย่างไรเป็นหลัก

5
การสร้างส่วนแสดงผลแบบรายการด้วย
ListActivity
ถ้าหากจะพูดถึงรูปแบบส่วนแสดงผลที่ได้รับความนิยมเป็นล�ำดับต้นๆ ในการพัฒนา Android App
การออกแบบส่วนแสดงผลแบบรายการ (List) เพื่อให้ผู้ใช้คลิกเลือกถือเป็นส่วนแสดงผลที่ถูกน�ำมาใช้มากที่สุด
ไม่ว่าจะเป็นส่วนแสดงผลหลักของ App หรือเป็นส่วนแสดงผลส่วนหนึ่งใน App ก็ตาม
การสร้างส่วนแสดงผลแบบรายการใน Android App มี 2 วิธีคือ
z อาศัยคลาสที่ชื่อว่า ListActivity เข้ามาก�ำหนดให้ Activity แสดงแบบรายการด้วยตัวเอง
z อาศัย widget ที่ชื่อว่า ListView เข้ามาท�ำหน้าที่สร้างส่วนแสดงผลใน Layout
รายละเอียดของทั้ง 2 วิธีมีพอสมควร ผู้เขียนจึงได้แยกเนื้อหาออกเป็น 2 บท โดยในบทนี้จะเป็นการ

สร้างส่วนแสดงผลแบบรายการด้วยคลาส ListActiviy เสียก่อน
พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วยคลาส
ListActivity
การสร้างส่วนแสดงผลแบบรายการนอกเหนือไปจากการใช้งาน ListView แล้ว ยังมีอีก 1 วิธีนั่นคือ
การก�ำหนดให้ Activity ท�ำหน้าที่สร้างส่วนแสดงผลแบบรายการด้วยตัวเองโดยอาศัยคลาสที่ชื่อว่า ListActivity
ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 5-1 พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วยคลาส ListActivity มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า UsingListActivity
โค้ด JAVA ที่ 5-1 พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วยคลาส ListActivity (\src\com.example.
usinglistactivity\MainActivity.java)
package com.example.usinglistactivity;
import android.app.ListActivity; 2
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends ListActivity { 1

@Override
String[] arrStr = new String[] { "เมนู 1", "เมนู 2", "เมนู 3",
"เมนู 4", "เมนู 5" };
ArrayAdapter<String> arrAdt = new ArrayAdapter<String>(this, 4
android.R.layout.simple_list_item_1, arrStr);
setListAdapter(arrAdt);
}
protected void onListItemClick(ListView l, View v, int position, long id) { 5

String str = (String) getListAdapter().getItem(position);
Toast.makeText(this, "รายการ : " + str + "ถูกเลือก",
}
@Override
return true;
}
}
3.1 เลือก
3.2 คลิก

จากรูปที่ 5-1 สิ่งที่เราสนใจมี 2 เรื่องคือ
part
1
1. วิธีการสร้างแต่ละรายการพบว่า ผู้เขียนสร้างรายการขึ้นมา 5 รายการ
2. วิธกี ารตรวจสอบว่า ผูใ้ ช้คลิกเลือกรายการใดก�ำหนดให้แสดงด้วยข้อความแบบ Toast Notification
1. การก�ำหนดให้ Activity แสดงผลแบบรายการ โดยการก�ำหนดให้คลาส Activity ปัจจุบัน
(MainActivity) สืบทอดมาจากคลาสที่ชื่อว่า ListActivity
\src\com.example.usinglistactivity\MainActivity.java
public class MainActivity extends ListActivity {
2. หลังจากที่แก้ไขคลาสต้นแบบให้กับคลาส MainActivity แล้วให้อ้างอิง library ต่อไปนี้

import android.app.ListActivity;
3. ในเหตุการณ์ onCreate() ให้สร้างตัวแปรอาร์เรย์ที่ชื่อว่า arrStr ขึ้นมาท�ำหน้าที่เป็นรายการต่างๆ

ปรากฏขึ้นมาในส่วนแสดงผลเพื่อให้ผู้ใช้เลือก ในกรณีนี้ผู้เขียนต้องการสร้าง 5 รายการ
@Override
String[] arrStr = new String[] { "เมนู 1", "เมนู 2", "เมนู 3",
"เมนู 4", "เมนู 5" };
4. การก�ำหนดให้ข้อความที่อยู่ในตัวแปรอาร์เรย์ arrStr ไปปรากฏในส่วนแสดงผลต้องอาศัยคลาส

ArrayAdapter ซึ่งตั้งชื่อว่า arrAdt โดยที่
พารามิเตอร์ this หมายถึง ส่วนแสดงผลของ Activity
พารามิเตอร์ android.R.layout.simple_list_item_1 หมายถึง ให้แสดงรายการละ 1 บรรทัด
พารามิเตอร์ arrStr หมายถึง ข้อความที่ต้องการใช้งาน
จากนั้นใช้ฟังก์ชันที่ชื่อว่า setListAdapter() ท�ำหน้าที่ก�ำหนดให้ส่วนแสดงผล (MainActivity) และ

แสดงผลด้วยตัวแปรออบเจ็กต์ ArrayAdapter ที่ชื่อว่า arrAdt
ArrayAdapter<String> arrAdt = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, arrStr);
}
บทที่ 5 การสร้างส่วนแสดงผลแบบรายการด้วย ListActivity 101

5. วิธีการตรวจสอบรายการที่ถูกคลิกเลือกอยู่ในเหตุการณ์ onListItemClick() โดย
·อ่านรายการที่ถูกคลิกเลือก ได้จากฟังก์ชัน getListAdapter() ร่วมกับเมธอด getItem()
ล�ำดับรายการที่ถูกคลิกเลือก อ่านค่าได้จากพารามิเตอร์ position เก็บไว้ที่ตัวแปร str ก่อน

·แสดงรายการที่ถูกคลิกเลือก ด้วยข้อความแบบ Toast Notification
protected void onListItemClick(ListView l, View v, int position, long id) {
Toast.makeText(this, "รายการ : " + str + " ถูกเลือก",
}
การสร้ า งรายการใน ListActivity จากอาร์เ รย์ของ

ข้อความ
การแสดงรายการต่างๆ ใน ListActivity อีกวิธีหนึ่งที่น่าสนใจก็คือ สามารถแยกข้อความของแต่ละ
รายการให้อยู่ในรูปแบบอาร์เรย์ของข้อความ (มีโครงสร้างเป็นแบบ XML) และถือว่าข้อความที่แยกออกมา
เป็นทรัพยากรประเภทหนึ่งในโปรเจ็กต์ปัจจุบัน
ตัวอย่างที่ 5-2 การสร้างรายการใน ListActivity จากอาร์เรย์ของข้อความมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า ListViewWithXML
2. ทีโ่ ฟลเดอร์ values (\res\values) คลิกขวาเลือกค�ำสัง่ New > Other... > Android > Android XML
File และตั้งชื่อว่า myxml.xml ท�ำหน้าที่เก็บอาร์เรย์ของข้อความ ดังรูปที่ 5-2
แสดงการเพิ่มไฟล์
myxml.xml ใน
โฟลเดอร์ values
2.2 เลือก

part
1
myxml.xml ใน
โฟลเดอร์ values
2.3 เลือก
2.4 คลิก
2.5 เลือก
2.9 แสดงไฟล์
2.8 คลิก
ข้อความต่างๆ ที่เก็บไว้ในไฟล์ myxml.xml จะถูกน�ำไปแสดงเป็นรายการในส่วนแสดงผลเพื่อให้

ผู้ใช้คลิกเลือก

3. การเพิ่มข้อความในไฟล์ myxml.xml โดยการคลิกปุ่ม เพื่อเพิ่มอาร์เรย์ของข้อความ
(String Array) ให้ตั้งชื่อว่า MainList
อาร์เรย์ของข้อความ 3.1 คลิก
ที่ชื่อว่า MainList
3.2 เลือก
3.3 คลิก
4. เราจะสร้างรายการต่างๆ เก็บไว้ใน MainList โดยการคลิกปุ่ม อีกครั้ง เพื่อเริ่มรายการ

Item เข้ามาใน MainList ก�ำหนดข้อความแรกเป็น “รายการที่ 1”
แสดงการเพิ่ม
รายการแรก
เลือก 4.2
4.3 เลือก
4.1 คลิก
4.5 กำ�หนดค่า
4.4 คลิก

part
5. ในกรณีนผี้ เู้ ขียนต้องการสร้าง 5 รายการ จึงเพิม่ Item 5 ครัง้ โดยผูอ้ า่ นสามารถคลิกแท็บ myxml.xml
1
ด้านล่างเพื่อดูโครงสร้างการจัดเก็บอาร์เรย์ของข้อความที่เราสร้างขึ้นมาได้อีกด้วย
การจัดเก็บอาร์เรย์
ของข้อความในไฟล์
myxml.xml
ณ จุดนี้ส่วนของข้อความพร้อมแล้ว ขั้นตอนต่อไปเป็นการน�ำรายการที่เราสร้างขึ้นมาไปแสดงใน
6. ที่ส่วนแสดงผลให้ใช้ TextView 1 ตัวตั้งชื่อว่า tvMain ดังรูปที่ 5-6
จากรูปที่ 5-6 แสดงสคริปต์ XML ได้ดังต่อไปนี้

สคริปต์ XML ที่ 5-2 การสร้างรายการใน ListActivity จากอาร์เรย์ของข้อความ (\res\layout\activity_main.xml)
<TextView
android:id="@+id/tvMain"
android:text="TextView" />
</RelativeLayout>

โค้ด JAVA ที่ 5-2 การสร้างรายการใน ListActivity จากอาร์เรย์ของข้อความ (\src\com.example.listviewwith-
xml\MainActivity.java)
package com.example.listviewwithxml;

@Override
String[] arr = getResources().getStringArray(R.array.MainList);

R.layout.activity_main, R.id.tvMain, arr);
this.setListAdapter(arrAdt);
}

String str = getListAdapter().getItem(position).toString();
Toast.makeText(this,"รายการ : " + str + " ถูกเลือก", Toast.LENGTH_SHORT).show();
}
@Override
return true;
}
}
8.1 เลือก
จากรูปที่ 5-7 พบว่า รายการที่ปรากฏ

ขึ้นมาในส่วนแสดงผลมาจากอาร์เรย์ของข้อความ
ที่เราสร้างไว้ในไฟล์ myxml.xml นั่นเอง

part
1
1. เริ่มต้นการอ่านอาร์เรย์ของข้อความที่เก็บอยู่ในไฟล์ myxml.xml อาศัยคลาส getResources()
ร่วมกับเมธอด getStringArray() โดยก�ำหนดให้อ่านอาร์เรย์ที่ชื่อว่า MainList เก็บไว้ในตัวแปร
อาร์เรย์ที่ชื่อว่า arr ก่อน
\src\com.example.listviewwithxml\MainActivity.java
@Override
String[] arr = getResources().getStringArray(R.array.MainList);
2. ก�ำหนดให้แสดงข้อความทีไ่ ด้ใน TextView ทีช่ อื่ ว่า tvMain ผ่านทางตัวแปรออบเจ็กต์ ArrayAdapter

ที่ชื่อว่า arrAdt ร่วมกับฟังก์ชัน setListAdapter()
R.layout.activity_main, R.id.tvMain, arr);
this.setListAdapter(arrAdt);
}
3. ส่วนตรวจสอบรายการที่ถูกคลิกเลือกอยู่ในเหตุการณ์ onListItemClick() โดยสามารถอ่าน

รายการที่ถูกคลิกเลือกได้จากเมธอด getItem()
}
พื้นฐานการแสดงรูปภาพก�ำกับแต่ละรายการในคลาส
ListActivity
จากหัวข้อทีผ่ า่ นมารายการทีป่ รากฏอยูใ่ นส่วนแสดงผลของ Activity สามารถใส่รปู ก�ำกับแต่ละรายการ
ได้เช่นกัน ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 5-3 พื้นฐานการแสดงรูปภาพก�ำกับแต่ละรายการในคลาส ListActivity มีขั้นตอนดังนี้
2. ให้ใช้ ImageView จ�ำนวน 1 ตัวตัง้ ชือ่ ว่า imgMain โดยก�ำหนดให้แสดงรูปภาพทีช่ อื่ ว่า ic_launcher
อยู่ในโฟลเดอร์ Drawable ผ่านทางคุณสมบัติ Src ดังรูปที่ 5-8

รูปให้กับ imgMain
2.2 เลือก
คลิก 2.1
2.3 คลิก
3. ใช้ TextView จ�ำนวน 1 ตัวตั้งชื่อว่า tvMain ส่วนแสดงผลที่ได้ ดังรูปที่ 5-9

แสดงส่วนแสดงผล
ที่ได้
จากรูปที่ 5-9 แสดงสคริปต์ XML ที่ได้ ดังต่อไปนี้

สคริปต์ XML ที่ 5-3 พื้นฐานการแสดงรูปภาพก�ำกับแต่ละรายการในคลาส ListActivity (\res\layout\activity_
main.xml)
<ImageView
android:id="@+id/imgMain"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_toRightOf="@+id/imgMain"
android:text="@+id/tvMain"
android:textSize="20dp" />
</RelativeLayout>

4. เขียนโค้ด JAVA ก�ำหนดการท�ำงานดังนี้
part
1
โค้ด JAVA ที่ 5-3 พื้นฐานการแสดงรูปภาพก�ำกับแต่ละรายการในคลาส ListActivity (\src\com.example.using
listactivity\MainActivity.java)
@Override
String[] MainMenu = new String[] { "เมนู 1", "เมนู 2", "เมนู 3",
"เมนู 4", "เมนู 5" };
R.layout.activity_main, R.id.tvMain, MainMenu);
}

Toast.makeText(this, "รายการ : " + str + " ถูกเลือก",
}
@Override
return true;
}
}
จากรูปที่ 5-10 พบว่า ในแต่ละรายการแสดง

รูปภาพที่เราก�ำหนดไว้ด้วย

1. เริ่มต้นสร้างตัวแปรอาร์เรย์ที่ชื่อว่า MainMenu ขึ้นมาก�ำหนดให้มีสมาชิก 5 ตัว (5 รายการ) ท�ำ
หน้าที่เป็นรายการที่จะปรากฏใน Activity
src\com.example.usinglistactivity\MainActivity.java
@Override
String[] MainMenu = new String[] { "เมนู 1", "เมนู 2", "เมนู 3",
"เมนู 4", "เมนู 5" };
2. สร้างตัวแปรออบเจ็กต์ ArrayAdapter ที่ชื่อว่า arrAdt ขึ้นมา ก�ำหนดให้ส่วนแสดงผล (R.layout.

activity_main) แสดงรายการจาก widget ที่ชื่อว่า tvMain และตัวแปรอาร์เรย์ MainMenu
src\com.example.usinglistactivity\MainActivity.java
R.layout.activity_main, R.id.tvMain, MainMenu);
}
การแสดงรายการใน ListActivity แบบใช้รูปภาพ

แตกต่างกัน
จากตัวอย่างที่ผ่านมาพบว่า ในแต่ละรายการใช้รูปภาพเดียวกันค�ำถามที่ตามมาก็คือ ถ้าเราต้องการ
ใช้รูปภาพที่แตกต่างกันมีวิธีการท�ำอย่างไร
ตัวอย่างที่ 5-4 การแสดงรายการใน ListActivity แบบใช้รูปภาพแตกต่างกันมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า ListActivityWithMultipleImage
2. เตรียมไฟล์รูปภาพที่ต้องการ โดยมีข้อแนะน�ำในขั้นต้นว่า ควรจะมีขนาดเท่ากันและมีพื้นหลังเป็น
แบบโปร่งใส (ไฟล์รูปภาพนามสกุล .png) ในกรณีนี้ผู้เขียนเตรียมไว้ 5 ไฟล์ และลากไฟล์รูปภาพ
ที่ต้องการใช้งานมาเก็บไว้ในโฟลเดอร์ drawable-hdpi ของโปรเจ็กต์ก่อน ดังรูปที่ 5-11
แสดงไฟล์รูปภาพ
ที่ต้องการใช้งาน
2 ลากวาง

part
จากรูปที่ 5-11 ไฟล์รปู ภาพถูกเพิม่ เข้ามาในโปรเจ็กต์อยูใ่ นฐานะเป็น Resource ประเภทหนึง่ ทีส่ ามารถ
1
เรียกใช้ได้นั่นเอง
แสดงการใช้งาน
ImageView และ
TextView
ImageView
จากรูปที่ 5-12 ก�ำหนดให้ ImageView แสดงรูปภาพเริ่มต้นจากไฟล์รูปภาพที่ชื่อว่า pic01.png ซึ่ง

แสดงสคริปต์ XML ได้ดังต่อไปนี้
สคริปต์ XML ที่ 5-4 การแสดงรายการใน ListActivity แบบใช้รปู ภาพแตกต่างกัน (\res\layout\activity_main.xml)
<ImageView
android:src="@drawable/pic01" />
<TextView
</RelativeLayout>

โค้ด JAVA ที่ 5-4 การแสดงรายการใน ListActivity แบบใช้รูปภาพแตกต่างกัน (\src\com.example.listactivity
withmultipleimage\MainActivity.java)
package com.example.listactivitywithmultipleimage;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.ImageView;

String MainMenu[]={"เมนู 1","เมนู 2","เมนู 3","เมนู 4","เมนู 5"};
@Override
ArrayAdapterWithImage myAdt = new ArrayAdapterWithImage(this, MainMenu);
setListAdapter(myAdt);
}
@Override
}
public class ArrayAdapterWithImage extends ArrayAdapter<String> { 1

private final Activity context;
private final String[] list;
public ArrayAdapterWithImage(Activity context, String []arr) {

super(context, R.layout.activity_main, arr);
this.context = context;
this.list = arr;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) { 2
LayoutInflater inflater = context.getLayoutInflater();
View v = inflater.inflate(R.layout.activity_main, null, true);
TextView tv = (TextView) v.findViewById(R.id.tvMain); 3

ImageView img = (ImageView) v.findViewById(R.id.imgMain);
String str = this.list[position]; 4

tv.setText(str);

if (str.startsWith("เมนู 1")) 5
part
1
img.setImageResource(R.drawable.pic01);
else if (str.startsWith("เมนู 2"))
return v;
}
}
@Override
return true;
}
}
5.1 เลือก
จากรูปที่ 5-13 พบว่า ในแต่ละรายการมีรูปภาพประกอบแตกต่างกันตามที่เราต้องการแล้ว

การแสดงข้อความและรูปภาพตามที่เราต้องการใน ListActivity ไม่มีคลาสใดๆ ของ Android ท�ำ
หน้าที่นี้เราต้องสร้างคลาสขึ้นมาท�ำหน้าที่นี้เองโดยอาศัยการท�ำงานของคลาส ArrayAdapter เดิมที่มีอยู่
1. เริม่ ต้นสร้างคลาสทีช่ อื่ ว่า ArrayAdapterWithImage ขึน้ มาท�ำหน้าทีแ่ สดงข้อความและรูปภาพใน
ListActivity โดยก�ำหนดให้สบื ทอดคลาส (extends) มาจากคลาสแม่ ArrayAdapter<String> โดยที่
·พารามิเตอร์ context หมายถึง Activity ที่ท�ำหน้าที่แสดงผล
·พารามิเตอร์ list หมายถึง รายการที่ต้องการแสดงโดยก�ำหนดให้เป็นอาร์เรย์ของ String

\src\com.example.listactivitywithmultipleimage\MainActivity.java
public class ArrayAdapterWithImage extends ArrayAdapter<String> {
private final Activity context;
private final String[] list;
public ArrayAdapterWithImage(Activity context, String []arr) {

super(context, R.layout.activity_main, arr);
this.context = context;
this.list = arr;
}
ที่คอนสตรัคเตอร์ ArrayAdapterWithImage() (มีชื่อเดียวกับคลาส) ซึ่งเป็นซับรูทีนพิเศษท�ำงานเอง

โดยอัตโนมัติ เมื่อคลาส ArrayAdapterWithImage ถูกสั่งด้วยค�ำสั่ง new และผู้ใช้ต้องส่งค่าให้กับพารามิเตอร์
context และ arr ตามล�ำดับ
2. สร้างเมธอดทีช่ อื่ ว่า getView() คืนค่าเป็นข้อมูลชนิด View ท�ำหน้าทีก่ ำ� หนดรูปแบบรายการทีแ่ สดง
อยู่ใน ListActivity โดยการใช้เมธอด inflate() ท�ำหน้าที่ตรวจสอบโครงสร้างของส่วนแสดงผล
(activity_main) เก็บไว้ในตัวแปรออบเจ็กต์ View ที่ชื่อว่า v ก่อน
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View v = inflater.inflate(R.layout.activity_main, null, true);
3. ให้หา widget ที่ชื่อว่า tvMain เก็บไว้ในตัวแปรออบเจ็กต์ TextView ที่ชื่อว่า tv ผ่านทางตัวแปร

ออบเจ็กต์ v และค้นหา imgMain เก็บไว้ในตัวแปรออบเจ็กต์ ImageView ที่ชื่อว่า img
TextView tv = (TextView) v.findViewById(R.id.tvMain);
ImageView img = (ImageView) v.findViewById(R.id.imgMain);
4. อ่านข้อความของรายการต่างๆ ที่อยู่ในตัวแปรอาร์เรย์ list เก็บไว้ในตัวแปรออบเจ็กต์ TextView

ที่ชื่อว่า tv ผ่านทางเมธอด setText() ส่งผลให้ ณ จุดนี้ข้อความรายการต่างๆ ถูกเก็บไว้ที่
ตัวแปรออบเจ็กต์ tv
String str = this.list[position];
tv.setText(str);
5. เราจะตรวจสอบว่าแต่ละรายการต้องใช้รูปใด กล่าวคือ
กรณีเป็นรายการ เมนู 1 ใช้รูปที่ชื่อว่า pic01

part
1
if (str.startsWith("เมนู 1"))
return v;
}
}
ไม่ว่าจะเป็นรายการใดก็ตามสั่งให้แสดงรูปภาพใน ImageView ที่ชื่อว่า img ผ่านทางเมธอด setI-

mageResource() และถือว่าเมธอด getView() คืนค่าเป็นส่วนแสดงผลที่เก็บอยู่ในตัวแปรออบเจ็กต์ v
6. มาที่ส่วนของการเรียกใช้งาน เริ่มต้นสร้างรายการเมนูขึ้นมา 5 รายการเก็บไว้ในตัวแปรอาร์เรย์
String ที่ชื่อว่า MainMenu และจากนั้นในเหตุการณ์ onCreate() ให้สร้างตัวแปรออบเจ็กต์
ArrayAdapterWithImage ทีช่ อื่ ว่า myAdt ขึน้ มา ซึง่ ต้องมีการส่งค่าให้กบั พารามิเตอร์ 2 ตัวกล่าวคือ
ส่วนแสดงผลปัจจุบัน (MainActivity) ด้วยค�ำสั่ง this
รายการเมนู ผ่านทางตัวแปรอาร์เรย์ MainMenu
String MainMenu[]={"เมนู 1","เมนู 2","เมนู 3","เมนู 4","เมนู 5"};
@Override
ArrayAdapterWithImage myAdt = new ArrayAdapterWithImage(this, MainMenu);
setListAdapter(myAdt);
}
ผลการท�ำงานของคลาส ArrayAdapterWithImage คืนค่าเป็นส่วนแสดงผล (คลาส View) ตามค่าที่

ส่งให้กับพารามิเตอร์ 2 ตัว (this,MainMenu) ก็จะได้ส่วนแสดงผลเป็นรายการเมนูและรูปภาพตามที่ต้องการ
7. ท้ายที่สุดการตรวจสอบรายการเมนูที่ถูกคลิกอยู่ในเหตุการณ์ onListItemClick() ยังคงสามารถ
ตรวจสอบได้จากเมธอด getItem() เช่นเดิม
@Override
}

ผูอ้ า่ นสามารถปรับแต่งให้สว่ นแสดงผลดูเป็นมาตรฐานมากยิง่ ขึน้ ได้ เช่น ในแต่ละรายการด้านขวามือ
ควรจะมีรูปภาพที่เป็นหัวลูกศร เพื่อแจ้งให้ผู้ใช้ทราบว่ามีรายการถัดไป โดยการแก้ไขส่วนแสดงผลใหม่ ดังนี้
1. เพิ่มไฟล์รูปภาพหัวลูกศร (arrow.png ขนาด 6x13 พิกเซล) เก็บไว้ในโฟลเดอร์ drawable-hdpi
ของโปรเจ็กต์ ดังรูป
แสดงไฟล์รูปหัว
ลูกศร arrow.png
2. ที่ส่วนแสดงผลให้แก้ไขใหม่โดยการใช้ ImageView อีก 1 ตัว และก�ำหนดให้แสดงรูปภาพที่ชื่อว่า

arrow.png ดังรูปที่ 5-15
แสดงการใช้
ImageView เพิ่ม
อีก 1 ตัว

\res\layout\activity_main.xml (หลังการแก้ไข)
<ImageView
<TextView

part
1
<ImageView
android:id="@+id/imageView1"
android:layout_alignBottom="@+id/imgMain"
android:src="@drawable/arrow" />
</RelativeLayout>
ผลของการแก้ไข
การสร้าง Activity ที่สามารถเปลี่ยนส่วนแสดงผลได้

โดยปกติแล้วใน 1 Activity เรามักจะก�ำหนดให้ส่วนแสดงผลเป็นแบบ 1 Activity ต่อ 1 ส่วนแสดงผล
แต่เราสามารถก�ำหนดให้ 1 Activity สามารถมีส่วนแสดงผลหลายแบบได้อีกด้วย ซึ่งเป็นรูปแบบส่วนแสดงผล
ที่สามารถพบเห็นได้ใน App ประเภทข่าวสารต่างๆ ที่มีการแสดงรายการหลักให้ผู้ใช้เห็นก่อน เมื่อผู้ใช้คลิก
รายการใดก็จะแสดงรายการย่อยดังกล่าวออกมา
กล่าวได้อีกนัยหนึ่งว่า Activity แสดงรายการหลักก่อน เมื่อผู้ใช้คลิกเลือกรายการใดก็ตามส่งผลให้
Activity (เดิม) แสดงรายการย่อยออกมาใน Activity เดิมนั่นเอง
ตัวอย่างที่ 5-5 การสร้าง Activity ที่สามารถเปลี่ยนส่วนแสดงผลได้มีขั้นตอนดังนี้

โค้ด JAVA ที่ 5-5 การสร้าง Activity ที่สามารถเปลี่ยนส่วนแสดงผลได้ (\src\com.example.usinglistactivity\
MainActivity.java)

String[] MainMenu = { "เมนูหลัก 1", "เมนูหลัก 2", "เมนูหลัก 3","เมนูหลัก 4", "เมนูหลัก 5" };
String[] SubMenu = new String[] { "เมนูย่อย 1", "เมนูย่อย 2", "เมนูย่อย 3" };
String strMain = ""; 2

ArrayAdapter<String> mainAdt;
ArrayAdapter<String> subAdt;
@Override
mainAdt = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, MainMenu);
subAdt = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, SubMenu);
setListAdapter(mainAdt);
}

if (getListAdapter() == mainAdt) {
strMain = getListView().getItemAtPosition(position).toString();
setListAdapter(subAdt);
} else {
String strSub = getListView().getItemAtPosition(position).toString();
Toast.makeText(getBaseContext(),
"รายการที่ถูกเลือก : " + strMain + " " + strSub,Toast.LENGTH_SHORT).show();
}
}
@Override
return true;
}
}

part
1
3.2 เลือก
3.1 เลือก
จากรูปที่ 5-17 พบว่า ผู้เขียนสร้างเมนูหลักขึ้นมา 5 เมนู เมื่อผู้ใช้คลิกเลือกเมนูหลักแล้วส่งผลให้ส่วน

แสดงผลแสดงเมนูย่อยขึ้นมา เพื่อให้ผู้ใช้คลิกเลือกเมนูอีกระดับในส่วนแสดงผลเดิม
1. เริ่มต้นให้สร้างตัวแปรอาร์เรย์ขึ้นมา 2 ชุด โดยที่
ตัวแปรอาร์เรย์ที่ชื่อว่า MainMenu ท�ำหน้าที่สร้างรายการหลักมีทั้งสิ้น 5 รายการ
ตัวแปรอาร์เรย์ที่ชื่อว่า SubMenu ท�ำหน้าที่สร้างรายการย่อยมีทั้งสิ้น 3 รายการ
String[] MainMenu = { "เมนูหลัก 1", "เมนูหลัก 2", "เมนูหลัก 3","เมนูหลัก 4", "เมนูหลัก 5" };
String[] SubMenu = new String[] { "เมนูย่อย 1", "เมนูย่อย 2", "เมนูย่อย 3" };
2. สร้างตัวแปรที่ชื่อว่า strMain ท�ำหน้าที่เก็บรายการหลักที่ถูกผู้ใช้คลิกเลือกและสร้างตัวแปร

ออบเจ็กต์ ArrayAdapter ขึ้นมาอีก 2 ตัวโดยที่
ตัวแปรออบเจ็กต์ ArrayAdapter ที่ชื่อว่า mainAdt ท�ำหน้าที่ผูกติดกับรายการหลัก
ตัวแปรออบเจ็กต์ ArrayAdapter ที่ชื่อว่า subAdt ท�ำหน้าที่ผูกติดกับรายการย่อย
String strMain = "";
ArrayAdapter<String> subAdt;
3. ในเหตุการณ์ onCreate() ให้ท�ำ

ผูกตัวแปรออบเจ็กต์ mainAdt เข้ากับตัวแปรอาร์เรย์ MainMenu
ผูกตัวแปรออบเจ็กต์ subAdt เข้ากับตัวแปรอาร์เรย์ SubMenu

จากนั้นให้ใช้ฟังก์ชัน setListAdapter() ก�ำหนดให้ส่วนแสดงผลแสดงรายการเมนูหลักที่เก็บอยู่ใน
ตัวแปรออบเจ็กต์ mainAdt
@Override
subAdt = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, SubMenu);
}
4. เมื่อผู้ใช้คลิกเลือกรายการในส่วนแสดงผลส่งผลให้เกิดเหตุการณ์ onListItemClick() และให้

ตรวจสอบก่อนเลยว่า ส่วนแสดงผลก�ำลังแสดงรายการเมนูหลัก หรือรายการเมนูยอ่ ยอยูผ่ า่ นทาง
ฟังก์ชัน getListAdapter() กล่าวคือ
·กรณีฟังก์ชัน getListAdapter() คืนค่าเป็น mainAdt ตีความได้ว่า ส่วนแสดงผลก�ำลัง
แสดงรายการเมนูหลักอยู่ให้เก็บรายการเมนูหลักที่ถูกผู้ใช้คลิกไว้ในตัวแปร strMain ก่อน

กรณีฟังก์ชัน getListAdapter() คืนค่าอื่น ตีความได้ว่า ส่วนแสดงผลก�ำลังแสดงรายการ

เมนูย่อยอยู่ให้อ่านรายการเมนูย่อยที่ถูกคลิกเลือกเก็บไว้ที่ตัวแปร strSub ก่อน จากนั้นสั่งให้
แสดงข้อความของเมนูหลัก (ตัวแปร strMain) และเมนูย่อยที่ถูกคลิกเลือก (ตัวแปร strSub)
ด้วย Toast Notification
} else {
}
}

part
5. ผูอ้ า่ นสามารถเพิม่ ความสะดวกให้กบั ผูใ้ ช้งานมากยิง่ ขึน้ ในกรณีทสี่ ว่ นแสดงผลก�ำลังแสดงรายการ

1
เมนูย่อยอยู่ควรจะมีรายการที่ให้ผู้ใช้คลิกเลือกเพื่อกลับไปรายการเมนูหลัก ดังรูปที่ 5-18
รายการเมนูย่อย
“กลับหน้าแรก”
จากรูปที่ 5-18 เกิดจากการแก้ไขโค้ด JAVA ใหม่ดังนี้

} else {
if (strSub == "กลับหน้าแรก") {
} else {
}
}
}
จากโค้ด JAVA ข้างต้นส่วนที่ส�ำคัญก็คือ ให้ตรวจสอบว่าถ้าผู้ใช้คลิกเมนูย่อย “กลับหน้าแรก”

สั่งให้ส่วนแสดงผลแสดงรายการเมนูหลัก (อยู่ในฐานะเป็นหน้าแรก) ผ่านทางฟังก์ชัน setListAdapter() โดย
ใช้ส่วนแสดงผลจากตัวแปรออบเจ็กต์ mainAdt นั่นเอง
เทคนิคที่ผู้เขียนน�ำเสนอในบทนี้ผู้อ่านสามารถน�ำไปต่อยอดในการพัฒนา App ด้านต่างๆ ได้มากมาย
เห็นได้ว่า การสร้างส่วนแสดงผลแบบรายการด้วยคลาส ListActivity ไม่มีความซับซ้อนแต่อย่างใด หากเข้าใจ
หลักการท�ำงานของคลาส ListActivity

6
การสร้างส่วนแสดงผลแบบรายการด้วย
ListView และ Spinner
ListView เป็น widget ที่ท�ำหน้าที่แสดงข้อมูลเป็นแบบรายการให้ผู้ใช้เลือก มีลักษณะคล้ายกับคลาส
ListActivity ส่วน Spinner เป็น widget อีกตัวหนึ่งที่มีส่วนแสดงผลแบบรายการเช่นกัน
พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วย List-
View
ส่วนแสดงผลแบบรายการเป็นรูปแบบการน�ำเสนอเนือ้ หาทีไ่ ด้รบั ความนิยมในระดับต้นๆ ของ Android
App การใช้งาน ListView ในขั้นต้นนี้ประกอบด้วยการท�ำงาน 2 ส่วนคือ
1. วิธีการสร้างรายการ
2. การตรวจสอบว่าผู้ใช้คลิกเลือกรายการใด
ตัวอย่างที่ 6-1 พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วย ListView มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleListView
2. ให้ใช้งาน widget ที่ชื่อว่า ListView สร้างส่วนแสดงผล ดังรูปที่ 6-1
แสดง ListView
ในขณะออกแบบ
สคริปต์ XML ที่ 6-1 พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วย ListView (\res\Layout\activity_main.xml)
<ListView
android:id="@+id/lsvMain"
android:layout_centerVertical="true" >
</ListView>
</RelativeLayout>
จากสคริปต์ XML ข้างต้นผู้เขียนตั้งชื่อ ListView ตัวนี้ว่า lsvMain

โค้ด JAVA ที่ 6-1 พื้นฐานการสร้างส่วนแสดงผลแบบรายการด้วย ListView (\src\com.example.simplelistview\
MainActivity.java)
package com.example.simplelistview;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
@Override
String[] myMenus = new String[] {
"เมนู 1", "เมนู 2", "เมนู 3", "เมนู 4", "เมนู 5"
};
ListView lsv = (ListView)findViewById(R.id.lsvMain); 2

ArrayAdapter<String> arrAdt = new ArrayAdapter<String>(this, android.R.layout. 3
simple_list_item_1,myMenus);
lsv.setAdapter(arrAdt);
lsv.setOnItemClickListener(new OnItemClickListener() { 4
public void onItemClick(AdapterView<?> parent, View view,int position, long id)
{
String UserSelected = ((TextView) view).getText().toString();
Toast.makeText(getApplicationContext(),UserSelected, Toast.LENGTH_SHORT).show();

}
part
1
});
}
@Override
return true;
}
}
4.1 เลือก
จากรูปที่ 6-2 เมื่อผู้ใช้คลิกที่รายการเมนูใดก็จะมีข้อความแบบ Toast Notification แจ้งเมนูที่ถูกคลิก

เลือกปรากฏขึ้นมา
1. เริ่มต้นในเหตุการณ์ onCreate() ให้สร้างตัวแปรอาร์เรย์ชนิดข้อความที่ชื่อว่า myMenus ขึ้นมา
ท�ำหน้าที่เป็นรายการเมนู ปรากฏในส่วนแสดงผลให้ผู้ใช้เลือกก�ำหนดให้มีสมาชิก 5 ตัว (5 เมนู)
\src\com.example.simplelistview\MainActivity.java
String[] myMenus = new String[] {
"เมนู 1", "เมนู 2", "เมนู 3", "เมนู 4", "เมนู 5"
};
2. ให้หา ListView ทีช่ อ่ื ว่า lsvMain ในส่วนแสดงผลมาเก็บไว้ทตี่ วั แปรออบเจ็กต์ ListView ทีช่ อื่ ว่า lsv
ListView lsv = (ListView)findViewById(R.id.lsvMain);
บทที่ 6 การสร้างส่วนแสดงผลแบบรายการด้วย ListView และ Spinner 125

3. การก�ำหนดข้อมูลแบบอาร์เรย์ของข้อความให้กับ ListView ต้องท�ำผ่านทางคลาสที่ชื่อว่า
ArrayAdapter ผู้เขียนตั้งชื่อว่า arrAdt โดยก�ำหนดให้อ่านค่าจากตัวแปรอาร์เรย์ myMenus
ส่วนการก�ำหนดให้แสดงรายการก�ำหนดได้ที่พารามิเตอร์ android.R.layout.simple_list_item_1
ArrayAdapter<String> arrAdt = new ArrayAdapter<String>(this, android.R.layout.
simple_list_item_1,myMenus);
จากนั้นให้ใช้เมธอด setAdapter() เพื่อก�ำหนดให้แสดงรายการใน ListView ที่ชื่อว่า lsv

4. การตรวจสอบรายการที่ถูกผู้ใช้คลิกเลือก อยู่ในเหตุการณ์ OnItemClickListener() โดย
สร้างตัวแปรที่ชื่อว่า UserSelected เข้ามาท�ำหน้าที่อ่านข้อความของเมนูที่ถูกคลิกเลือกผ่าน
ทางเมธอด getText()
สั่งให้แสดงข้อความของเมนูที่ถูกคลิกเลือกด้วยคลาส Toast ร่วมกับเมธอด show()
lsv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,int position, long id)
{
String UserSelected = ((TextView) view).getText().toString();
Toast.makeText(getApplicationContext(),UserSelected, Toast.LENGTH_SHORT).show();
}
});
}
การแสดงข้อมูลแบบหลายคอลัมน์ใน ListView
ในกรณีที่เราต้องการแสดงผลรายการข้อมูลในลักษณะแบ่งรายการที่แสดงอยู่ใน ListView ออกเป็น
คอลัมน์เหมือนกับตารางก็สามารถท�ำได้เช่นกัน
ตัวอย่างที่ 6-2 การแสดงข้อมูลแบบหลายคอลัมน์ใน ListView มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleMultiColumn
2. ในกรณีนี้ผู้เขียนต้องการก�ำหนดให้แต่ละรายการถูกแบ่งออกเป็น 3 คอลัมน์จึงต้องเพิ่ม Layout
ใหม่ในโฟลเดอร์ layout (\res\layout) โดยการคลิกขวาเลือกค�ำสั่ง New > Other... > Android >
Android XML Layout File เพื่อสร้าง Layout ใหม่ให้แต่ละรายการ ดังรูปที่ 6-3

part
1
XML ประเภท
Layout เข้ามาใน
2.2 เลือก
เลือก 2.5
2.7 เลือก
2.3 เลือก
2.4 คลิก
2.8 คลิก
จากรูปที่ 6-3 ตั้งชื่อไฟล์ว่า mainrows.xml

3. ออกแบบว่าใน 1 แถวแสดงผลอย่างไร กรณีนตี้ อ้ งการแสดงข้อความแบบ 3 คอลัมน์จงึ ใช้ TextView
จ�ำนวน 3 ตัวเรียงตามแนวนอนด้วย LinearLayout ร่วมกับแอตทริบิวต์ android:orientation=
“horizontal” โดยที่
คอลัมน์ที่ 1 ตั้งชื่อว่า tvCol1

สคริปต์ XML ที่ 6-2 การแสดงข้อมูลแบบหลายคอลัมน์ใน ListView (\res\layout\mainrows.xml)
<TextView
android:id="@+id/tvCol1"
android:layout_width="80dp"
android:layout_height="wrap_content"/>
<TextView
<TextView
android:layout_height="wrap_content" />
</LinearLayout>
ณ จุดนี้รูปแบบของการแสดงข้อมูล 1 แถวพร้อมใช้งานแล้ว
4. ที่ส่วนแสดงผลหลัก (activity_main.xml) ให้ออกแบบดังรูปที่ 6-4

สคริปต์ XML ที่ 6-2 การแสดงข้อมูลแบบหลายคอลัมน์ใน ListView (\res\layout\activity_main.xml)
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"

part
1
android:text="@string/header" />
<LinearLayout
android:orientation="horizontal"
android:paddingBottom="6dp"
android:paddingTop="4dip" >
<TextView
android:id="@+id/c1"
android:layout_weight="0.50"
android:text="@string/Col1" />
<TextView
<TextView
</LinearLayout>
<ListView
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>

โค้ด JAVA ที่ 6-2 การแสดงข้อมูลแบบหลายคอลัมน์ใน ListView (\src\com.example.simplemulticolumn\Main-
Activity.java)
package com.example.simplemulticolumn;
import java.util.ArrayList;
import java.util.HashMap;
import android.widget.SimpleAdapter;

@Override
ListView lsv = (ListView) findViewById(R.id.lsvMain); 2
ArrayList<HashMap<String, String>> arr = new ArrayList<HashMap<String, String>>();
HashMap<String, String> hm = new HashMap<String, String>();

hm.put("คอลัมน์ 1", "R1-C1");
arr.add(hm);
hm = new HashMap<String, String>();

arr.add(hm);

arr.add(hm);
SimpleAdapter adt = new SimpleAdapter(this, arr, R.layout.mainrows, 3

new String[] { "คอลัมน์ 1", "คอลัมน์ 2", "คอลัมน์ 3" },
new int[] { R.id.tvCol1, R.id.tvCol2, R.id.tvCol3 });
lsv.setAdapter(adt);
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
parent.getItemAtPosition(position).toString(),
}
});
}
@Override
return true;
}
}

part
1
6.2 เลือก
จากรูปที่ 6-5 พบว่าผู้เขียนใส่ข้อมูลเข้าไป 3 แถวในแต่ละแถวแสดง 3 คอลัมน์

1. เริ่มต้นในเหตุการณ์ onCreate() ที่ส่วนแสดงผลให้อ่าน ListView ที่ชื่อว่า lsvMain มาเก็บไว้ที่
ตัวแปรออบเจ็กต์ ListView ที่ชื่อว่า lsv ก่อน
\src\com.example.simplemulticolumn\MainActivity.java
@Override
ListView lsv = (ListView) findViewById(R.id.lsvMain);
2. สร้างข้อมูลสมมติขึ้นมา 3 แถว โดยการใช้งานคลาส ArrayList ร่วมกับคลาส HashMap โดยที่

·สร้างตัวแปรออบเจ็กต์ HashMap ที่ชื่อว่า hm ขึ้นมาท�ำหน้าที่เก็บข้อมูลทั้ง 3 คอลัมน์
·เพิ่มข้อมูลของแต่ละแถวผ่านทางเมธอด add() ของตัวแปรออบเจ็กต์ ArrayList ที่ชื่อว่า arr
ในกรณีนี้ผู้เขียนสร้างข้อมูลขึ้นมา 3 แถว
HashMap<String, String> hm = new HashMap<String, String>();

arr.add(hm);


arr.add(hm);

arr.add(hm);
3. ใช้ตัวแปรออบเจ็กต์ SimpleAdapter ที่ชื่อว่า adt ใส่ข้อมูลในแต่ละคอลัมน์ไว้ที่ TextView ที่ชื่อ

ว่า tvCol1, tvCol2 และ tvCol3 ตามล�ำดับ จากนั้นสั่งให้แสดงข้อมูลผ่านทางตัวแปรออบเจ็กต์
ListView ที่ชื่อว่า lsv
SimpleAdapter adt = new SimpleAdapter(this, arr, R.layout.mainrows,
new String[] { "คอลัมน์ 1", "คอลัมน์ 2", "คอลัมน์ 3" },
new int[] { R.id.tvCol1, R.id.tvCol2, R.id.tvCol3 });
4. ตรวจสอบแถวที่ถูกคลิกเลือกอยู่ในเหตุการณ์ setOnItemClickListener()
public void onItemClick(AdapterView<?> parent, View view,
parent.getItemAtPosition(position).toString(),
}
});
}
การแสดงรายการใน ListView แบบมีตัวเลือก CheckBox

ผู้อ่านสามารถปรับแต่งแต่ละรายการที่แสดงอยู่ใน ListView ให้มีความยืดหยุ่นมากยิ่งขึ้น เช่น ใน
กรณีที่เรายินยอมให้ผู้ใช้คลิกเลือกได้หลายรายการ โดยการใช้ CheckBox เข้ามาท�ำหน้าที่แสดงว่ารายการใด
ที่ถูกผู้ใช้เลือก
สิ่งที่เราสนใจในขั้นต้นกับส่วนแสดงผลแบบนี้ มี 4 อย่างคือ
1. การก�ำหนดให้ทุกรายการอยู่ในสถานะถูกเลือกทั้งหมด
2. การยกเลิกทุกรายการให้อยู่ในสถานะไม่ถูกเลือก
3. การก�ำหนดให้รายการที่ถูกผู้ใช้คลิกเลือกอยู่ในสถานะถูกเลือก
4. การตรวจสอบรายการที่ถูกเลือกทั้งหมดเท่าที่มีอยู่ในปัจจุบัน

ตัวอย่างที่ 6-3 การแสดงรายการใน ListView แบบมีตัวเลือก CheckBox มีขั้นตอนดังนี้
part
1
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า ListViewWithCheckBox
cmdSelectAll cmdCheck
cmdClear
lsvMain

สคริปต์ XML ที่ 6-3 การแสดงรายการใน ListView แบบมีตัวเลือก CheckBox (\res\layout\activity_main.xml)
<LinearLayout
<Button
android:id="@+id/cmdSelectAll"
android:text="@string/strAll" />
<Button
android:id="@+id/cmdClear"
android:text="@string/strClear" />
<Button
android:text="@string/strCheck" />
</LinearLayout>

<ListView
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>

โค้ด JAVA ที่ 6-3 การแสดงรายการใน ListView แบบมีตัวเลือก CheckBox (\src\com.example.listviewwith-
checkbox\MainActivity.java)
package com.example.listviewwithcheckbox;
import android.util.SparseBooleanArray;
public class MainActivity extends Activity { 1

ListView lsv;
@Override
setContentView(R.layout.activity_main); 2
String[] arrMain = { "รายการที่ 1", "รายการที่ 2", "รายการที่ 3","รายการที่ 4", "รายการที่ 5" };
lsv = (ListView) findViewById(R.id.lsvMain);

Button cmd_SelectAll = (Button) findViewById(R.id.cmdSelectAll);
Button cmd_Clear = (Button) findViewById(R.id.cmdClear);
Button cmd_Check = (Button) findViewById(R.id.cmdCheck);
ArrayAdapter<String> adt = new ArrayAdapter<String>(this, 3

android.R.layout.simple_list_item_multiple_choice, arrMain);
lsv.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
cmd_SelectAll.setOnClickListener(new Button.OnClickListener() { 4
for (int i = 0; i < lsv.getCount(); i++)
lsv.setItemChecked(i, true);
}
});
cmd_Clear.setOnClickListener(new Button.OnClickListener() {
lsv.setItemChecked(i, false);
}
});

cmd_Check.setOnClickListener(new Button.OnClickListener() {
part
1
String str = "";
int AllListCounts = lsv.getCount();
SparseBooleanArray arrBool = lsv.getCheckedItemPositions();
for (int i = 0; i < AllListCounts; i++) {
if (arrBool.get(i)) {
str += lsv.getItemAtPosition(i).toString() + "\n";
}
}
if (str!=""){
Toast.makeText(getApplicationContext(),str, Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(getApplicationContext(),"คุณยังไม่ได้เลือกรายการใดๆ", Toast.
LENGTH_SHORT).show();
}
}
});
}
@Override
return true;
}
}
·กรณีเลือกทั้งหมด แสดงดังรูปที่ 6-7
กรณีเลือกทุก
รายการ คลิก 4.1

·กรณียกเลิกทุกรายการ แสดงดังรูปที่ 6-8
กรณียกเลิกทุก 4.3 คลิก
รายการ
·กรณีตรวจสอบรายการที่ถูกเลือก แสดงดังรูปที่ 6-9

ตรวจสอบรายการ 4.6 คลิก
ที่ถูกเลือก
4.5 เลือก
1. เริ่มต้นสร้างอาร์เรย์ของข้อความที่ชื่อว่า arrMain ขึ้นมาท�ำหน้าที่เป็นรายการต่างๆ ที่ปรากฏใน
ส่วนแสดงผล ในกรณีนี้ก�ำหนดให้มี 5 รายการ และสร้างตัวแปรออบเจ็กต์ ListView ที่ชื่อว่า lsv
ไว้ก่อน
\src\com.example.listviewwithcheckbox\MainActivity.java
ListView lsv;
@Override
String[] arrMain = { "รายการที่ 1", "รายการที่ 2", "รายการที่ 3","รายการที่ 4", "รายการที่ 5" };

2. ที่ส่วนแสดงผลให้ท�ำดังนี้
part
1
ค้นหา ListView ที่ชื่อว่า lsvMain เก็บไว้ที่ตัวแปรออบเจ็กต์ lsv
ค้นหา Button ที่ชื่อว่า cmdSelectAll เก็บไว้ที่ตัวแปรออบเจ็กต์ cmd_SelectAll
ค้นหา Button ที่ชื่อว่า cmdClear เก็บไว้ในตัวแปรออบเจ็กต์ cmd_Clear
ค้นหา Button ที่ชื่อว่า cmdCheck เก็บไว้ในตัวแปรออบเจ็กต์ cmd_Check
lsv = (ListView) findViewById(R.id.lsvMain);
Button cmd_SelectAll = (Button) findViewById(R.id.cmdSelectAll);
Button cmd_Clear = (Button) findViewById(R.id.cmdClear);
Button cmd_Check = (Button) findViewById(R.id.cmdCheck);
3. สั่งให้ส่วนแสดงผลแสดงข้อมูลแบบ simple_list_item_multiple_choice โดยใช้รายการที่

เก็บอยู่ในตัวแปรอาร์เรย์ arrMain และก�ำหนดให้ผู้ใช้สามารถเลือกได้มากกว่า 1 รายการในเวลา
เดียวกัน โดยการก�ำหนดที่เมธอด setChoiceMode() ให้มีค่าเท่ากับ ListView.CHOICE_
MODE_MULTIPLE
ArrayAdapter<String> adt = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_multiple_choice, arrMain);
lsv.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
4. ก�ำหนดให้แต่ละปุ่ม Button ท�ำงานตามที่เราต้องการโดยที่

ปุ่ม Button ที่ชื่อว่า cmd_SelectAll ท�ำหน้าที่ก�ำหนดให้ทุกรายการอยู่ในสถานะถูกเลือก
โดยการสั่งให้วนลูปตามจ�ำนวนรายการที่มีอยู่ (เมธอด getCount()) ร่วมกับเมธอด setItem-

Checked() ก�ำหนดค่าเป็น true
cmd_SelectAll.setOnClickListener(new Button.OnClickListener() {
lsv.setItemChecked(i, true);
}
});
ปุ่ม Button ที่ชื่อว่า cmd_Clear ท�ำหน้าที่ก�ำหนดให้ทุกรายการอยู่ในสถานะไม่ถูกเลือก

ก�ำหนดค่าเป็น false
cmd_Clear.setOnClickListener(new Button.OnClickListener() {
lsv.setItemChecked(i, false);
}
});

·ปุ่ม Button ที่ชื่อว่า cmd_Check ท�ำหน้าที่ตรวจสอบว่า รายการใดอยู่ในสถานะถูกเลือก
โดยการอ่านจ�ำนวนรายการทั้งหมดเก็บไว้ที่ตัวแปร AllListCounts ก่อน ต่อมาสร้างตัวแปร
ออบเจ็กต์ SparseBooleanArray ทีช่ อื่ ว่า arrBool ขึน้ มาท�ำหน้าทีเ่ ก็บสถานะของแต่ละรายการ
จากนั้นสั่งให้วนลูปตามจ�ำนวนรายการที่มีอยู่
cmd_Check.setOnClickListener(new Button.OnClickListener() {
String str = "";
int AllListCounts = lsv.getCount();
SparseBooleanArray arrBool = lsv.getCheckedItemPositions();
for (int i = 0; i < AllListCounts; i++) {
สถานะของรายการที่ถูกเลือกให้เก็บสะสมค่าไว้ที่ตัวแปร str
if (arrBool.get(i)) {
str += lsv.getItemAtPosition(i).toString() + "\n";
}
}
ต่อมาตรวจสอบว่าถ้าตัวแปร str ไม่เท่ากับค่าว่าง ตีความได้ว่ามีรายการอย่างน้อย 1 รายการที่ถูก

เลือก สั่งให้แสดงรายการนั้นๆ ผ่านทางตัวแปร str
if (str!=""){
Toast.makeText(getApplicationContext(),str, Toast.LENGTH_SHORT).show();
แต่ถ้าตัวแปร str เป็นค่าว่างตีความได้ว่าผู้ใช้ยังไม่เลือกรายการใดเลย

}else{
Toast.makeText(getApplicationContext(),"คุณยังไม่ได้เลือกรายการใดๆ", Toast.LENGTH_
SHORT).show();
}
}
});
}

part
1
พื้นฐานการลงสีใน ListView แบบไล่โทนสี
เทคนิคการตกแต่งรายการใน ListView ที่ได้รับความนิยมเป็นอย่างมากนั่นคือ การลงสีแบบไล่โทน
สี (Gradient) เพื่อเพิ่มความน่าสนใจให้กับส่วนแสดงผลนั่นเอง
ตัวอย่างที่ 6-4 พื้นฐานการลงสีใน ListView แบบไล่โทนสีมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า ListViewWithColor
2. ที่ส่วนแสดงผลหลัก (activity_main.xml) ให้ใช้ ListView จ�ำนวน 1 ตัว ดังรูปที่ 6-10

สคริปต์ XML ที่ 6-4 พื้นฐานการลงสีใน ListView แบบไล่โทนสี (\res\layout\activity_main.xml)
<ListView
android:layout_alignParentTop="true">
</ListView>
</RelativeLayout>

3. ให้คลิกขวาที่ drawable-hdpi เพื่อเพิ่มไฟล์ Android XML File เข้ามาในโปรเจ็กต์ ดังรูปที่ 6-11
แสดงการเพิม่ ไฟล์
Android XML
File เข้ามาใน
โปรเจ็กต์ปจั จุบนั
3.2 เลือก
3.3 เลือก
3.4 คลิก
4. ก�ำหนดให้ใช้อิลิเมนต์แบบ shape โดยตั้งชื่อว่า lsv_normal.xml ดังรูปที่ 6-12

ก�ำหนดให้ใช้
อิลิเมนต์แบบ 4.1 เลือก
shape
4.2 เลือก
4.3 เลือก
4.4 เลือก
4.5 คลิก

5. จากนั้นจะได้ไฟล์ lsv_normal.xml เก็บอยู่ในโฟลเดอร์ drawable ให้ผู้อ่านก�ำหนดโทนสีแบบ
part
1
Gradient ในกรณีนี้ผู้เขียนก�ำหนดให้ไล่โทนสีแดง ดังรูปที่ 6-13
โทนสีแบบ
Gradient
5 กำ�หนดโทนสี
6. เพิม่ ไฟล์ Android XML Layout File ในโฟลเดอร์ layout ตัง้ ชือ่ ว่า activity_main_item.xml ท�ำหน้าที่
แสดงรายการใน ListView และก�ำหนดให้แสดงข้อความธรรมดา โดยการใช้งาน TextView จ�ำนวน
1 ตัว ดังรูปที่ 6-14
แสดงการใช้งาน
TextView
6.3 เลือก
6.1 เลือก
คลิก 6.2
6.4 คลิก

จากรูปที่ 6-14 ส่วนทีส่ ำ� คัญก็คอื การก�ำหนดให้ TextView ตัวนีใ้ ช้สพี นื้ หลัง (คุณสมบัติ Background)
แบบไล่โทนสีตามที่เราสร้างไว้ในไฟล์ที่ชื่อว่า lsv_normal นั่นเอง โดยแสดงสคริปต์ XML ได้ดังต่อไปนี้
สคริปต์ XML ที่ 6-4 พื้นฐานการลงสีใน ListView แบบไล่โทนสี (\res\layout\activity_main_item.xml)
<TextView
android:background="@drawable/lsv_normal"
</LinearLayout>

โค้ด JAVA ที่ 6-4 พื้นฐานการลงสีใน ListView แบบไล่โทนสี (\src\com.example.listviewwithcolor\Main
Activity.java)
package com.example.listviewwithcolor;
@Override
ListView lsv = (ListView) findViewById(R.id.lsvMain);
String[] str = new String[] { "รายการที่ 1", "รายการที่ 2",
"รายการที่ 3", "รายการที่ 4", "รายการที่ 5" };
R.layout.activity_main_item, R.id.tvMain, str);
}
@Override
return true;
}
}

part
1
จากรูปที่ 6-15 พบว่าแต่ละรายการใน ListView ถูกลงสีแบบไล่โทนสีตามที่เราก�ำหนดไว้นั่นเอง
การลงสีใน ListView แบบตรวจจับเหตุการณ์

ในกรณีที่ต้องการลงสีใน ListView แบบตรวจสอบเหตุการณ์ เช่น ถ้ารายการอยู่ในสถานะได้รับโฟกัส
ก็แสดงสีที่แตกต่างไปจากรายการอื่นเมื่อผู้ใช้คลิกเลือกรายการ เป็นต้น เป็นการเพิ่มความน่าสนใจของส่วน
แสดงผลใน App
ตัวอย่างที่ 6-5 การลงสีใน ListView แบบตรวจจับเหตุการณ์มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android 4.0.3 ตั้งชื่อว่า ListViewWithColor
2. ส่วนแสดงผลหลัก (activity_main.xml) เหมือนกับตัวอย่างที่แล้ว ดังรูปที่ 6-16

จากรูปที่ 6-16 ขนาดความสูงของแต่ละรายการเกิดจากการก�ำหนดที่แอตทริบิวต์ android:layout_
height ผูเ้ ขียนก�ำหนดให้มคี วามสูงของแต่ละรายการเท่ากับ 32dp โดยก�ำหนดในไฟล์ activity_main_item.xml ดังนี้
สคริปต์ XML ที่ 6-5 การลงสีใน ListView แบบตรวจจับเหตุการณ์ (\res\layout\activity_main_item.xml)
<TextView
</LinearLayout>
ในกรณีนี้ผู้เขียนตั้งโจทย์ว่า เมื่อรายการใดก็ตามอยู่ในสถานะถูกโฟกัสให้มีสีพื้นหลังเป็นแบบไล่โทนสี
แดง และถ้าผู้ใช้คลิกเลือกรายการใดก็ตามให้สีพื้นหลังเปลี่ยนเป็นแบบไล่โทนสีน�้ำเงิน
จากข้อก�ำหนดข้างต้นจึงท�ำให้ต้องสร้างสีแบบ Gradient ขึ้นมา 2 ไฟล์คือ Gradient แบบสีแดง และ
แบบสีน�้ำเงินก่อน
3. ในโฟลเดอร์ drawable ไฟล์ที่ท�ำหน้าที่เก็บโทนสีแดง ชื่อว่า lsv_normal.xml ดังรูปที่ 6-17
แสดงราย
ละเอียดของไฟล์
lsv_normal.xml
3 ไฟล์ lsv_normal.xml
จากรูปที่ 6-17 สิ่งที่เพิ่มขึ้นมาคือ

z อิลิเมนต์ <stroke>...</stroke> ท�ำหน้าที่วาดเส้นขอบให้แต่ละรายการ
z อิลิเมนต์ <padding>...</padding> ท�ำหน้าที่ก�ำหนดระยะห่างของข้อความที่ปรากฏในแต่ละ
รายการ ในกรณีนี้ก�ำหนดให้มีระยะห่างจากด้านล่าง, ซ้าย, ขวา และด้านบน 3 dp

z อิลเิ มนต์ <corners>...</corners> หมายถึง ก�ำหนดให้แต่ละรายการ บริเวณทัง
้ 4 มุมมีสว่ นโค้ง
รัศมี 5dp ผ่านทางแอตทริบิวต์ android:radius

4. ส่วนไฟล์ที่ท�ำหน้าที่เก็บโทนสีน�้ำเงินชื่อว่า lsv_press.xml ดังรูปที่ 6-18
part
1
แสดงรายละเอียด
ของไฟล์ lsv_
press.xml
4 ไฟล์ lsv_press.xml
ณ จุดนี้โทนสีที่ต้องการใช้งานครบถ้วนแล้ว ขั้นต่อไปเป็นการเลือกใช้โทนสีแบบมีเงื่อนไข โดยที่การ

เลือกโทนสีท่ีถูกเก็บอยู่ในแต่ละไฟล์ตามเงื่อนไขเหตุการณ์ อยู่ในความรับผิดชอบของอิลิเมนต์ <selector>...
</selector>
5. การเพิม่ ไฟล์ lsv_selector.xml เข้ามาในโฟลเดอร์ drawable ให้คลิกขวาเลือกค�ำสัง่ New > Other... >
Android > Android XML File ดังรูปที่ 6-19
selector เข้า
มาในโฟลเดอร์
drawable

6. จากนั้นให้เขียนสคริปต์ XML ในไฟล์ lsv_selector.xml ดังต่อไปนี้
สคริปต์ XML ที่ 6-5 การลงสีใน ListView แบบตรวจจับเหตุการณ์ (\res\drawable\lsv_selector.xml)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/lsv_normal"
android:state_pressed="false"
android:state_selected="false"/>
<item android:drawable="@drawable/lsv_press"
android:state_pressed="true"/>
<item android:drawable="@drawable/lsv_press"
android:state_pressed="false"
android:state_selected="true"/>
</selector>
จากสคริปต์ XML ข้างต้นความหมายคือ

z เมื่อแต่ละรายการ (อิลิเมนต์ <item>...</item>) อยู่ในสถานะปกติ (แอตทริบิวต์ android:state_
pressed กับแอตทริบวิ ต์ android:state_selected มีคา่ เป็น false) ให้ใช้สที อี่ ยูใ่ นไฟล์ lsv_normal
z ·เมื่อรายการใดก็ตามอยู่ในสถานะถูกคลิก (แอตทริบิวต์ android:state_pressed มีค่าเป็น true)
หรือถูกเลือก (แอตทริบวิ ต์ android:state_selected มีคา่ เป็น true) ให้ใช้สที อี่ ยูใ่ นไฟล์ lsv_press
แสดงสีพื้นหลัง
เป็นสีแดง เมื่อ
รายการได้รับ
โฟกัส (ผลจากไฟล์
lsv_normal)
แสดงสีพื้นหลัง
เป็นสีน�้ำเงิน เมื่อ
รายการถูกคลิก
เลือก (ผลจากไฟล์
lsv_press)

part
1
พื้นฐานการสร้างรายการให้ผู้ใช้เลือกด้วย Spinner
การสร้างรายการให้ผใู้ ช้เลือกอีกลักษณะหนึง่ ทีถ่ กู น�ำมาใช้สร้างเป็นส่วนแสดงผลนัน่ คือ อาศัย widget
ที่ชื่อว่า Spinner นั่นเอง
ตัวอย่างที่ 6-6 พื้นฐานการสร้างรายการให้ผู้ใช้เลือกด้วย Spinner มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า UsingSpinner
2. ที่ส่วนแสดงผลให้ใช้ Spinner จ�ำนวน 1 ตัว ดังรูปที่ 6-22

สคริปต์ XML ที่ 6-6 พื้นฐานการสร้างรายการให้ผู้ใช้เลือกด้วย Spinner (\res\layout\activity_main.xml)
<TextView
<Spinner
android:id="@+id/spinner1"
android:layout_alignParentTop="true" />
</RelativeLayout>

โค้ด JAVA ที่ 6-6 พื้นฐานการสร้างรายการให้ผู้ใช้เลือกด้วย Spinner (\src\com.example.usingspinner\Main
Activity.java)
package com.example.usingspinner;
import android.widget.Spinner;
import android.widget.AdapterView.OnItemSelectedListener;
public class MainActivity extends Activity implements OnItemSelectedListener {
@Override
Spinner spn = (Spinner) findViewById(R.id.spinner1);

spn.setOnItemSelectedListener(this);
ArrayList<String> arr = new ArrayList<String>(); 2
arr.add("รายการที่ 1");
android.R.layout.simple_spinner_item, arr);
arrAdt.setDropDownViewResource(android.R.layout.simple_spinner_item);
spn.setAdapter(arrAdt);
}
public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,long arg3) { 3

String str = arg0.getItemAtPosition(arg2).toString();
Toast.makeText(arg0.getContext(), "รายการที่ถูกเลือก : " + str,
}
public void onNothingSelected(AdapterView<?> arg0) { 4

}
@Override
return true;
}
}

part
1
4.1 เลือก
จากรูปที่ 6-23 เป็นการใช้ Spinner แบบ simple_spinner_item

1. เริ่มต้นก�ำหนดให้ Activity ปัจจุบันมีเหตุการณ์ OnItemSelectedListener() (เหตุการณ์ตรวจ
สอบรายการที่ถูกเลือกใน Spinner) จากนั้นในเหตุการณ์ onCreate() ที่ส่วนแสดงผล ให้อ่าน
spinner1 เก็บไว้ที่ตัวแปรออบเจ็กต์ Spinner ที่ชื่อว่า spn ก่อน และก�ำหนดให้มีเหตุการณ์
OnItemSelectedListener() ผ่านทางเมธอด setOnItemSelectedListener()
\src\com.example.usingspinner\MainActivity.java
@Override

2. ผู้เขียนสร้างรายการขึ้นมา 5 รายการผ่านทางตัวแปรออบเจ็กต์ ArrayList แบบข้อความ String

ที่ชื่อว่า arr จากนั้นสั่งให้แสดงใน spn ผ่านทางตัวแปรออบเจ็กต์ ArrayAdapter ที่ชื่อว่า arrAdt
ArrayList<String> arr = new ArrayList<String>();
android.R.layout.simple_spinner_item, arr);
arrAdt.setDropDownViewResource(android.R.layout.simple_spinner_item);
spn.setAdapter(arrAdt);
}

3. เมื่อผู้ใช้คลิกเลือกรายการที่ปรากฏขึ้นมาส่งผลให้เกิดเหตุการณ์ onItemSelected() ให้ท�ำ
อ่านรายการที่ถูกเลือกผ่านทางเมธอด getItemAtPosition()
แสดงรายการที่ถูกเลือกด้วยข้อความแบบ Toast Notification
public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
}
4. ในกรณีที่ผู้ใช้ไม่ได้เลือกรายการใดใน Spinner ที่ชื่อว่า spn ส่งผลให้เกิดเหตุการณ์ onNothing-

Selected() ในกรณีนี้ผู้เขียนไม่ได้เขียนโค้ดท�ำงานใดๆ
public void onNothingSelected(AdapterView<?> arg0) {
}
การแสดงรายการใน Spinner แบบมีรูปภาพก�ำกับแต่ละ

รายการ
ในกรณีที่ต้องการใส่รูปภาพก�ำกับแต่ละรายการที่แสดงอยู่ใน Spinner ก็สามารถท�ำได้เช่นกัน
ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 6-7 การแสดงรายการใน Spinner แบบมีรูปภาพก�ำกับแต่ละรายการมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SpinnerWithImage
activity_main.xml

part
1
สคริปต์ XML ที่ 6-7 การแสดงรายการใน Spinner แบบมีรปู ภาพก�ำกับแต่ละรายการ (\res\layout\activity_main.xml)
<Spinner
android:id="@+id/spinner1"
android:layout_marginTop="16dp" />
</RelativeLayout>
3. เราต้องการแก้ไขส่วนแสดงผลใน spinner1 ใหม่ (แสดงรูปภาพก�ำกับหน้าข้อความแต่ละรายการ)

ให้เพิม่ ไฟล์ Android XML Layout ใหม่เข้ามาในโฟลเดอร์ Layout ตัง้ ชือ่ ว่า spinnerlist.xml ดังรูปที่
6-25
spinnerlist.xml
จากรูปที่ 6-25 ผู้เขียนก�ำหนดให้แสดงรูปภาพก�ำกับอยู่ด้านหน้าข้อความของแต่ละรายการ ซึ่งแสดง

สคริปต์ XML ได้ดังต่อไปนี้
สคริปต์ XML ที่ 6-7 การแสดงรายการใน Spinner แบบมีรปู ภาพก�ำกับแต่ละรายการ (\res\layout\spinnerlist.xml)
android:orientation="horizontal">
<ImageView
android:src="@drawable/ic_launcher" />
<TextView
</LinearLayout>

โค้ด JAVA ที่ 6-7 การแสดงรายการใน Spinner แบบมีรูปภาพก�ำกับแต่ละรายการ (\src\com.example.spinnerwi-
thimage\MainActivity.java)
package com.example.spinnerwithimage;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Spinner;
public class MainActivity extends Activity implements OnItemSelectedListener { 1

String[] arrMain = { "เมนู 1", "เมนู 2", "เมนู 3", "เมนู 4", "เมนู 5" };
@Override
R.layout.spinnerlist, R.id.tvMain, arrMain);
spn.setAdapter(adt);
}
@Override
public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
}
@Override
return true;
}

part
1
5.1 เลือก 5.2 แสดงผล
1. ก�ำหนดรายการเริ่มต้นให้มี 5 รายการผ่านทางตัวแปรออบเจ็กต์ spn
\src\com.example.spinnerwithimage\MainActivity.java
String[] arrMain = { "เมนู 1", "เมนู 2", "เมนู 3", "เมนู 4", "เมนู 5" };
@Override
2. ส่วนทีส่ ำ� คัญทีส่ ดุ ก็คอื การน�ำรูปแบบแสดงผลทีอ่ ยูใ่ น spinnerlist มาแสดงรายการทีม่ อี ยู่ (ตัวแปร

arrMain) ในตัวแปรออบเจ็กต์ Spinner ทีช่ อื่ ว่า spn ผ่านทางเมธอด setAdapter() ร่วมกับตัวแปร
ออบเจ็กต์ ArrayAdapter ที่ชื่อว่า adt
\src\com.example.spinnerwithimage\MainActivity.java
R.layout.spinnerlist, R.id.tvMain, arrMain);
spn.setAdapter(adt);
}
เนื้อหาที่น�ำเสนอในบทนี้จะเห็นได้ว่า มีการใช้เทคนิคที่ผู้เขียนน�ำเสนอในบทก่อนหน้านี้เข้ามาประกอบ
รวมกันเป็นส่วนแสดงผลที่ใกล้เคียงกับ App ที่ผู้อ่านเคยพบเห็นได้ใน Play Store

7
การสร้างส่วนแสดงผลแบบช่องตารางด้วย
GridView
ส่วนแสดงผลแบบช่องตารางเป็นส่วนแสดงผลอีกลักษณะหนึ่งที่ถูกน�ำมาใช้ใน Android App โดยอยู่
ในความรับผิดชอบของ widget ทีช่ อื่ ว่า GridView เป็นส่วนแสดงผลทีเ่ ราคุน้ เคยกันเป็นอย่างดี เช่น รายการ App
ที่ติดตั้งอยู่ในระบบปฏิบัติการ Android ก็ใช้ส่วนแสดงผลแบบนี้เช่นกัน
พื้ น ฐานการสร้ า งส่ ว นแสดงผลแบบช่ อ งตารางด้ ว ย

GridView
ส่วนแสดงผลแบบช่องตารางถือเป็นส่วนแสดงผลอีกลักษณะหนึ่งที่ได้รับความนิยมเป็นอย่างมากใน
Android App เพราะว่ามีการแบ่งสัดส่วนชัดเจนว่า เมือ่ ผูใ้ ช้คลิกเลือกทีช่ อ่ งใด (เซลล์ใด) แล้วต้องการให้ทำ� อะไร
ซึ่งการแสดงข้อมูลในแต่ละช่องในขั้นต้นก็คือ แสดงข้อความเพียงอย่างเดียว ดังตัวอย่างที่ 7-1
ตัวอย่างที่ 7-1 พื้นฐานการสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleGridView
ค่าเริ่มต้นของ GridView ถูกก�ำหนดให้แสดงแบบ 3 คอลัมน์ผ่านทางแอตทริบิวต์ android:num
Columns ดังสคริปต์ XML ต่อไปนี้
สคริปต์ XML ที่ 7-1 พืน้ ฐานการสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView (\res\layout\activity_main.xml)
<GridView
android:id="@+id/gvMain"
android:numColumns="3" >
</GridView>
</RelativeLayout>

โค้ด JAVA ที่ 7-1 พื้นฐานการสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView (\src\com.example.simplegrid-
view\MainActivity.java)
package com.example.simplegridview;
import android.widget.GridView;

String[] mainData = new String[] { "รายการ 1", "รายการ 2", "รายการ 3",
"รายการ 4", "รายการ 5", "รายการ 6", "รายการ 7", "รายการ 8",
"รายการ 9", "รายการ 10" };
@Override
final GridView gv = (GridView) findViewById(R.id.gvMain);

android.R.layout.simple_list_item_1, mainData);
gv.setAdapter(adt);
gv.setOnItemClickListener(new OnItemClickListener() { 4
public void onItemClick(AdapterView<?> parent, View v,
String str = ((TextView) v).getText().toString();

"รายการที่ถูกเลือก
: " + str, Toast.LENGTH_SHORT).show();
part
1
}
});
}
@Override
return true;
}
}
4.1 เลือก
จากรูปที่ 7-2 ผูเ้ ขียนก�ำหนดให้คา่ เริม่ ต้นมี 10 รายการ ส่งผลให้สว่ นแสดงผลทีไ่ ด้เป็นแบบ 3 คอลัมน์
4 แถว
1. เริ่มต้นก�ำหนดให้ 10 รายการเก็บไว้ในตัวแปรอาร์เรย์ข้อความที่ชื่อว่า MainData ก่อน
\src\com.example.simplegridview\MainActivity.java
String[] mainData = new String[] { "รายการ 1", "รายการ 2", "รายการ 3",
"รายการ 4", "รายการ 5", "รายการ 6", "รายการ 7", "รายการ 8",
"รายการ 9", "รายการ 10" };
2. ในเหตุการณ์ onCreate() ที่ส่วนแสดงผลให้หา GridView ที่ชื่อว่า gvMain เก็บไว้ที่ตัวแปร

ออบเจ็กต์ gv ก่อน
@Override
บทที่ 7 การสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView 157

3. สร้างตัวแปรออบเจ็กต์ ArrayAdapter แบบข้อความที่ชื่อว่า adt ขึ้นมาอ่านรายการที่เก็บอยู่ใน
ตัวแปรอาร์เรย์ mainData และก�ำหนดให้แสดงรายการแบบ simple_list_item_1 ให้กบั ตัวแปร gv
ร่วมกับเมธอด setAdapter()
android.R.layout.simple_list_item_1, mainData);
gv.setAdapter(adt);
4. ส่วนการตรวจสอบรายการที่ถูกผู้ใช้คลิกอยู่ในเหตุการณ์ OnItemClickListener() ซึ่งอ่านค่าได้

จากเมธอด getText() และแสดงรายการที่ถูกเลือกด้วยข้อความแบบ Toast Notification
gv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
"รายการที่ถูกเลือก : " + str, Toast.LENGTH_SHORT).show();
}
});
}
การแสดงข้อความและรูปภาพในแต่ละช่องตาราง
ในกรณีที่ต้องการเพิ่มความน่าสนใจของส่วนแสดงผลแบบช่องตาราง เราสามารถใช้รูปภาพประกอบ
ในแต่ละเซลล์ได้อีกด้วย ซึ่งเป็นรูปแบบที่สามารถพบเห็นได้ในอุปกรณ์ที่ติดตั้งระบบปฏิบัติการ Android ดัง
ตัวอย่างต่อไปนี้
ตัวอย่างที่ 7-2 การแสดงข้อความและรูปภาพในแต่ละช่องตารางมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า GridViewWithImage
2. เตรียมไฟล์รปู ภาพทีต่ อ้ งการน�ำมาใช้ในแต่ละเซลล์ ซึง่
มีข้อแนะน�ำว่า ควรจะเป็นรูปภาพที่มีขนาดเท่ากัน ใน
กรณีนี้ผู้เขียนใช้รูปภาพขนาด 64×64 พิกเซล โดยลาก
มาเก็บไว้ในโฟลเดอร์ drawable-hdpi ก่อน ดังรูปที่ 7-3
ทั้ง 8 รูป
ในโฟลเดอร์
drawable-hdpi
ในกรณีนี้ผู้เขียนต้องการสร้าง 8 เซลล์จึงเตรียมไฟล์รูปภาพไว้ 8 รูป

3. ที่ส่วนแสดงผลหลัก (activity_main.xml) ให้ใช้ GridView จ�ำนวน 1 ตัว ดังรูปที่ 7-4
part
1

สคริปต์ XML ที่ 7-2 การแสดงข้อความและรูปภาพในแต่ละช่องตาราง (\res\layout\activity_main.xml)
<GridView
android:horizontalSpacing="5dp"
android:numColumns="3"
android:verticalSpacing="5dp" >
</GridView>
</RelativeLayout>
จากสคริปต์ XML ข้างต้นที่น่าสนใจคือ

z ก�ำหนดให้แสดง 3 คอลัมน์ผ่านทางแอตทริบิวต์ android:numColumns
z ก�ำหนดระยะห่างระหว่างคอลัมน์ตามแนวนอนและแนวตั้ง 5dp ผ่านทางแอตทริบิวต์ android:
horizontalSpacing กับแอตทริบิวต์ android:verticalSpacing ตามล�ำดับ

4. เพิ่มไฟล์ Android XML Layout File ในโฟลเดอร์ layout เพื่อออกแบบแต่ละเซลล์ใหม่ตั้งชื่อว่า
gridcell.xml ดังรูปที่ 7-5
รูปแบบแต่ละ
เซลล์ใหม่
จากรูปที่ 7-5 ผูเ้ ขียนต้องการให้แต่ละเซลล์ แสดงข้อความด้านบนผ่านทาง TextView ทีช่ อื่ ว่า tv และ
แสดงรูปภาพผ่านทาง ImageView ที่ชื่อว่า img ดังสคริปต์ XML ต่อไปนี้
สคริปต์ XML ที่ 7-2 การแสดงข้อความและรูปภาพในแต่ละช่องตาราง (\res\layout\gridcell.xml)
<TextView
android:id="@+id/tv"
<ImageView
android:id="@+id/img"
</LinearLayout>
จากสคริปต์ XML ข้างต้นก�ำหนดให้ ImageView ทีช่ อื่ ว่า img แสดงรูปภาพเริม่ ต้นชือ่ ว่า pic01 (.png)
โค้ด JAVA ที่ 7-2 การแสดงข้อความและรูปภาพในแต่ละช่องตาราง (\src\com.example.gridviewwithimage\
MainActivity.java)
package com.example.gridviewwithimage;
import android.content.Context;

part
1
import android.widget.BaseAdapter;

Integer[] picLists = { R.drawable.pic01, R.drawable.pic02,
R.drawable.pic03, R.drawable.pic04, R.drawable.pic05,
R.drawable.pic06, R.drawable.pic07, R.drawable.pic08 };
public class gvAdapter extends BaseAdapter { 2

private Context _Context;
public gvAdapter(Context c) {
_Context = c;
}
public int getCount() {

return picLists.length;
}
public Object getItem(int arg0) {

return picLists[arg0];
}
public long getItemId(int arg0) {

return 0;
}
public View getView(int arg0, View arg1, ViewGroup arg2) { 3

View v;
if (arg1 == null) {
v = new View(_Context);
LayoutInflater inflater = getLayoutInflater();
v = inflater.inflate(R.layout.gridcell, arg2, false);
} else {
v = (View) arg1;
}
ImageView img = (ImageView) v.findViewById(R.id.img); 4

TextView tv = (TextView) v.findViewById(R.id.tv);
img.setImageResource(picLists[arg0]);
tv.setText("รูปที่ : " + String.valueOf(arg0 + 1));
return v;
}
}
@Override

GridView gv = (GridView) findViewById(R.id.gvMain);
gvAdapter adt = new gvAdapter(this);
gv.setAdapter(adt);
}
@Override
return true;
}
}
จากรูปที่ 7-6 พบว่าในแต่ละเซลล์แสดงข้อความอยู่ด้านบนโดยมีรูปภาพอยู่ด้านล่างข้อความ

1. เริ่มต้นให้อ่านล�ำดับไฟล์รูปภาพที่ต้องการน�ำมาใช้ในแต่ละเซลล์เก็บไว้ที่ตัวแปรอาร์เรย์ Integer
ที่ชื่อว่า picLists ในกรณีนี้คือ ไฟล์รูปภาพ pic01.png ถึง pic08.png ส่งผลให้มีล�ำดับอ้างอิงไฟล์
รูปภาพตั้งแต่ล�ำดับที่ 0 (ไฟล์ pic01.png) ถึงล�ำดับที่ 7 (ไฟล์ pic08.png)
\src\com.example.gridviewwithimage\MainActivity.java
2. การแสดงข้อความและรูปภาพในแต่ละเซลล์ของ GridView ไม่มีคลาสใดๆ ของ Android ที่ท�ำ

หน้าที่นี้เราต้องสร้างคลาสใหม่ขึ้นมาท�ำหน้าที่นี้เอง ผู้เขียนตั้งชื่อว่าคลาส gvAdapter ก�ำหนดให้
สืบทอด (extends) มาจากคลาสแม่ BaseAdapter โดยสร้างเมธอดขึ้นมาอีก 4 เมธอดกล่าวคือ
เมธอด getCount() ท�ำหน้าที่คืนค่าเป็นจ�ำนวนรูปภาพที่มีอยู่ โดยอ่านค่าได้จากคุณสมบัติ
length ของตัวแปร picLists

เมธอด getItem() ท�ำหน้าที่คืนค่าเป็นรายการ (ข้อมูล) เท่าที่มีอยู่ ผู้อ่านสามารถระบุล�ำดับ
อ้างอิงให้กับเมธอดนี้เพื่ออ่านข้อมูลชุดที่สนใจ
เมธอด getItemId() ท�ำหน้าที่คืนค่าเป็นรายการ (ข้อมูล) เท่าที่มีอยู่เช่นกัน แต่ใช้ Id ใน
กรณีนี้ไม่มีการใช้งานใดๆ จึงไม่ต้องเขียนโค้ด JAVA แต่อย่างใด

part
1
public class gvAdapter extends BaseAdapter {
_Context = c;
}

}

}

return 0;
}
3. เมธอดที่มีความส�ำคัญมากที่สุดก็คือ เมธอดที่ชื่อว่า getView คืนค่าเป็นส่วนแสดงผลตามที่เรา

ต้องการ (คืนค่าเป็นคลาส View) โดยการตรวจสอบว่า
ถ้าพารามิเตอร์ arg1 มีค่าเท่ากับ null ตีความได้ว่าไม่มีส่วนแสดงผลให้ใช้เมธอด inflate()
ของตัวแปรออบเจ็กต์ LayoutInflater ที่ชื่อว่า inflater เข้ามาท�ำหน้าที่อ่านโครงสร้าง Layout

ทีอ่ ยูใ่ นไฟล์ gridcell (.xml) ทีเ่ ราเป็นผูส้ ร้างเอาไว้กอ่ นหน้านี้ และเก็บโครงสร้างดังกล่าวไว้ใน
ตัวแปรออบเจ็กต์ View ที่ชื่อว่า v
public View getView(int arg0, View arg1, ViewGroup arg2) {
View v;
if (arg1 == null) {
} else {
v = (View) arg1;
}
แต่ถ้าพารามิเตอร์ arg1 ไม่เท่ากับ null ตีความได้ว่า มีส่วนแสดงผลอยู่ให้คืนค่าเป็นส่วน

แสดงผลดังกล่าวผ่านทางพารามิเตอร์ arg1 และเก็บไว้ที่ตัวแปรออบเจ็กต์ v เช่นกัน
ไม่ว่าจะเป็นกรณีใดก็ตามส่งผลให้ตัวแปรออบเจ็กต์ v เก็บโครงสร้าง Layout ที่ออกแบบไว้ในไฟล์
gridcell.xml แล้ว

4. ก�ำหนดให้แสดงรูปภาพและข้อความตามที่เราออกแบบไว้ โดยที่
·ให้อ่าน ImageView ที่ชื่อว่า img ผ่านทางตัวแปรออบเจ็กต์ v มาเก็บไว้ที่ตัวแปรออบเจ็กต์
img
·ให้อ่าน TextView ที่ชื่อว่า tv ผ่านทางตัวแปรออบเจ็กต์ v มาเก็บไว้ที่ตัวแปรออบเจ็กต์ tv
ต่อมาใช้เมธอด setImageResource() เข้ามาท�ำหน้าทีอ่ า่ นล�ำดับไฟล์รปู ภาพทีเ่ ก็บอยูใ่ นตัวแปร picLists

โดยล�ำดับของรูปภาพ อ่านได้จากพารามิเตอร์ arg0 และสั่งให้แสดงรูปภาพในตัวแปรออบเจ็กต์ img
ส่วนข้อความให้ใช้เมธอด setText() ของตัวแปรออบเจ็กต์ tv แสดงข้อความ “รูปที่ : ” รวมกับล�ำดับ
รูปภาพบวกด้วย 1 (เพราะว่าล�ำดับแรกเริ่มต้นที่ 0)
รูปภาพและข้อความที่ได้ถือเป็นส่วนแสดงผลที่เราต้องการถูกเก็บไว้ในตัวแปรออบเจ็กต์ v และถือว่า
เป็นค่าส่งกลับของเมธอด getView() นี้อีกด้วย
ImageView img = (ImageView) v.findViewById(R.id.img);
return v;
}
}
5. ส่วนการเรียกใช้อยู่ในเหตุการณ์ onCreate() ที่ส่วนแสดงผล ให้หา GridView ที่ชื่อว่า gvMain

เก็บไว้ที่ตัวแปรออบเจ็กต์ GridView ที่ชื่อว่า gv ก่อน จากนั้นสร้างตัวแปรออบเจ็กต์ gvAdapter
ที่ชื่อว่า adt ขึ้นมาท�ำหน้าที่สร้างส่วนแสดงผลให้กับตัวแปรออบเจ็กต์ gv ก็จะได้ส่วนแสดงผล
ตามที่ต้องการ
@Override
GridView gv = (GridView) findViewById(R.id.gvMain);
gv.setAdapter(adt);
}

part
1
การใช้ตัวเลือกแบบ CheckBox ใน GridView
ในกรณีทตี่ อ้ งการให้ผใู้ ช้งานสามารถเลือกแต่ละเซลล์ได้มากกว่า 1 เซลล์ในเวลาเดียวกัน เราสามารถ
ใช้ตัวเลือกแบบ CheckBox เข้ามาแสดงสถานะของเซลล์ที่ถูกเลือกหรือไม่เลือกได้อีกด้วย ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 7-3 การใช้ตัวเลือกแบบ CheckBox ใน GridView มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า GridViewWithImage
2. เพิ่มไฟล์รูปภาพที่ต้องการใช้ไว้ในโฟลเดอร์ที่ชื่อว่า drawable-hdpi ในกรณีนี้ผู้เขียนยังคงใช้ไฟล์
รูปภาพเดิมจ�ำนวน 8 รูป
3. เพิ่ม Android XML Layout File เข้ามาในโฟลเดอร์ layout ตั้งชื่อว่า gridcell.xml ดังรูปที่ 7-7
จากรูปที่ 7-7 พบว่า ผู้เขียนก�ำหนดให้แสดงตัวเลือกแบบ ChekcBox ก่อนแล้วตามด้วยรูปภาพและ

ข้อความ ดังสคริปต์ XML ต่อไปนี้
สคริปต์ XML ที่ 7-3 การใช้ตัวเลือกแบบ CheckBox ใน GridView (\res\layout\gridcell.xml)
<CheckBox
android:id="@+id/chk"
<ImageView
android:id="@+id/img"
<TextView
android:id="@+id/tv"
</LinearLayout>
จากสคริปต์ XML ข้างต้นผูเ้ ขียนเลือกใช้ LinearLayout แบบแนวนอน (แอตทริบวิ ต์ android:orientation

เท่ากับ horizontal)

ส่วนแสดงผลหลัก
ใน activity_main.
xml
จากรูปที่ 7-8 สิ่งที่ต้องการจากส่วนแสดงผลที่มีการใช้ตัวเลือกแบบ CheckBox มี 4 แบบคือ

z การเลือกทีละ 1 ตัวเลือก
z การเลือกทุกตัวเลือกเท่าที่มีอยู่ในส่วนแสดงผล
z การยกเลิกทุกตัวเลือกเท่าที่มีอยู่ในส่วนแสดงผล
z การตรวจสอบรายการที่อยู่ในสถานะถูกเลือก

สคริปต์ XML ที่ 7-3 การใช้ตัวเลือกแบบ CheckBox ใน GridView (\res\layout\activity_main.xml)
android:id="@+id/RelativeLayout1"
<Button
android:id="@+id/cmdCheckAll"
android:text="@string/strCheckAll" />
<Button
android:id="@+id/cmdClearAll"
android:layout_toRightOf="@+id/cmdCheckAll"
android:text="@string/strClearAll" />
<Button
android:id="@+id/cmdGetAll"

part
1
android:layout_toRightOf="@+id/cmdClearAll"
android:text="@string/strGetAll" />
<GridView
android:layout_below="@+id/cmdCheckAll"
android:numColumns="2" >
</GridView>
</RelativeLayout>
จากสคริปต์ XML ข้างต้น ในกรณีนผี้ เู้ ขียนก�ำหนดให้แสดงแบบ 2 คอลัมน์เท่านัน้ ผ่านทางแอตทริบวิ ต์

android:numColumns
โค้ด JAVA ที่ 7-3 การใช้ตัวเลือกแบบ CheckBox ใน GridView (\src\com.example.gridviewwithimage\Main-
Activity.java)
package com.example.gridviewwithimage;
import android.view.View.OnClickListener;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.LinearLayout;

public class gvAdapter extends BaseAdapter {

_Context = c;
}


}

}

return 0;
}
public View getView(int arg0, View arg1, ViewGroup arg2) {

View v;
if (arg1 == null) {
} else {
v = (View) arg1;
}
ImageView img = (ImageView) v.findViewById(R.id.img);
return v;
}
}
@Override
gv.setAdapter(adt);
Button cmd_CheckAll = (Button) findViewById(R.id.cmdCheckAll); 2

cmd_CheckAll.setOnClickListener(new OnClickListener() {
int adtCount = gv.getAdapter().getCount();
for (int i = 0; i < adtCount; i++) {
LinearLayout lay = (LinearLayout) gv.getChildAt(i);
CheckBox chk = (CheckBox) lay.findViewById(R.id.chk);
chk.setChecked(true);
}
}
});
Button cmd_ClearAll = (Button) findViewById(R.id.cmdClearAll); 3

cmd_ClearAll.setOnClickListener(new OnClickListener() {

part
1
chk.setChecked(false);
}
}
});
Button cmd_GetAll = (Button) findViewById(R.id.cmdGetAll); 4

cmd_GetAll.setOnClickListener(new OnClickListener() {
TextView tv = (TextView) lay.findViewById(R.id.tv);
if (chk.isChecked()) {
Toast.makeText(MainActivity.this, tv.getText(),
}
}
}
});
}
@Override
return true;
}
}
กรณีเลือกทุกตัวเลือก แสดงดังรูปที่ 7-9
กรณีเลือกทุกตัว
เลือก คลิก 5.1

กรณีตรวจสอบรายการที่ถูกเลือก แสดงดังรูปที่ 7-10

กรณีตรวจสอบ
รายการที่อยู่ใน 5.4 เลือก
สถานะถูกเลือก
เลือก 5.3
1. เริม่ ต้นทีส่ ว่ นแสดงผลสัง่ ให้อา่ น GridView ทีช่ อื่ ว่า gvMain ไว้ทตี่ วั แปรออบเจ็กต์ gv ใช้สว่ นแสดง
ผลที่ได้จากตัวแปรออบเจ็กต์ gvAdapter ที่ชื่อว่า adt ร่วมกับเมธอด setAdaper()
@Override
gv.setAdapter(adt);
2. การก�ำหนดให้ตวั เลือกอยูใ่ นฐานะถูกเลือกทัง้ หมด (ปุม่ CheckAll) ในเหตุการณ์ Click() ท�ำได้โดย

สั่งให้วนลูปตามจ�ำนวนรายการที่แสดงอยู่ในส่วนแสดงผล (getAdapter().getCount()) ในแต่ละ
รอบของการวนลูป ให้รายการแต่ละเซลล์ที่ปรากฏขึ้นมาถูกก�ำหนดให้อยู่ในภายใน Layout แบบ
LinearLayout จึงต้องหาตัวเลือก CheckBox ที่ชื่อว่า chk (R.id.chk) ผ่านทางตัวแปรออบเจ็กต์
LinearLayout ทีช่ อื่ ว่า lay เก็บไว้ทตี่ วั แปรออบเจ็กต์ CheckBox ทีช่ อื่ ว่า chk และก�ำหนดให้อยูใ่ น
สถานะถูกเลือกผ่านทางเมธอด setChecked() ให้ค่าเท่ากับ true
Button cmd_CheckAll = (Button) findViewById(R.id.cmdCheckAll);
cmd_CheckAll.setOnClickListener(new OnClickListener() {
chk.setChecked(true);
}
}
});

part
3. กรณีปมุ่ ClearAll มีหลักการท�ำงานเช่นเดียวกับปุม่ CheckAll แตกต่างกันตรงทีก่ ารก�ำหนดสถานะ

1
ของตัวเลือกแบบ CheckBox ให้อยู่ในสถานะไม่ถูกเลือก (มีค่าเป็น false)
Button cmd_ClearAll = (Button) findViewById(R.id.cmdClearAll);
cmd_ClearAll.setOnClickListener(new OnClickListener() {
chk.setChecked(false);
}
}
});
4. ส่วนการอ่านเฉพาะเซลล์ที่ถูกเลือก ที่ส�ำคัญคือเราสนใจเฉพาะเซลล์ที่ตัวเลือก CheckBox ที่

ชื่อว่า chk อยู่ในสถานะถูกเลือก (chk.isChecked()) เท่านั้นและสั่งให้แสดงข้อความแบบ Toast
Notification
Button cmd_GetAll = (Button) findViewById(R.id.cmdGetAll);
cmd_GetAll.setOnClickListener(new OnClickListener() {
TextView tv = (TextView) lay.findViewById(R.id.tv);
if (chk.isChecked()) {
Toast.makeText(MainActivity.this, tv.getText(),
}
}
}
});
}
การสร้างส่วนแสดงผลแบบช่องตารางด้วย GridView ไม่มคี วามซับซ้อนแต่อย่างใด เนือ้ หาทีเ่ ลือกมา
น�ำเสนอในบทนี้ผู้อ่านสามารถน�ำไปประยุกต์ใช้ได้เป็นอย่างดี

8
ระบบเมนูใน Android
เมนู (Menu) ถือเป็นองค์ประกอบทีม่ คี วามส�ำคัญทีส่ ดุ เพราะว่าไม่วา่ จะพัฒนา Android App ประเภทใด
ก็ตาม Android App ต้องมีระบบเมนูเพือ่ ให้ผใู้ ช้งานสามารถเข้าถึงส่วนต่างๆ ทีอ่ ยูใ่ น App นัน่ เอง และยังรวมไปถึง
การรับค�ำสัง่ จากผูใ้ ช้งานเพือ่ สัง่ ให้ App ท�ำงานอีกด้วย ในบทนีเ้ ราจะมาดูวา่ Android App รองรับเมนูแบบใดบ้าง
ท�ำความรู้จักกับระบบเมนูใน Android App

Android App มีระบบเมนูหลายลักษณะ เราสามารถใช้ประโยชน์จากเมนูเพื่อน�ำทางให้กับผู้ใช้งาน
เข้าไปสู่ส่วนต่างๆ ใน App ได้เป็นอย่างดี
ตัวอย่างที่ 8-1 ท�ำความรู้จักกับระบบเมนูใน Android App มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleMenu
2. ระบบเมนูพื้นฐานของ Android App ถูกเก็บอยู่ในโฟลเดอร์ menu (\res\menu) ของโปรเจ็กต์ ซึ่ง
เก็บอยู่ในไฟล์ที่ชื่อว่า activiy_main.xml ดังรูปที่ 8-1
แสดงไฟล์ activity_
main.xml ที่ใช้เก็บ
โครงสร้างเมนู
3. การเพิ่มเมนูให้ดับเบิลคลิกไฟล์ activity_main.xml เพื่อเพิ่มรายการเมนูตามที่ต้องการ โดยการ
คลิกปุ่ม ดังรูปที่ 8-2
รายการเมนูย่อย
3.1 คลิก
3.2 เลือก
3.3 คลิก
3.4 เลือก 3.5 กำ�หนดข้อความ
จากรูปที่ 8-2 สิ่งที่เราต้องก�ำหนดในขั้นต้นมี 2 ส่วนคือ

z แอตทริบิวต์ Id หมายถึง ชื่อเมนู
z แอตทริบิวต์ Title หมายถึง ข้อความที่ปรากฏในส่วนแสดงผล
เมนูย่อย 3 เมนู

4. ผู้อ่านสามารถคลิกแท็บ activity_main.xml ด้านล่าง เพื่อแสดงโครงสร้างเมนูที่ได้แบบ XML
part
1
ดังสคริปต์ต่อไปนี้
สคริปต์ XML ที่ 8-1 ท�ำความรู้จักกับระบบเมนูใน Android App (\res\menu\activity_main.xml)
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_settings"
android:title="@string/menu_settings"
android:orderInCategory="100"
android:showAsAction="never" >
</item>
<item android:id="@+id/mnu1" android:title="เมนู 1"></item>
</menu>
โดยปกติแล้วส่วนแสดงผลปัจจุบันอยู่ในความรับผิดชอบของ Activity ที่ชื่อว่า MainActiviy ซึ่งไม่ได้

ก�ำหนดให้มีการตรวจสอบการคลิกเลือกเมนูใดๆ เราจึงต้องก�ำหนดให้ส่วนแสดงผลมีการตรวจสอบเสียก่อน
5. ที่ไฟล์ MainActivity.java ให้คลิกเมนู Source > Override/Implement Methods... ดังรูปที่ 8-4
เหตุการณ์ที่ชื่อว่า
onOptionsItem
Selected(MenuItem)
5.1 เลือก
เลือก 5.2
5.3 คลิก
จากรูปที่ 8-4 ให้ผอู้ า่ นสร้างเหตุการณ์ทชี่ อื่ ว่า onOptionsItemSelected(MenuItem) เพือ่ ให้ Activity
สามารถตรวจสอบการคลิกเมนูได้นั่นเอง
บทที่ 8 ระบบเมนูใน Android 175
โค้ด JAVA ที่ 8-1 ที่ 8-1 ท�ำความรู้จักกับระบบเมนูใน Android App (\src\com.example.simplemenu\MainAc-
tivity.java)
package com.example.simplemenu;
import android.view.MenuItem;

@Override
}
@Override
public boolean onOptionsItemSelected(MenuItem item) { 1
{
switch (item.getItemId()) {
case R.id.mnu1: 2
Toast.makeText(MainActivity.this, "คุณเลือกเมนู 1",
return true;
case R.id.mnu2:
return true;
case R.id.mnu3:
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
@Override
return true;
}
}

part
1
7.2 เลือก
จากรูปที่ 8-5 ถ้าผู้ใช้งานคลิกปุ่ม Menu เป็นการเปิดเมนูของส่วนแสดงผลตามที่เราสร้างขึ้นมา และ

มีการตรวจสอบเมนูที่ถูกคลิกเลือกด้วย
1. ส่วนส�ำคัญอยู่ที่วิธีการตรวจสอบเมนูที่ถูกคลิกเลือกอยู่ในเหตุการณ์ onOptionsItemSelected()
สามารถตรวจสอบได้จากพารามิเตอร์ที่ชื่อว่า item ร่วมกับเมธอด getItemId()
\src\com.example.simplemenu\MainActivity.java
@Override
public boolean onOptionsItemSelected(MenuItem item) {
{
2. การตรวจสอบเมนูตา่ งๆ มีหลักการเหมือนกัน เช่น เมนู 1 ให้ตรวจสอบผ่านทางชือ่ เมนู (แอตทริบวิ ต์ id)

ของคลาส R
case R.id.mnu1:
return true;

การสร้างเมนู About Me
เราสามารถใช้ฟีเจอร์ของการสร้างเมนูมาท�ำเมนู About Me ซึ่งท�ำหน้าที่อธิบายรายละเอียดของ
ผู้พัฒนา App ได้ ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 8-2 การสร้างเมนู About Me มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า AboutMe
2. เริ่มต้นสร้างข้อความที่ชื่อว่า strAbout ในไฟล์ strings.xml (\res\values) โดยก�ำหนดข้อความ
ตามที่ต้องการในกรณีนี้คือข้อความ “About Me”
strAbout

โค้ด JAVA ที่ 8-2 การสร้างเมนู About Me (\src\com.example.aboutme\MainActivity.java)
package com.example.aboutme;
@Override
}
@Override
public boolean onCreateOptionsMenu(Menu menu) { 2
menu.add(0, 0, 0, R.string.strAbout);
return super.onCreateOptionsMenu(menu);
}

@Override
part
1
Toast.makeText(MainActivity.this, "คุณเลือกเมนู About Me",
}
}
จากรูปที่ 8-7 ผูอ้ า่ นสามารถน�ำไปประยุกต์ใช้งานร่วมกับไดอะล็อกบ็อกซ์ตา่ งๆ ที่ Android App รองรับ

เพื่อแสดงรายละเอียด About Me ได้ตามต้องการ
1. โดยปกติแล้วเมือ่ สร้างโปรเจ็กต์ Android ขึน้ มาใน Eclipse จะมีการก�ำหนดให้ Activity มีเหตุการณ์
ที่ชื่อว่า onCreateOptionsMenu() ว่างๆ ขึ้นมาให้โดยอัตโนมัติ ซึ่งเราสามารถเพิ่มเมนูให้กับ
เหตุการณ์นี้ได้เช่นกัน โดยอาศัยพารามิเตอร์ที่ชื่อว่า menu ในกรณีนี้สร้างเมนูจากข้อความที่ชื่อ
ว่า strAbout ผ่านทางคลาส R
\src\com.example.aboutme\MainActivity.java
@Override
menu.add(0, 0, 0, R.string.strAbout);
return super.onCreateOptionsMenu(menu);
}

2. ส่วนการตรวจสอบอยู่ในเหตุการณ์ onOptionsItemSelected() ซึ่งแสดงข้อความด้วย Toast
Notification
\src\com.example.aboutme\MainActivity.java
@Override
Toast.makeText(MainActivity.this, "คุณเลือกเมนู About Me",
}
การสร้างเมนูแบบ Popup ด้วยคลาส PopupMenu

เมนูแบบ Popup หมายถึง เมนูที่ปรากฏลอยขึ้นมาในส่วนแสดงผล ซึ่งอยู่ในความรับผิดชอบของ
คลาส PopupMenu
ตัวอย่างที่ 8-3 การสร้างเมนูแบบ Popup ด้วยคลาส PopupMenu มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimplePopup
2. สร้างเมนูขึ้นมาในไฟล์ activity_main.xml (\res\menu) ในกรณีนี้มีเมนูย่อย 3 เมนู ดังรูปที่ 8-8
เมนูที่สร้างขึ้นมา
3. ที่ส่วนแสดงผลให้ออกแบบดังรูปที่ 8-9

part
จากรูปที่ 8-9 เป้าหมายของตัวอย่างนี้คือ ต้องการสร้างเมนู Popup ให้กับปุ่ม Button โดยมีสคริปต์

1
XML ดังต่อไปนี้
สคริปต์ XML ที่ 8-3 การสร้างเมนูแบบ Popup ด้วยคลาส PopupMenu (\res\layout\activity_main.xml)
<Button
android:id="@+id/cmdCallMenu"
android:text="@string/cmdMenu" />
</RelativeLayout>

โค้ด JAVA ที่ 8-3 การสร้างเมนูแบบ Popup ด้วยคลาส PopupMenu (\src\com.example.simplemenu\MainAc-
tivity.java)
package com.example.simplepopup;
import android.widget.PopupMenu;
@Override
Button cmd = (Button) findViewById(R.id.cmdCallMenu);
PopupMenu pop = new PopupMenu(MainActivity.this, v);
pop.getMenuInflater().inflate(R.menu.activity_main,
pop.getMenu());
pop.setOnMenuItemClickListener(new
PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem arg0) {
Toast.makeText(MainActivity.this, arg0.toString(),

return true;
}
});
pop.show();
}
});
}
@Override
return true;
}
}
คลิก 5.1
จากรูปที่ 8-10 เป็นการสร้างเมนูแบบ Popup ให้กับปุ่ม Button

1. ในกรณีนี้ต้องการสร้างเมนูแบบ Popup ให้กับปุ่มที่ชื่อว่า cmdCallMenu โดยมาเก็บไว้ที่
ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd ก่อน
@Override
Button cmd = (Button) findViewById(R.id.cmdCallMenu);
2. ที่เหตุการณ์ Click() ของปุ่ม cmd ให้สร้างตัวแปรออบเจ็กต์ PopupMenu ที่ชื่อว่า pop ขึ้นมา

เพื่ออ่านโครงสร้างเมนูที่เราสร้างไว้ในไฟล์ activity_main.xml (ในโฟลเดอร์ \res\menu) โดย
อาศัยเมธอด getMenuInflater()
PopupMenu pop = new PopupMenu(MainActivity.this, v);
pop.getMenuInflater().inflate(R.menu.activity_main,pop.getMenu());

part
3. ท้ายที่สุดการตรวจสอบเมนู Popup ที่ถูกคลิกเลือกอยู่ในเหตุการณ์ onMenuItemClick() โดย

1
สั่งให้แสดงข้อความของเมนูที่ถูกคลิกเลือก ผ่านทางพารามิเตอร์ที่ชื่อว่า arg0
pop.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem arg0) {
Toast.makeText(MainActivity.this, arg0.toString(),
return true;
}
});
pop.show();
}
});
}
การสร้างเมนูให้กับแถบ Action Bar

แถบ Action Bar หมายถึง แถบที่ปรากฏขึ้นมาในส่วนแสดงผลอยู่เสมอ ซึ่ง App ที่นิยมใช้ Action
Bar ได้แก่ App ในกลุ่มของเกม, ตกแต่งรูป และกล้องเพราะว่าผู้สร้างจะมีเมนูค�ำสั่งไว้ให้ผู้ใช้สามารถเรียก
ใช้ได้ตลอดเวลานั่นเอง
ในหัวข้อนี้เราจะมาดูว่าการใส่เมนูให้กับแถบ Action Bar ท�ำอย่างไร
ตัวอย่างที่ 8-4 การสร้างเมนูให้กับแถบ Action Bar มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า UsingActionBar
2. สร้างเมนูย่อยขึ้นมา 3 เมนูในไฟล์ activity_main.xml (\res\menu) ดังรูปที่ 8-11
เมนูย่อยขึ้นมา
3 เมนู
กำ�หนดเงื่อนไข
เพิ่มเติม

จากรูปที่ 8-11 ในแต่ละเมนูยอ่ ย ให้ผอู้ า่ นคลิกตัวเลือกเพือ่ ก�ำหนดแอตทริบวิ ต์ Show as action เพิม่ เติม
คือ ifRoom และ withText ดังสคริปต์ XML ต่อไปนี้
สคริปต์ XML ที่ 8-4 การสร้างเมนูให้กับแถบ Action Bar (\res\menu\activity_main.xml)
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/mnu1"
android:showAsAction="ifRoom|withText"
android:title="เมนู 1">
</item>
<item
</item>
<item
</item>
</menu>
ณ จุดนี้เมนูย่อยทั้ง 3 เมนูพร้อมแล้ว
3. การใช้งาน Action Bar ใน Activity ผู้อ่านต้องก�ำหนดเพิ่มเติมในไฟล์ AndroidManifest.xml
โดยการก�ำหนดแอตทริบิวต์ android:uiOptions=“splitActionBarWhenNarrow” ดังรูปที่ 8-2
แอตทริบวิ ต์ and
roid:uiOptions=
“splitActionBar
WhenNarrow”

โค้ด JAVA ที่ 8-4 การสร้างเมนูให้กับแถบ Action Bar (\src\com.example.usingactionbar\MainActivity.java)
package com.example.usingactionbar;

part
1
@Override
}
@Override
return true;
}
@Override
case R.id.mnu1:
Toast.makeText(this, "เมนู Action 1 ถูกเลือก", Toast.LENGTH_SHORT).show();
return true;
case R.id.mnu2:
return true;
case R.id.mnu3:
return true;
default:
}
}
};
แถบ Action Bar ปรากฏในส่วนแสดงผล

ตลอดเวลา

การตรวจสอบเมนูที่ถูกคลิกเลือกอยู่ในเหตุการณ์ onOptionsItemSelected() เช่น กรณีการ
ตรวจสอบเมนู Action 1 ให้ตรวจสอบผ่านทางพารามิเตอร์ item
\src\com.example.usingactionbar\MainActivity.java
@Override
case R.id.mnu1:
return true;
การใส่รูปภาพในเมนูของ Action Bar

จากตัวอย่างทีผ่ า่ นมาเป็นการใช้งานเมนูของ Action Bar ซึง่ พบเห็นได้ใน Android App ทัว่ ไป ในหัวข้อนี้
จะแนะน�ำในกรณีที่ต้องการใส่ไฟล์รูปภาพก�ำกับไว้ในแต่ละเมนู ซึ่งสามารถท�ำได้เช่นกันดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 8-5 การใส่รูปภาพในเมนูของ Action Bar มีขั้นตอนที่เพิ่มเติมจากตัวอย่างที่ 8-4 ดังนี้
1. ลากไฟล์รูปภาพมาใส่ไว้ในโฟลเดอร์ drawable-hdpi ในกรณีนี้ผู้เขียนใช้ไฟล์รูปภาพชื่อว่า
pic01.png ถึง pic04.png จ�ำนวน 4 รูป ดังรูปที่ 8-14
จ�ำนวน 4 รูป

part
2. รายการเมนูที่อยู่ในไฟล์ activity_main.xml (\res\menu) ผู้เขียนได้สร้างไว้ 4 เมนูจากนั้นให้ระบุ

1
รูปภาพที่ต้องการใช้งานได้ที่แอตทริบิวต์ Icon ดังรูปที่ 8-15
ให้เมนูที่ 1 ใช้ไฟล์
รูปภาพที่ชื่อว่า
pic01 (.png)
จากรูปที่ 8-15 ขอให้ผู้อ่านก�ำหนดไฟล์รูปภาพให้ครบทุกเมนูดังสคริปต์ XML ต่อไปนี้

สคริปต์ XML ที่ 8-5 การใส่รูปภาพในเมนูของ Action Bar (\res\menu\activity_main.xml)
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:icon="@drawable/pic01"
</item>
<item
</item>
<item
</item>
<item
</item>
</menu>

โค้ด JAVA ที่ 8-5 การใส่รูปภาพในเมนูของ Action Bar (\src\com.example.actionbarwithimage\MainActivity.
java)
package com.example.actionbarwithimage;
@Override
}
@Override
return true;
}
@Override
Toast.makeText(this, "รายการ : " + item.getTitle() + " ถูกเลือก",
return true;
}
}
4.1 เลือก
การสร้างเมนูทหี่ มาะสมและชัดเจน จะท�ำให้ผใู้ ช้งานสามารถเข้าถึงฟีเจอร์ตา่ งๆ ทีอ่ ยูใ่ น App ได้อย่าง
มีประสิทธิภาพ ดังนั้น การออกแบบเมนูจึงเป็นเรื่องที่ต้องให้ความใส่ใจเป็นอย่างมากอีกเรื่องหนึ่งเลยทีเดียว

9
การท�ำงานกับส่วนแสดงผลตั้งแต่ 2 รายการ
ขึ้นไป
ไม่วา่ เราจะสร้าง App ประเภทใดก็ตามย่อมทีจ่ ะมีสว่ นแสดงผล หรือ Activity มากกว่า 1 รายการอยูใ่ น
App ของเรา ส่งผลให้เกิดการท�ำงานร่วมกันระหว่าง Activity หรือจากส่วนแสดงผลหนึง่ ไปสูอ่ กี ส่วนแสดงผลหนึง่
ในบทนี้เราจะมาดูว่ามีวิธีการอย่างไรในการท�ำงานร่วมกันระหว่าง Activity
การสร้างส่วนแสดงผลที่มี 2 Activity และปุ่มเปลี่ยนส่วน

แสดงผลไป-มา
ส�ำหรับการพัฒนา Android App ในทางปฏิบัติแล้ว โปรเจ็กต์ของเราย่อมที่จะต้องมีส่วนแสดงผล
มากกว่า 1 หน้าจอเพื่อแสดงเนื้อหาตามที่ต้องการ โดยการเชื่อมโยงระหว่างหน้าจอ (ระหว่าง Activity) อยู่ใน
ความรับผิดชอบของคลาส Intent ซึ่งผู้อ่านสามารถศึกษาได้จากตัวอย่างต่อไปนี้
ตัวอย่างที่ 9-1 การสร้างส่วนแสดงผลทีม่ ี 2 Activity และปุม่ เปลีย่ นส่วนแสดงผลไป-มามีขนั้ ตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า MultipleActivity
2. โดยปกติแล้วเมื่อสร้างโปรเจ็กต์ Android ขึ้นมา สิ่งที่เราได้มาโดยอัตโนมัติคือ
ส่วนแสดงผล อยู่ในความรับผิดชอบของไฟล์ XML ที่ชื่อว่า activity_main.xml เก็บอยู่ในพาธ
\res\layout
โค้ด JAVA อยูใ่ นไฟล์ทช
ี่ อื่ ว่า MainActivity.java เก็บอยูใ่ นพาธ \src\ชือ่ package ของโปรเจ็กต์
แสดงโปรเจ็กต์
Android ว่างๆ
จากรูปที่ 9-1 พบว่า โปรเจ็กต์ Android เริ่มต้นถูกก�ำหนดให้มีส่วนแสดงผลเพียง 1 Activity ถ้าเรา

ต้องการส่วนแสดงผลเพิ่มเติมจะต้องสร้างไฟล์ *.xml และ *.java ขึ้นมา เพื่อท�ำหน้าที่แสดงผลและเขียนโค้ด
JAVA นั่นเอง
3. เริ่มต้นที่ไฟล์ strings.xml ให้สร้างข้อความต่อไปนี้ขึ้นมาก่อนกล่าวคือ
ข้อความที่ชื่อว่า FirstActivity ก�ำหนดข้อความ หน้าจอเริ่มต้น
ข้อความที่ชื่อว่า SecondActivity ก�ำหนดข้อความ หน้าจอที่ 2
ข้อความที่ชื่อว่า cmdSecondActivity ก�ำหนดข้อความ ไปหน้าจอที่ 2
ข้อความที่ชื่อว่า cmdFirstActivity ก�ำหนดข้อความ กลับไปหน้าแรก
แสดงข้อความ
ทั้ง 4 ในไฟล์
strings.xml

4. มาที่ส่วนแสดงผลหลัก (activity_main.xml) ให้ออกแบบหน้าจอ ดังรูปที่ 9-3
part
1
activity_main.
xml
จากรูปที่ 9-3 การท�ำงานที่ต้องการคือ เมื่อผู้ใช้คลิกปุ่มไปหน้าจอที่ 2 ส่วนแสดงผลจะเปลี่ยนไปแสดง

หน้าจอถัดไป ซึ่งแสดงสคริปต์ XML ได้ดังต่อไปนี้
สคริปต์ XML ที่ 9-1 การสร้างส่วนแสดงผลที่มี 2 Activity และปุ่มเปลี่ยนส่วนแสดงผลไป-มา (\res\layout\activ-
ity_main.xml)
<TextView
android:text="@string/FirstActivity"
<Button
android:id="@+id/cmdGotoSecondActivity"
android:text="@string/cmdSecondActivity" />
</RelativeLayout>
ณ จุดนี้ส่วนแสดงผลของหน้าจอแรกพร้อมแล้วแต่ยังไม่ต้องเขียนโค้ด JAVA ของหน้าจอนี้

บทที่ 9 การท�ำงานกับส่วนแสดงผลตั้งแต่ 2 รายการขึ้นไป 191
5. สร้างส่วนแสดงผลของหน้าจอที่ 2 ขึ้นมาก่อน โดยการคลิกขวาที่โฟลเดอร์ Layout เลือกค�ำสั่ง
New > Other > Android XML Layout File ดังรูปที่ 9-4
หน้าจอที่ 2
5.2 เลือก
5.3 เลือก
5.4 คลิก
6. ก�ำหนด Layout ให้กับหน้าจอที่ 3 ว่าต้องการใช้งานแบบใด ในกรณีนี้ผู้เขียนเลือกแบบ Relative

Layout โดยตั้งชื่อส่วนแสดงผลนี้ว่า activity_main2 ดังรูปที่ 9-5
รูปแบบ Layout
ให้กับส่วนแสดง
ผลใหม่ที่ต้องการ
เพิ่มเข้ามา
6.1 เลือก
6.2 คลิก

part
1
ส่วนแสดงผลว่างๆ
ของหน้าจอที่ 2
7. ออกแบบส่วนแสดงผลให้กับหน้าจอที่ 2 ดังรูปที่ 9-7

หน้าจอที่ 2
จากรูปที่ 9-7 ถ้าผู้ใช้ต้องการกลับไปหน้าแรก ให้คลิกปุ่ม ซึ่งแสดงสคริปต์

XML ได้ดังต่อไปนี้
สคริปต์ XML ที่ 9-1 การสร้างส่วนแสดงผลที่มี 2 Activity และปุ่มเปลี่ยนส่วนแสดงผลไป-มา (\res\layout\activ-
ity_main2.xml)
android:id="@+id/RelativeLayout1"
<TextView

android:text="@string/SecondActivity" />
<Button
android:id="@+id/cmdBackToFirstActivity"
android:text="@string/cmdFirstActivity" />
</RelativeLayout>
ณ จุดนี้ส่วนแสดงผลทั้ง 2 หน้าจอพร้อมแล้ว
8. หน้าจอที่ 2 มีส่วนแสดงผลแล้วแต่ยังไม่มีส่วนของโค้ด JAVA ให้เพิ่มเข้ามาในโปรเจ็กต์ โดยการ
คลิกขวาทีโ่ ฟลเดอร์ src แล้วเลือกค�ำสัง่ New > Class เพือ่ เพิม่ คลาส JAVA เข้ามา ดังรูปที่ 9-8
คลาสว่างๆ เข้า
มาในโปรเจ็กต์ 8.1 คลิกขวา
ปัจจุบัน
8.2 เลือก
8.3 คลิก
8.4 เลือก
8.5 คลิก
จากรูปที่ 9-8 ที่ช่อง Package ให้คลิกปุ่ม เพื่อก�ำหนดให้คลาสที่จะเพิ่มเข้ามาใหม่อยู่

ใน Package เดียวกับโปรเจ็กต์

part
9. ที่ช่อง Name ให้ตั้งชื่อคลาสใหม่นี้ว่า MainActivity2 ส่วนส�ำคัญอยู่ที่ช่อง Superclass เป็นการ

1
ก�ำหนดว่า คลาสใหม่ที่เราต้องการเพิ่มเข้ามาให้สืบทอดมาจากคลาสแม่ (Superclass) ใด โดย
ค่าเริม่ ต้นถูกก�ำหนดให้สบื ทอดมาจาก java.lang.Object ซึง่ เป็นของโปรเจ็กต์ JAVA แต่ในกรณีนี้
เราต้องการคลาสที่เป็นของ Android จึงให้ก�ำหนดค่าเป็น android.app.Activity ดังรูปที่ 9-9
แสดงคลาสว่างๆ
ที่ได้
9.1 กำ�หนด
9.2 คลิก
9.3 แสดงโค้ด
จากรูปที่ 9-9 คลาสว่างๆ ที่ได้ที่ชื่อว่า MainActivity2 สืบทอดคลาส (extends) มาจากคลาส Activity

(ของ Android) อยู่ใน Package เดียวกับโปรเจ็กต์ (package com.example.multipleactivity)

10. ก�ำหนดให้คลาสว่าง MainActivity2 มีโครงสร้างการท�ำงานเหมือนกับ Activity ปกติ โดยการเลือก
เมนู Source > Override/Implement Methods... เพื่อสร้างเหตุการณ์ onCreate() ขึ้นมา ดัง
เหตุการณ์ on-
Create() ให้กับ
คลาส MainAc-
tivity2
10.1 เลือก
เลือก 10.2
10.4 คลิก
แสดงเหตุการณ์
onCreate()
ของคลาส Main-
Activity2
10.5 แสดงโค้ด
จากรูปที่ 9-11 ณ จุดนี้คลาส MainActivity2 มีโครงสร้างเช่นเดียวกับ Activity ปกติแล้ว

11. บอกให้โปรเจ็กต์รับรู้ว่ามี Activity ที่ชื่อว่า MainActivity2 โดยการดับเบิลคลิกไฟล์ Android
part
1
Manifest.xml และคลิกปุ่ม เพื่อเพิ่ม Activity เข้ามาในโปรเจ็กต์
Activity ที่ชื่อว่า
MainActivity2
11.2 คลิก
ดับเบิลคลิก 11.1
เลือก 11.5
จากรูปที่ 9-12 ให้คลิกปุ่ม เพื่อเลือก MainActivity2

รายละเอียดเพิ่ม
เติมให้กับ Main-
Activity2
จากรูปที่ 9-13 ให้กำ� หนดรายละเอียดขัน้ ต้นเพิม่ เติมทีช่ อ่ ง Name (ชือ่ Activity) กับช่อง Label (ข้อความ
บนแถบด้านบน)
12. เขียนโค้ด JAVA เชื่อมโยงการท�ำงานระหว่าง 2 Activity ดังโค้ดต่อไปนี้
โค้ด JAVA ที่ 9-1 การสร้างส่วนแสดงผลที่มี 2 Activity และปุ่มเปลี่ยนส่วนแสดงผลไป-มา (\src\com.example.
multipleactivity\MainActivity.java)
package com.example.multipleactivity;
import android.content.Intent;
@Override
Button cmd = (Button) findViewById(R.id.cmdGotoSecondActivity); 1
Intent it = new Intent (getApplicationContext(),MainActivity2.class);
startActivity(it);
}
});
}
@Override
return true;
}
}

โค้ด JAVA ที่ 9-1 การสร้างส่วนแสดงผลที่มี 2 Activity และปุ่มเปลี่ยนส่วนแสดงผลไป-มา (\src\com.example.
part
1
multipleactivity\MainActivity2.java)
package com.example.multipleactivity;
public class MainActivity2 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) { 2
setContentView(R.layout.activity_main2);
Button cmd = (Button) findViewById(R.id.cmdBackToFirstActivity); 3
finish();
}
});
}
}
ตัวอย่างที่ 9-1 13.2 แสดงผล
13.1 คลิก
จากรูปที่ 9-14 ผู้อ่านสามารถเปลี่ยนหน้าจอไป-มาระหว่าง 2 Activity ได้แล้ว

1. ในหน้าจอแรก (MainActivity) ทีเ่ หตุการณ์ Click() ของปุม่ ทีช่ อื่ ว่า cmdGotoSecondActivity ซึง่ ท�ำ
หน้าที่เปิดหน้าจอที่ 2 ให้ผู้อ่านสร้างคลาส Intent ที่ชื่อว่า it ขึ้นมา สั่งให้ส่วนแสดงผลปัจจุบัน
ใช้ส่วนแสดงผลของคลาส MainActivity2 จากนั้นใช้ฟังก์ชัน startActivity() สั่งให้ตัวแปร
ออบเจ็กต์ it ท�ำงาน
\src\com.example.multipleactivity\MainActivity.java
Button cmd = (Button) findViewById(R.id.cmdGotoSecondActivity);
Intent it = new Intent (getApplicationContext(),MainActivity2.class);
startActivity(it);
}
});
}

2. ส่วนในหน้าจอที่ 2 ก�ำหนดให้ส่วนแสดงผลปัจจุบันใช้ส่วนแสดงผลที่ชื่อว่า activity_main2 ร่วม
กับฟังก์ชัน setContentView()
\src\com.example.multipleactivity\MainActivity2.java
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main2);
3. ท้ายที่สุดที่เหตุการณ์ Click() ของปุ่ม cmdBackToFirstActivity ซึ่งท�ำหน้าที่เปิดหน้าจอแรกผ่าน

ทางฟังก์ชัน finish()
\src\com.example.multipleactivity\MainActivity2.java
Button cmd = (Button) findViewById(R.id.cmdBackToFirstActivity);
finish();
}
});
}
การรับ-ส่งข้อมูลระหว่าง Activity
การสร้าง Android App ทีม่ ี Activity ตัง้ แต่ 2 Activity ขึน้ ไปย่อมทีจ่ ะต้องมีการรับ-ส่งข้อมูลจาก Activity
หนึง่ ไปสู่ Activity หนึง่ เพือ่ ให้ผอู้ า่ นสามารถน�ำข้อมูลทีร่ บั -ส่งระหว่างกันไปใช้ในการท�ำงานในระดับถัดไปนัน่ เอง
ตัวอย่างที่ 9-2 การรับส่งข้อมูลระหว่าง Activity มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SendData
2. ผู้เขียนใช้ส่วนแสดงผลที่ชื่อว่า activity_main.xml ท�ำหน้าที่ส่งข้อมูล และใช้ส่วนแสดงผลที่ชื่อ
ว่า secondscreen.xml ท�ำหน้าที่รับข้อมูล
3. ออกแบบส่วนแสดงผลในไฟล์ activity_main.xml ซึ่งท�ำหน้าที่ส่งข้อมูล ดังรูปที่ 9-15
ของไฟล์ activ- EditText
ity_main.xml
EditText
Button

part
1
สคริปต์ XML ที่ 9-2 การรับ-ส่งข้อมูลระหว่าง Activity (\res\layout\activity_main.xml)
<EditText
android:ems="10"
android:inputType="textPersonName" >
<requestFocus />
</EditText>
<EditText
android:id="@+id/edtAddress"
android:inputType="textPersonName"
android:ems="10" />
<Button
android:id="@+id/cmdSend"
android:text="@string/strSend" />
</LinearLayout>
4. ให้เพิ่ม Android XML Layout File เข้ามาอีก 1 ไฟล์ ตั้งชื่อว่า secondscreen.xml ท�ำหน้าที่รับ
ข้อมูล โดยก�ำหนดให้ใช้ LinearLayout แบบแนวตัง้ (แอตทริบวิ ต์ android:orientation = vertical)
ใช้ TextView จ�ำนวน 3 ตัว ดังสคริปต์ XML ต่อไปนี้
สคริปต์ XML ที่ 9-2 การรับ-ส่งข้อมูลระหว่าง Activity (\res\layout\secondscreen.xml)
<TextView
android:text="@string/tvView" />
<TextView
android:id="@+id/tvFullName"

<TextView
android:id="@+id/tvAddress"
</LinearLayout>
5. เมือ่ เพิม่ ไฟล์ Layout ใหม่เข้ามาในโปรเจ็กต์ Android (secondscreen.xml) จะต้องไปก�ำหนดในไฟล์

AndroidManifest.xml ให้โปรเจ็กต์รบั ทราบเช่นกัน โดยการเพิม่ อิลเิ มนต์ <activity android:name=
“.SecondView”></activity> ดังรูปที่ 9-16
ชื่อ SecondView
ให้กับ second-
screen.xml
เพิ่มอิลิเมนต์
ณ จุดนี้เฉพาะส่วนแสดงผลทั้ง 2 หน้าจอพร้อมใช้งานแล้ว ต่อไปเป็นการเขียนโค้ดเพื่อสร้างการ

รับ-ส่งข้อมูลระหว่างกัน
6. ในไฟล์ MainActivity.java ให้เขียนโค้ด JAVA ก�ำหนดการท�ำงานดังต่อไปนี้
โค้ด JAVA ที่ 9-2 การรับ-ส่งข้อมูลระหว่าง Activity (\src\com.example.senddata\MainActivity.java)
package com.example.senddata;

EditText edt_FullName;
EditText edt_Address;
@Override

part
1
edt_FullName = (EditText) findViewById(R.id.edtFullName);

edt_Address = (EditText) findViewById(R.id.edtAddress);
Intent it = new Intent(getApplicationContext(), SecondView.class);
it.putExtra("f", edt_FullName.getText().toString());
it.putExtra("a", edt_Address.getText().toString());
startActivity(it);
}
});
}
@Override
return true;
}
}
7. ในโฟลเดอร์ \src ให้เพิ่มคลาสใหม่เข้ามา โดยตั้งชื่อว่า secondview.java ตามที่เราก�ำหนดไว้ใน

ไฟล์ AndroidManifest.xml จากนั้นให้เขียนโค้ด JAVA ก�ำหนดการท�ำงานดังต่อไปนี้
โค้ด JAVA ที่ 9-2 การรับ-ส่งข้อมูลระหว่าง Activity (\src\com.example.senddata\SecondView.java)
package com.example.senddata;
public class SecondView extends Activity { 3

@Override
setContentView(R.layout.secondscreen);
TextView tvFullName = (TextView) findViewById(R.id.tvFullName);

TextView tvAddress = (TextView) findViewById(R.id.tvAddress);
Intent it = getIntent(); 4
String strFullName = it.getStringExtra("f");
String strAddress = it.getStringExtra("a");
tvFullName.setText(strFullName);
tvAddress.setText(strAddress);
}
}

ตัวอย่างที่ 9-2 8.3 แสดงผล
8.2 คลิก
หลักการท�ำงานของตัวอย่างนี้แยกออกเป็น 2 ฝั่งคือ
z ฝั่งส่งข้อมูล (ส่วนแสดงผล activity_main.xml) ร่วมกับโค้ดใน MainActivity.java
z ฝั่งรับข้อมูล (ส่วนแสดงผล secondscreen.xml) ร่วมกับโค้ดใน SecondView.java
1. เริม่ ต้นทีฝ่ ง่ั ส่งข้อมูลให้ใช้สว่ นแสดงผลทีช่ อื่ ว่า activity_main ในกรณีนผี้ เู้ ขียนก�ำหนดให้สง่ ข้อมูล
2 อย่าง โดยที่
อา ่ น EditText ทีช่ อื่ ว่า edtFullName เก็บไว้ทตี่ วั แปรออบเจ็กต์ EditText ทีช่ อื่ ว่า edt_Full-
Name
อา ่ น EditText ทีช่ อื่ ว่า edtAddress เก็บไว้ทตี่ วั แปรออบเจ็กต์ EditText ทีช่ อื่ ว่า edt_Address
อ่าน Button ที่ชื่อว่า cmdSend เก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd
\src\com.example.senddata\MainActivity.java
EditText edt_FullName;
EditText edt_Address;
@Override
edt_FullName = (EditText) findViewById(R.id.edtFullName);

edt_Address = (EditText) findViewById(R.id.edtAddress);
2. ในเหตุการณ์ Click() ของปุ่ม cmd เริ่มต้นสร้างตัวแปรออบเจ็กต์ Intent ที่ชื่อว่า it ขึ้นมาท�ำ

หน้าที่ส่งข้อมูลไปยัง Activity ถัดไป (SecondView.class) โดยที่

เก็บข้อมูลที่ได้จากตัวแปรออบเจ็กต์ edt_FullName ไว้ที่ f
part
1
เก็บข้อมูลที่ได้จากตัวแปรออบเจ็กต์ edt_Address ไว้ที่ a
จากนั้นใช้ฟังก์ชัน startActivity() สั่งให้ไปยัง Actvitiy ที่ชื่อว่า SecondView

\src\com.example.senddata\MainActivity.java
Intent it = new Intent(getApplicationContext(), SecondView.class);
it.putExtra("f", edt_FullName.getText().toString());
it.putExtra("a", edt_Address.getText().toString());
startActivity(it);
}
});
}
3. ข้ามมาทีโ่ ค้ดของฝัง่ รับข้อมูล ก�ำหนดให้ใช้สว่ นแสดงผลทีช่ อื่ ว่า secondscreen มีการท�ำงานย่อย

2 ขั้นตอนคือ
อ ่ า น TextView ที่ ชื่ อ ว่ า tvFullName เก็ บ ไว้ ที่ ตั ว แปรออบเจ็ ก ต์ TextView ที่ ชื่ อ ว่ า
tvFullName
อา ่ น TextView ทีช่ อื่ ว่า tvAddress เก็บไว้ทตี่ วั แปรออบเจ็กต์ TextView ทีช่ อื่ ว่า tvAddress
ผู้เขียนใช้ TextView ทั้ง 2 ตัวข้างต้นเข้ามาท�ำหน้าที่แสดงข้อมูลที่รับมาจาก Activity ที่ชื่อว่า Main-
Activity
\src\com.example.senddata\SecondView.java
public class SecondView extends Activity {
@Override
setContentView(R.layout.secondscreen);
TextView tvFullName = (TextView) findViewById(R.id.tvFullName);

TextView tvAddress = (TextView) findViewById(R.id.tvAddress);
4. ท้ายทีส่ ดุ ใช้ฟงั ก์ชนั ทีช่ อื่ ว่า getIntent() เข้ามาท�ำหน้าทีร่ บั ออบเจ็กต์ Intent ทีม่ าจาก MainActivity
เก็บไว้ที่ตัวแปรออบเจ็กต์ Intent ที่ชื่อว่า it เช่นกันโดยให้
อ่านข้อมูลชุดที่ 1 ออกมาจาก f เก็บไว้ที่ตัวแปร strFullName
อ่านข้อมูลชุดที่ 2 ออกมาจาก a เก็บไว้ที่ตัวแปร strAddress
จากนั้นสั่งให้แสดงใน tvFullName และ tvAddress ตามล�ำดับ

\src\com.example.senddata\SecondView.java
Intent it = getIntent();
String strFullName = it.getStringExtra("f");
String strAddress = it.getStringExtra("a");
tvFullName.setText(strFullName);
tvAddress.setText(strAddress);
}

การสร้างลิงค์ใน ListActivity เชื่อมโยงไปยัง Activity

อื่น
การใช้งานส่วนแสดงผลแบบรายการด้วย ListActivity อีกลักษณะหนึ่งที่นิยมใช้ในกลุ่มของ App
ประเภทแสดงข่าวสารจากเว็บไซด์ต่างๆ นั่นคือ การสร้างลิงค์เชื่อมโยงไปยัง Activity อื่นเพื่อแสดงข้อมูลของ
รายการที่ผู้ใช้เลือกนั่นเอง ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 9-3 การสร้างลิงค์ใน ListActivity เชื่อมโยงไปยัง Activity อื่น โดยมีขั้นตอนดังนี้
2. ให้เพิ่มไฟล์ Android XML Layout File โดยตั้งชื่อว่า activity_second.xml ในโฟลเดอร์ layout
(\res\layout) และให้ใช้ TextView จ�ำนวน 1 ตัว โดยตั้งชื่อว่า tvReceived ท�ำหน้าที่รับค่าจาก
รายการที่ถูกผู้ใช้คลิกเลือกในส่วนแสดงผลหลัก activity_main.xml ดังรูปที่ 9-18
ไฟล์ activity_
second.xml

สคริปต์ XML ที่ 9-3 การสร้างลิงค์ใน ListActivity เชือ่ มโยงไปยัง Activity อืน่ (\res\layout\activity_second.xml)
<TextView
android:id="@+id/tvReceived"
</LinearLayout>
ณ จุดนี้ส่วนแสดงผลทั้ง 2 หน้าจอ (activity_main.xml และ activity_second.xml) พร้อมแล้ว

part
3. เขียนโค้ด JAVA ให้กบั ส่วนแสดงผลหลัก (activity_main.xml) ก่อนอยูใ่ นไฟล์ทชี่ อื่ ว่า MainActivity.
1
java ดังนี้
โค้ด JAVA ที่ 9-3 การสร้างลิงค์ใน ListActivity เชื่อมโยงไปยัง Activity อื่น (\src\com.example.usinglistactiv-
ity\MainActivity.java)

@Override
String[] arrStr = new String[] {"เมนู 1","เมนู 2","เมนู 3","เมนู 4","เมนู 5"};
ArrayAdapter<String> arrAdt = new ArrayAdapter<String> (this,android.R.layout.
simple_list_item_1, arrStr);
}

Intent it = new Intent(getApplicationContext(), SecondActivity.class);
it.putExtra("s", str);
startActivity(it);
}
@Override
return true;
}
}

4. ให้เพิ่มคลาสเข้ามาใหม่ในโฟลเดอร์ src โดยตั้งชื่อว่า SecondActivity.java เพื่อท�ำงานกับส่วน
แสดงผลที่ชื่อว่า activity_second.xml ดังโค้ด JAVA ต่อไปนี้
โค้ด JAVA ที่ 9-3 การสร้างลิงค์ใน ListActivity เชื่อมโยงไปยัง Activity อื่น (\src\com.example.usinglistactiv-
ity\SecondActivity.java)
public class SecondActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) { 3
this.setContentView(R.layout.activity_second);
TextView tv = (TextView) findViewById(R.id.tvReceived);

String str = it.getStringExtra("s");
tv.setText(str);
}
}
5. ทีไ่ ฟล์ AndroidManifest.xml ก�ำหนดให้โปรเจ็กต์รจู้ กั กับคลาส SecondActivity ทีเ่ พิม่ เข้ามาใหม่

โดยการก�ำหนดทีอ่ ลิ เิ มนต์ <activity android:name=“.SecondActivity” android:label=“Second
Activity”></activity> ดังรูปที่ 9-19
ค่าเพิ่มเติมใน
ไฟล์ Android-
Manifest.xml
กำ�หนดอิลิเมนต์

part
1
6.2 เลือก
6.1 เลือก
จากรูปที่ 9-20 เมือ่ คลิกเลือกรายการใดก็ตาม ในส่วนแสดงผลหลัก (activity_main) รายการดังกล่าว

จะส่งค่าไปยังส่วนแสดงผลถัดไป (activity_second)
1. เริ่มต้นในส่วนแสดงผลหลักให้สร้างรายการเมนูขึ้นมา 5 รายการ
@Override
String[] arrStr = new String[] {"เมนู 1","เมนู 2","เมนู 3","เมนู 4","เมนู 5"};
ArrayAdapter<String> arrAdt = new ArrayAdapter<String>(this,android.R.layout.
simple_list_item_1, arrStr);
}
2. เมื่อผู้ใช้คลิกเลือกรายการส่งผลให้เกิดเหตุการณ์ onListItemClick() โดยให้

อ่านรายการที่ถูกคลิกเลือกผ่านทางเมธอด getText() เก็บไว้ที่ตัวแปร str ก่อน
สร้างตัวแปรออบเจ็กต์ Intent ที่ชื่อว่า it และใส่ข้อมูลที่ได้จากตัวแปร str ลงใน s ผ่านทาง
เมธอด putExtra() และระบุให้ไปที่คลาส SecondActivity

จากนั้นใช้ฟังก์ชันที่ชื่อว่า startActivity() สั่งให้ไปยัง Activity ถัดไปตามค่าที่เก็บอยู่ในตัวแปร
ออบเจ็กต์ it
Intent it = new Intent(getApplicationContext(), SecondActivity.class);
it.putExtra("s", str);
startActivity(it);
}

3. สุดท้ายมาทีค่ ลาส SecondActivity (ส่วนแสดงผล activity_second) ท�ำหน้าทีเ่ พียงอย่างเดียวคือ
รับค่าที่ได้จากรายการที่ถูกคลิกเลือกจากส่วนแสดงผลหลัก (activity_main) ที่ถูกเก็บไว้ที่ s โดย
การใช้เมธอด getStringExtra() ของตัวแปรออบเจ็กต์ Intent ที่ชื่อว่า it และสั่งให้แสดงค่าที่
ได้ในตัวแปรออบเจ็กต์ TextView ที่ชื่อว่า tv
\src\com.example.usinglistactivity\SecondActivity.java
@Override
this.setContentView(R.layout.activity_second);
TextView tv = (TextView) findViewById(R.id.tvReceived);

String str = it.getStringExtra("s");
tv.setText(str);
}
เทคนิคที่น�ำเสนอในบทนี้ผู้อ่านสามารถน�ำไปประยุกต์ใน App ประเภทต่างๆ มากมายเพราะว่า
นี่คือหลักการพื้นฐานของการท�ำงานตั้งแต่ 2 หน้าจอขึ้นไป

10
พื้นฐานการใช้งานฐานข้อมูล SQLite ใน
Android App
ฐานข้อมูล SQLite เป็นระบบจัดเก็บข้อมูลในฐานข้อมูลแบบฝังตัว (Local Database) ถูกสร้างขึ้นมา
ให้สามารถท�ำงานบนอุปกรณ์พกพา (Smartphone และ Tablet) ได้เป็นอย่างดี ช่วยให้เราสามารถจัดเก็บข้อมูล
ลงในอุปกรณ์พกพา และน�ำข้อมูลดังกล่าวออกมาใช้ประโยชน์ใน Android App ได้นั่นเอง
รูปแบบจัดเก็บข้อมูลในฐานข้อมูล SQLite อยู่ในรูปแบบของตาราง โดยมุมมองในแนวตั้งเรียกว่า
คอลัมน์ (Column) หรือฟิลด์ (Field) และมุมมองข้อมูลในแนวนอนเรียกว่า แถว (Row)
พื้นฐานการใช้งานฐานข้อมูล SQLite
ในหัวข้อนี้จะแนะน�ำให้ผู้อ่านได้รู้จักและฐานข้อมูล SQLite ในขั้นพื้นฐานได้ โดยผู้เขียนจะขออธิบาย
ผ่านตัวอย่างเพื่อให้ผู้อ่านสามารถเข้าใจการใช้งานร่วมกับ Android App ได้ชัดเจนยิ่งขึ้น
ตัวอย่างที่ 10-1 พื้นฐานการใช้งานฐานข้อมูล SQLite มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SimpleSQLite
2. การท�ำงานกับฐานข้อมูล SQLite เราควรสร้างคลาสขึ้นมาท�ำหน้าที่นี้ โดยคลิกขวาที่โฟลเดอร์ src
เลือกค�ำสั่ง New > Class ดังรูปที่ 10-1
คลาสใหม่ขึ้นมา
ใช้ในโปรเจ็กต์
ปัจจุบัน 2.1 คลิกขวา
2.2 เลือก
คลาสใหม่ขึ้นมา
ใช้ในโปรเจ็กต์
ปัจจุบัน 2.3 คลิกเพื่อเลือก Package
จากรูปที่ 10-1 ให้คลิกปุ่ม เพื่อให้คลาสที่สร้างขึ้นมาอยู่ใน Package ของโปรเจ็กต์

3. ป้อนค�ำว่า SQLiteOpenHelper เพือ่ ให้คลาสทีส่ ร้างขึน้ มาสืบทอดจากคลาส SQLiteOpenHelper
คลาส และระบุ
คลาสแม่

part
1
คลาส และระบุ
คลาสแม่
3.4 คลิก
จากรูปที่ 10-2 ผูเ้ ขียนตัง้ ชือ่ คลาสนีว้ า่ DbSQLite สืบทอดมาจากคลาสแม่ทชี่ อื่ ว่า android.database.
sqlite.SQLiteOpenHelper
ของคลาส DbS-
QLite ที่อยู่ใน
ไฟล์ DbSQLite.
java
จากรูปที่ 10-3 เราจะได้คลาส DbSQLite ว่างๆ ขึ้นมา 1 คลาสเป็นคลาสที่มีข้อผิดพลาด 2 เหตุการณ์

(เมธอด) คือ
z เหตุการณ์ onCreate() ใช้ในกรณีที่ต้องการสร้างฐานข้อมูลขึ้นมา
z เหตุการณ์ onUpgrade() ใช้ในกรณีที่ต้องการเปลี่ยนแปลงโครงสร้างฐานข้อมูล
บทที่ 10 พื้นฐานการใช้งานฐานข้อมูล SQLite ใน Android App 213

4. ให้เลื่อนเมาส์มาลอยอยู่เหนือชื่อคลาสพบว่า มีข้อแนะน�ำให้สร้างคอนสตรัคเตอร์ให้กับคลาส
DbSQLite ขึ้นมาด้วย ซึ่งให้เลือกสร้างคอนสตรัคเตอร์แบบแรก ดังรูปที่ 10-4
แสดงคอนสตรัคเตอร์
ว่างๆ ที่ได้มา
คอนสตรัคเตอร์เป็นเมธอดพิเศษที่มีชื่อเดียวกับคลาส และถูกสั่งให้ท�ำงานโดยอัตโนมัติทันทีที่มีการ
ใช้ค�ำสั่ง new เพื่อสร้างออบเจ็กต์ขึ้นมาใช้งาน
5. คลาส DbSQLite ที่ผู้เขียนสร้างขึ้นมามีหน้าที่สร้างฐานข้อมูลที่ชื่อว่า Thaivb โดยที่
มีเพียง 1 ตาราง ชื่อว่า Customers
ในตาราง Customers มี 3 ฟิลด์ประกอบด้วย
ชื่อฟิลด์ ชนิดข้อมูล ขอบเขตข้อมูล รายละเอียด

CustomerID INTEGER - รหัสลูกค้าท�ำหน้าที่เป็น Primary Key ของตารางด้วย
FullName TEXT 50 ตัวอักษร ชื่อ-สกุลลูกค้า
Address TEXT 200 ตัวอักษร ที่อยู่ลูกค้า

Primary Key หมายถึง ฟิลด์ที่เก็บข้อมูลไม่ซ�้ำกันเพื่อระบุความแตกต่างของแต่ละแถว โดยมีโค้ด
part
1
Java ดังนี้
แสดงโค้ด JAVA
ในคลาส DbS-
QLite.java
โค้ด JAVA ที่ 10-1 พื้นฐานการใช้งานฐานข้อมูล SQLite (\src\com.example.simplesqlite\DbSQLite.java)

package com.example.simplesqlite;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteDatabase.CursorFactory;
import android.database.sqlite.SQLiteOpenHelper;
public class DbSQLite extends SQLiteOpenHelper { 1

private static final String dbName = "Thaivb";
private static final String tableName = "Customers";
private static final int dbVersion = 1;
public DbSQLite(Context context, String name, CursorFactory factory, 2

int version) {
super(context, dbName, factory, dbVersion);
// TODO Auto-generated constructor stub
}
@Override
public void onCreate(SQLiteDatabase db) { 3
db.execSQL("CREATE TABLE " + tableName +
"(CustomerID INTEGER PRIMARY KEY," +
" FullName TEXT(50)," +
" Address TEXT(200));");
}
@Override
public void onUpgrade(SQLiteDatabase arg0, int arg1, int arg2) {
}
}
ณ จุดนี้ คลาส DbSQLite มีฟังก์ชันตามที่เราต้องการแล้วต่อไปเข้าสู่ขั้นตอนการเรียกใช้งาน

6. การเรียกใช้งานคลาส DbSQLite อยู่ในไฟล์ MainActivity.java ดังโค้ด JAVA ต่อไปนี้
โค้ด JAVA ที่ 10-1 พื้นฐานการใช้งานฐานข้อมูล SQLite (\src\com.example.simplesqlite\MainActivity.java)
package com.example.simplesqlite;
@Override
DbSQLite db = new DbSQLite(this, null, null, 0);
db.getWritableDatabase();
Toast.makeText(MainActivity.this,"สร้างฐานข้อมูล เรียบร้อยแล้ว" ,Toast.LENGTH_LONG).show();
}
@Override
return true;
}
}
ตัวอย่างที่ 1
จากรูปที่ 10-6 จุดประสงค์ของตัวอย่างนี้ต้องการเพียงแค่สร้างฐานข้อมูลที่ชื่อว่า Thaivb โดยมี 1

ตารางชื่อว่า Customers

8. ถ้าเราต้องการตรวจสอบว่า ฐานข้อมูลที่สร้างขึ้นมาอยู่ที่ใดในขณะที่เปิด Android Emulator อยู่
part
1
ให้ผู้อ่านคลิกเมนู Window > Open Perspective > Other... จากนั้นเลือก DDMS ดังรูปที่ 10-7
DDMS
8.1 เลือก
8.2 เลือก
8.3 คลิก
9. ให้ผอู้ า่ นเลือกทีโ่ ปรเจ็กต์ในกรณีนคี้ อื com.example.simplesqlite โดยคลิกเลือก File Explorer >

data > data พบว่ามีฐานข้อมูลที่ชื่อว่า Thaivb ตามที่เราสร้างขึ้นมาในโปรเจ็กต์ดังรูป
แสดงฐานข้อมูล 9.1 เลือก
Thaivb ที่ได้
9.2 เลือก

10. ในกรณีที่ต้องการกลับไปสภาพแวดล้อมของโปรเจ็กต์ Android ตามปกติ ให้เลือกที่ Java EE มุม
ขวาบน ดังรูปที่ 10-9
กรณีต้องการกลับ 10 เลือก
ไปโปรเจ็กต์ของ
Android ตาม
ปกติ
1. ในคลาส DbSQLite เพื่อให้สะดวกต่อการแก้ไขผู้เขียนจึงสร้างตัวแปรขึ้นมา 3 ตัวกล่าวคือ
ตัวแปรที่ชื่อว่า dbName หมายถึง ชื่อฐานข้อมูล ในกรณีนี้คือ Thaivb
ตัวแปรที่ชื่อว่า tableName หมายถึง ชื่อตาราง ในกรณีนี้คือ Customers
ตัวแปรที่ชื่อว่า dbVersion หมายถึง เวอร์ชันของฐานข้อมูลที่สร้างขึ้นมา ก�ำหนดค่าเป็น
เวอร์ชัน 1 ใช้ในกรณีที่มีการปรับปรุงโครงสร้างของฐานข้อมูลใหม่ก็จะระบุหมายเลขเวอร์ชัน
ถัดไป
\src\com.example.simplesqlite\DbSQLite.java
public class DbSQLite extends SQLiteOpenHelper {
2. ที่คอนสตรัคเตอร์ของคลาสให้แก้ไขชื่อพารามิเตอร์ให้ตรงกับตัวแปรที่สร้างไว้ก่อนหน้านี้คือ
พารามิเตอร์ dbName กับ dbVersion
public DbSQLite(Context context, String name, CursorFactory factory,
int version) {
}
3. ส่วนในเหตุการณ์ onCreate() ให้แก้ไขชื่อพารามิเตอร์เป็น db ก่อน จากนั้นสร้างชุดค�ำสั่ง SQL

ขึ้นมาท�ำหน้าที่สร้างตารางที่มีชื่อตามค่าที่เก็บอยู่ในตัวแปร tableName ประกอบด้วย 3 ฟิลด์
คือ CustomerID, FullName และ Address ร่วมกับเมธอด execSQL() ของพารามิเตอร์ db
@Override
public void onCreate(SQLiteDatabase db) {
db.execSQL("CREATE TABLE " + tableName +
"(CustomerID INTEGER PRIMARY KEY," +
" FullName TEXT(50)," +
" Address TEXT(200));");
}

part
4. ส่วนการเรียกใช้งานคลาส DbSQLite อยูใ่ น MainActiviy ให้สร้างตัวแปรออบเจ็กต์ DbSQLite ที่

1
ชื่อว่า db ขึ้นมา จากนั้นใช้เมธอด getWritableData() เพื่อสร้างฐานข้อมูล Thaivb ขึ้นมา
\src\com.example.simplesqlite\MainActivity.java
@Override
DbSQLite db = new DbSQLite(this, null, null, 0);
Toast.makeText(MainActivity.this,"สร้างฐานข้อมูล เรียบร้อยแล้ว" , Toast.LENGTH_LONG).show();
}
การแสดงข้อมูลจากฐานข้อมูลด้วย ListView
การแสดงข้อมูลจากฐานข้อมูล SQLite ออกมาในส่วนแสดงผล ถือเป็นการท�ำงานในระดับเบื้องต้น
ที่พบเห็นได้ใน App หลายประเภท โดยที่ผู้เขียนเลือกใช้ ListView เข้ามาท�ำหน้าที่นี้
ตัวอย่างที่ 10-2 การแสดงข้อมูลจากฐานข้อมูลด้วย ListView มีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า SQLiteWithListView
2. ที่ส่วนแสดงผลหลัก (activity_main.xml) ให้ใช้ ListView จ�ำนวน 1 ตัว ดังรูปที่ 10-10

สคริปต์ XML ที่ 10-2 การแสดงข้อมูลจากฐานข้อมูลด้วย ListView (\res\layout\activity_main.xml)

<ListView
android:id="@+id/lsvCustomers"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
3. ต่อมาออกแบบว่า รายการในแต่ละแถวของ ListView ต้องการแสดงผลอย่างไร ในกรณีนตี้ อ้ งการ

แสดงข้อมูล 3 คอลัมน์โดยเพิ่มไฟล์ Android XML Layout File ในโฟลเดอร์ layout ตั้งชื่อว่า
lsv_item.xml ดังรูปที่ 10-11
lsv_item.xml
จากรูป 10-11 ให้กำ� หนดขนาดของ TextView ให้เหมาะสมกับข้อมูลทีต่ อ้ งการแสดง ดังสคริปต์ XML

ต่อไปนี้
สคริปต์ XML ที่ 10-2 การแสดงข้อมูลจากฐานข้อมูลด้วย ListView (\res\layout\lsv_item.xml)
<TextView
android:id="@+id/tvCustomerID"
<TextView
android:id="@+id/tvFullName"
<TextView
android:id="@+id/tvAddress"
</LinearLayout>
ณ จุดนี้ส่วนแสดงผลครบถ้วนตามที่ต้องการแล้ว ต่อไปเป็นขั้นตอนของการเขียนโค้ดท�ำงาน
4. สร้างคลาสที่ท�ำหน้าที่สร้างฐานข้อมูลและเพิ่มข้อมูลที่ต้องการทดสอบในฐานข้อมูล หลังจากนั้น
part
1
ให้แสดงข้อมูลทั้งหมดเท่าที่มีอยู่แบบไม่มีเงื่อนไข โดยการสร้างคลาสที่ชื่อว่า DbSQLite.java ใน
โฟลเดอร์ src ดังโค้ดต่อไปนี้
โค้ด JAVA ที่ z-1 ที่ 10-2 การแสดงข้อมูลจากฐานข้อมูลด้วย ListView (\src\com.example.sqlitewithlistview\
DbSQLite.java)
package com.example.sqlitewithlistview;
import android.database.Cursor;


int version) {
}
@Override
public void onCreate(SQLiteDatabase db) { 1
db.execSQL("CREATE TABLE " + tableName
+ "(CustomerID TEXT PRIMARY KEY," + " FullName TEXT(50),"
+ " Address TEXT(200));");
String sql1 = "INSERT INTO " + tableName

+ "(CustomerID,FullName,Address) VALUES (1,'ศุภชัย สมพานิช', 'กรุงเทพ')";
+ "(CustomerID,FullName,Address) VALUES (2,'อดิเทพ มุ่งรัก', 'เชียงใหม่')";
+ "(CustomerID,FullName,Address) VALUES (3,'นุสรา นิติเจริญ', 'ล�ำพูน')";
db.execSQL(sql1);
db.execSQL(sql2);
db.execSQL(sql3);
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
}
public ArrayList<HashMap<String, String>> ShowAllData() { 2

try {
HashMap<String, String> map;

SQLiteDatabase db = this.getReadableDatabase(); 3
String sql = "SELECT * FROM " + tableName;
Cursor cur = db.rawQuery(sql, null); 4
if (cur != null) { 5
if (cur.moveToFirst()) {
do {
map = new HashMap<String, String>();
map.put("CustomerID", cur.getString(0));
map.put("FullName", cur.getString(1));
map.put("Address", cur.getString(2));
arr.add(map);
} while (cur.moveToNext());
}
}
cur.close();
db.close();
return arr;
return null;
}
}
}
5. เขียนโค้ด JAVA เพื่อแสดงข้อมูลจากฐานข้อมูล ดังต่อไปนี้

โค้ด JAVA ที่ z-1 ที่ 10-2 การแสดงข้อมูลจากฐานข้อมูลด้วย ListView (\src\ com.example.sqlitewithlistview\
MainActivity.java)
package com.example.sqlitewithlistview;
import android.widget.SimpleAdapter;
@Override
final DbSQLite db = new DbSQLite(this, null, null, 0); 6
final ArrayList<HashMap<String, String>> CustomersLists = db.ShowAllData(); 7
ListView lsv = (ListView) findViewById(R.id.lsvCustomers); 8
SimpleAdapter adt = new SimpleAdapter(MainActivity.this,

CustomersLists, R.layout.lsv_item,
part
1
new String[] { "CustomerID","FullName", "Address" },
new int[] {R.id.tvCustomerID,R.id.tvFullName, R.id.tvAddress});
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
String strCustomerID = CustomersLists.get(arg2).get("CustomerID").toString();
String strFullName = CustomersLists.get(arg2).get("FullName").toString();
String strAddress = CustomersLists.get(arg2).get("Address").toString();
String str = strCustomerID + " " + strFullName + " " + strAddress;
Toast.makeText(MainActivity.this,"รายการที่ถูกเลือก : " + str, Toast.LENGTH_
SHORT).show();
}
});
}
@Override
return true;
}
}
6.2 เลือก
6.1 แสดงข้อมูล
จากรูปที่ 10-12 ข้อมูลที่ปรากฏใน ListView เกิดจากการอ่านข้อมูลที่เก็บอยู่ในฐานข้อมูลนั่นเอง

ในคลาส DbSQLite มีการท�ำงานที่ส�ำคัญอยู่ 2 ส่วนคือ
1. ที่เหตุการณ์ onCreate() ก�ำหนดให้สร้างตารางตามชื่อที่เก็บอยู่ในตัวแปร tableName ในกรณีนี้
ชื่อว่า Customers โดยมี 3 ฟิลด์คือ CustomerID, FullName และ Address ทั้ง 3 ฟิลด์มีชนิด
ข้อมูลเป็นแบบ TEXT และก�ำหนดให้ฟลิ ด์ CustomerID ท�ำหน้าทีเ่ ป็น PRIMARY KEY ของตาราง
\src\com.example.sqlitewithlistview\DbSQLite.java
@Override
+ "(CustomerID TEXT PRIMARY KEY," + " FullName TEXT(50),"

+ "(CustomerID,FullName,Address) VALUES (1,'ศุภชัย สมพานิช', 'กรุงเทพ')";
+ "(CustomerID,FullName,Address) VALUES (2,'อดิเทพ มุ่งรัก', 'เชียงใหม่')";
+ "(CustomerID,FullName,Address) VALUES (3,'นุสรา นิติเจริญ', 'ล�ำพูน')";
db.execSQL(sql1);
db.execSQL(sql2);
db.execSQL(sql3);
}
จากนั้นให้เพิ่มข้อมูลตัวอย่างเข้าไป 3 เร็คคอร์ด โดยการใช้ชุดค�ำสั่ง SQL ประเภทเพิ่มข้อมูล (ค�ำสั่ง

INSERT) ร่วมกับเมธอด execSQL() ของพารามิเตอร์ db
2. สร้างเมธอดทีช่ อื่ ว่า ShowAllData() ท�ำหน้าทีแ่ สดงข้อมูลทัง้ หมดแบบไม่มเี งือ่ นไข คืนค่าเป็นข้อมูล
แบบ ArrayList ของ HashMap โดยที่
สร้างตัวแปรออบเจ็กต์ ArrayList<HashMap<String, String>> ที่ชื่อว่า arr ขึ้นมาก่อน
สร้างตัวแปรออบเจ็กต์ HashMap<String, String> ที่ชื่อว่า map
public ArrayList<HashMap<String, String>> ShowAllData() {
try {
HashMap<String, String> map;
3. สร้างตัวแปรออบเจ็กต์ SQLiteDatabase ที่ชื่อว่า db ขึ้นมาท�ำหน้าที่อ่านฐานข้อมูลที่สร้างขึ้น

มา ผ่านทางเมธอด getReadableDatabase() จากนั้นสร้างชุดค�ำสั่ง SQL เพื่อเลือกข้อมูลจาก
ตารางตามชื่อที่เก็บอยู่ในตัวแปร tableName แบบไม่มีเงื่อนไขเก็บไว้ที่ตัวแปร sql ก่อน
SQLiteDatabase db = this.getReadableDatabase();
String sql = "SELECT * FROM " + tableName;

4. คิวรีข้อมูลจากฐานข้อมูลเป็นหน้าที่ของเมธอด rawQuery() ให้ใช้ชุดค�ำสั่ง sql ผลการอ่านข้อมูล
part
1
ที่ได้เก็บไว้ในตัวแปรออบเจ็กต์ Cursor ที่ชื่อว่า cur
Cursor cur = db.rawQuery(sql, null);
5. เมื่อข้อมูลถูกเก็บอยู่ในตัวแปรออบเจ็กต์ cur แล้ว ให้ตรวจสอบว่าถ้าตัวแปรออบเจ็กต์ cur ไม่ใช่

ค่า null ตีความได้ว่ามีข้อมูลอยู่ในตัวแปรออบเจ็กต์ cur ให้ท�ำดังนี้
เลื่อนไปยังต�ำแหน่งแรกโดยใช้เมธอด moveToFirst()
จากนั้นสั่งให้วนลูปตามจ�ำนวนข้อมูลที่มีอยู่ (cur.moveToNext()) โดยแต่ละรอบของการ
วนลูปให้สร้างออบเจ็กต์ HashMap ทีช่ อ่ื ว่า map ขึน้ มาก�ำหนดให้เป็นข้อมูลแบบ 2 ชุด (<String,
String>()) และให้อ่านข้อมูลชุดปัจจุบันเก็บไว้ตามคอลัมน์ที่เราต้องการคือ CustomerID,
FullName และคอลัมน์ Address
เพิ่มข้อมูลของแถวปัจจุบันที่เก็บอยู่ในตัวแปร map ไว้ในตัวแปร arr ผ่านทางเมธอด add()
และวนลูปจนครบทุกรายการที่มีอยู่ในตัวแปร cur
if (cur != null) {
do {
map = new HashMap<String, String>();
map.put("CustomerID", cur.getString(0));
map.put("FullName", cur.getString(1));
map.put("Address", cur.getString(2));
arr.add(map);
}
}
cur.close();
db.close();
return arr;
ส่งผลให้ตัวแปร arr เก็บข้อมูลทั้งหมดที่ได้จากฐานข้อมูลและถือเป็นค่าส่งกลับของเมธอด Show-

AllData()
6. ต่อมาเป็นส่วนของการเรียกใช้งานคลาส DbSQLite อยู่ใน MainActivity.java เริ่มต้น ให้สร้าง
ตัวแปรออบเจ็กต์ DbSQLite ที่ชื่อว่า db ขึ้นมาก่อน
\src\com.example.sqlitewithlistview\MainActivity.java
final DbSQLite db = new DbSQLite(this, null, null, 0);
7. ในกรณีนเี้ ราต้องการแสดงข้อมูลทัง้ หมดแบบไม่มเี งือ่ นไข ซึง่ เป็นหน้าทีข่ องเมธอด ShowAllData()

ผลการท�ำงานที่ได้ให้เก็บไว้ที่ตัวแปรออบเจ็กต์ ArrayList ที่ชื่อว่า CustomersLists ก่อน
final ArrayList<HashMap<String, String>> CustomersLists = db.ShowAllData();

8. ต่อมาในกรณีนเี้ ราต้องการแสดงข้อมูลทีไ่ ด้ (CustomersLists) ใน ListView ให้อา่ น lsvCustomers
ที่อยู่ในส่วนแสดงผลปัจจุบันมาเก็บไว้ที่ตัวแปร lsv ก่อน จากนั้นให้สร้างตัวแปรออบเจ็กต์
SimpleAdapter ทีช่ อื่ ว่า adt ท�ำหน้าทีผ่ กู ข้อมูลเข้ากับทัง้ 3 คอลัมน์ (TextView ทีช่ อื่ ว่า tvCustomerID,
tvFullName และ tvAddress) ส่งผลให้ส่วนแสดงผลแสดงข้อมูลจากฐานข้อมูลแล้ว
ListView lsv = (ListView) findViewById(R.id.lsvCustomers);
SimpleAdapter adt = new SimpleAdapter(MainActivity.this,
CustomersLists, R.layout.lsv_item,
new String[] { "CustomerID","FullName", "Address" },
new int[] {R.id.tvCustomerID,R.id.tvFullName, R.id.tvAddress});
9. ท้ายที่สุดการตรวจสอบแถวที่ถูกคลิกเลือก ซึ่งอยู่ในเหตุการณ์ onItemClick() โดยก�ำหนดให้

อ่านข้อมูลจากคอลัมน์ CustomerID เก็บไว้ที่ตัวแปร strCustomerID
อ่านข้อมูลจากคอลัมน์ FullName เก็บไว้ที่ตัวแปร strFullName
อ่านข้อมูลจากคอลัมน์ Address เก็บไว้ที่ตัวแปร strAddress
จากนั้นรวมค่าของทั้ง 3 คอลัมน์เก็บไว้ในตัวแปร str และสั่งให้แสดงข้อมูลของแถวที่ถูกคลิกเลือก

แบบ Toast Notification
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
String strCustomerID = CustomersLists.get(arg2).get("CustomerID").toString();
String strFullName = CustomersLists.get(arg2).get("FullName").toString();
String strAddress = CustomersLists.get(arg2).get("Address").toString();
String str = strCustomerID + " " + strFullName + " " + strAddress;
Toast.makeText(MainActivity.this,"รายการที่ถูกเลือก : " + str, Toast.LENGTH_SHORT).
show();
}
});
}
การสร้างส่วนแสดงผลบันทึกข้อมูล
ในกรณีที่เราต้องการรับข้อมูลจากผู้ใช้งาน แล้วต้องการน�ำข้อมูลดังกล่าวไปบันทึกในฐานข้อมูลถือ
เป็นการท�ำงานพื้นฐานที่ผู้อ่านควรรู้ และสามารถน�ำไปประยุกต์ใช้ใน App ประเภทต่างๆ ได้มากมาย
ตัวอย่างที่ 10-3 การสร้างส่วนแสดงผลบันทึกข้อมูลมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า InsertAndShow
2. สร้างส่วนแสดงผลหลัก (activity_main.xml) ดังรูปที่ 10-13
ส่วนแสดงผลที่ได้ EditText
EditText
EditText
Button

part
1
สคริปต์ XML ที่ 10-3 การสร้างส่วนแสดงผลบันทึกข้อมูล (\res\layout\activity_main.xml)
<TextView
android:text="@string/strCustomerID"
<EditText
android:id="@+id/edtCustomerID"
android:ems="10"
android:inputType="number" >
<requestFocus />
</EditText>
<TextView
android:text="@string/strFullName" />
<EditText
android:ems="10"
android:inputType="textPersonName" />
<TextView
android:text="@string/strAddress" />
<EditText
android:id="@+id/edtAddress"
android:ems="10"
android:inputType="textPostalAddress" />
<Button
android:id="@+id/cmdAdd"
android:text="@string/cmdAdd" />
</LinearLayout>

3. ในกรณีนี้ผู้เขียนต้องการรับข้อมูลลูกค้าจากผู้ใช้งานประกอบด้วยรหัสลูกค้า (CustomerID),
ชือ่ -สกุล (FullName) และทีอ่ ยู่ (Address) จึงสร้างคลาสทีช่ อื่ ว่า Customers ขึน้ มาใหม่ทำ� หน้าที่
แทนข้อมูลลูกค้าที่เราต้องการเก็บไว้ในโฟล์ที่ชื่อว่า Customers.java ดังรูปที่ 10-14
โค้ด JAVA ที่ 10-3 การสร้างส่วนแสดงผลบันทึกข้อมูล (\src\com.example.insertandshow\Customers.java)
package com.example.insertandshow;
public class Customers {

private int _CustomerID;
private String _FullName;
private String _Address;
public void setCustomerID(int CustomerID) {

this._CustomerID = CustomerID;
}
public int getCustomerID() {

return this._CustomerID;
}
public void setFullName(String FullName) {

this._FullName = FullName;
}
public String getFullName() {

return this._FullName;
}
public void setAddress(String Address) {

this._Address = Address;
}
public String getAddress() {

return this._Address;
}
}
จากโค้ด JAVA ข้างต้นคลาส Customers ที่สร้างขึ้นมาประกอบด้วย 6 คุณสมบัติคือ

z คุณสมบัติ setCustomerID ท�ำหน้าที่ก�ำหนดรหัสลูกค้า
z คุณสมบัติ getCustomerID ท�ำหน้าที่อ่านรหัสลูกค้า

z คุณสมบัติ setFullName ท�ำหน้าที่ก�ำหนดชื่อ-สกุล
z คุณสมบัติ getFullName ท�ำหน้าที่อ่านชื่อ-สกุล
z คุณสมบัติ setAddress ท�ำหน้าที่ก�ำหนดที่อยู่
z คุณสมบัติ getAddress ท�ำหน้าที่อ่านที่อยู่

part
1
แสดงคลาสที่ชื่อว่า
Customers ในโปร
เจ็กต์
4. สร้างคลาสทีช่ อื่ ว่า DbSQLite ท�ำหน้าทีส่ ร้างฐานข้อมูล, เพิม่ ข้อมูล และแสดงข้อมูล ดังโค้ด JAVA
ต่อไปนี้
โค้ด JAVA ที่ 10-3 การสร้างส่วนแสดงผลบันทึกข้อมูล (\src\com.example.insertandshow\DbSQLite.java)
import java.util.List;
import android.database.Cursor;
import android.database.sqlite.SQLiteStatement;


int version) {
}
@Override
+ "(CustomerID INTEGER PRIMARY KEY," + " FullName TEXT(50),"
}

@Override
public void onUpgrade(SQLiteDatabase arg0, int arg1, int arg2) {
}
public long InsertData(int _CustomerID, String _FullName, String _Address) { 1

try {
SQLiteDatabase db = this.getWritableDatabase();
SQLiteStatement sqlCom;
String sqlAdd = "INSERT INTO " + tableName
+ "(CustomerID,FullName,Address) VALUES (?,?,?)";
sqlCom = db.compileStatement(sqlAdd); 2
sqlCom.bindLong(1, _CustomerID);
sqlCom.bindString(2, _FullName);
sqlCom.bindString(3, _Address);
return sqlCom.executeInsert();
} catch (Exception e) { 3
return -1;
}
}
public List<Customers> ShowAllCustomers() { 4

try {
List<Customers> CustomersLists = new ArrayList<Customers>();
String strSQL = "SELECT * FROM " + tableName;
Cursor cur = db.rawQuery(strSQL, null);
if (cur != null) { 5
do {
Customers c = new Customers();
c.setCustomerID(cur.getInt(0));
c.setFullName(cur.getString(1));
c.setAddress(cur.getString(2));
CustomersLists.add(c);
}
}
cur.close();
db.close();
return CustomersLists;
return null;
}
}
}

5. เขียนโค้ด JAVA เรียกใช้งานคลาส DbSQLite ดังโค้ดต่อไปนี้
part
1
โค้ด JAVA ที่ 10-3 การสร้างส่วนแสดงผลบันทึกข้อมูล (\src\com.example.insertandshow\MainActivity.java)
import java.util.List;
@Override
final EditText edtCustomerID = (EditText) findViewById(R.id.edtCustomerID); 7

final EditText edtFullName = (EditText) findViewById(R.id.edtFullName);
final EditText edtAddress = (EditText) findViewById(R.id.edtAddress);
Button cmd = (Button) findViewById(R.id.cmdAdd);
try {
String CustomerID=edtCustomerID.getText().toString();
int _CustomerID=Integer.parseInt(CustomerID);
String _FullName=edtFullName.getText().toString();
String _Address=edtAddress.getText().toString();
long r = db.InsertData(_CustomerID,_FullName,_Address); 9
if (r > 0) {
"เพิ่มข้อมูล 1 รายการแล้ว", Toast.LENGTH_SHORT).show();
} else {
"ไม่สามารถเพิ่มข้อมูลได้ !!!",
}
"ไม่สามารถเพิ่มข้อมูลได้ เนื่องจาก : "
+ e.getMessage(), Toast.LENGTH_SHORT).show();
}
List<Customers> CustomersLists = db.ShowAllCustomers();
if (CustomersLists != null) {
for (Customers c : CustomersLists) {
"ข้อมูลลูกค้า : " + c.getCustomerID() + "-"

+ c.getFullName() + "-"
+ c.getAddress(), Toast.LENGTH_SHORT).show();
}
} else {
Toast.makeText(MainActivity.this,"ไม่มีข้อมูลลูกค้าตามที่คุณต้องการ",
}
}
});
}
@Override
return true;
}
}
6.2 คลิก
จากรูปที่ 10-15 ให้ผู้อ่านป้อนข้อมูลให้ครบทุกช่อง จากนั้นคลิกปุ่ม เพื่อ

เพิ่มข้อมูลลงในฐานข้อมูล ถ้าไม่มีข้อผิดพลาดใดๆ จะมีข้อความแจ้งให้ทราบว่าเพิ่มข้อมูลจ�ำนวน 1 รายการ
และแสดงข้อมูลเท่าที่มีอยู่ให้ผู้อ่านทราบ
ในคลาส DbSQLite มีเมธอดที่ส�ำคัญอยู่ 2 เมธอดคือ
1. เมธอด InsertData() ท�ำหน้าทีเ่ พิม่ ข้อมูล ต้องการพารามิเตอร์ 3 ตัวคือ รหัสลูกค้า (_CustomerID),
ชื่อ-สกุล (_FullName) และที่อยู่ (_Address) จากนั้นให้อ่านฐานข้อมูลที่ต้องการใช้งานผ่านทาง
เมธอด getWritableDatabase() มาเก็บไว้ที่ตัวแปรออบเจ็กต์ SQLiteDatabase ที่ชื่อว่า db
ก่อน และให้ท�ำดังนี้
สร้างตัวแปรออบเจ็กต์ SQLiteStatement ที่ชื่อว่า sqlCom
สร้างชุดค�ำสัง ่ SQL เพือ่ เพิม่ ข้อมูลลงในตารางตามชือ่ ทีเ่ ก็บอยูใ่ นตัวแปร tabaleName ได้แก่
ฟิลด์ CustomerID, FullName และ Address ถือเป็นชุดค�ำสัง่ SQL ที่ยังไม่สมบูรณ์เพราะว่า
ยังไม่มีการก�ำหนดค่าใดๆ ให้กับทั้ง 3 ฟิลด์
\src\com.example.insertandshow\DbSQLite.java
part
1
public long InsertData(int _CustomerID, String _FullName, String _Address) {
try {
SQLiteDatabase db = this.getWritableDatabase();
SQLiteStatement sqlCom;
String sqlAdd = "INSERT INTO " + tableName
+ "(CustomerID,FullName,Address) VALUES (?,?,?)";
2. สัง่ ให้รนั ชุดค�ำสัง่ SQL ทีเ่ ก็บอยูใ่ นตัวแปร sqlAdd ด้วยเมธอด compileStatement() ของตัวแปร
ออบเจ็กต์ db ผลการท�ำงานเก็บไว้ที่ตัวแปรออบเจ็กต์ sqlCom เนื่องจากชุดค�ำสั่ง sqlAdd เป็น
ชุดค�ำสั่ง SQL ที่ยังไม่สมบูรณ์ ต้องมีการก�ำหนดค่าให้ครบทั้ง 3 ฟิลด์เสียก่อนและให้ท�ำดังนี้
กำ � หนดค่าให้กบั ฟิลด์ CustomerID ผ่านทางเมธอด bindLong() เพราะว่าฟิลด์ CustomerID
มีชนิดข้อมูลเป็นตัวเลข int ในขณะสร้างขึ้นมา โดยอ่านค่าจากตารางมิเตอร์ _CustomerID
ก�ำหนดค่าให้กับฟิลด์ FullName ผ่านทางเมธอด bindString() เพราะว่าฟิลด์ FullName มี
ชนิดข้อมูลเป็นข้อความ String ในขณะสร้างขึ้นมา โดยอ่านค่าจากตารางมิเตอร์ _FullName

ก�ำหนดค่าให้กับฟิลด์ Address ผ่านทางเมธอด bindLong() เพราะว่าฟิลด์ CustomerID
มีชนิดข้อมูลเป็นข้อความ String ในขณะสร้างขึ้นมา โดยอ่านค่าจากตารางมิเตอร์ _Address
เมื่อก�ำหนดค่าครบทั้ง 3 ฟิลด์แล้ว สั่งให้รันชุดค�ำสั่งเพิ่มข้อมูลด้วยเมธอด executeInsert() จ�ำนวน
เร็คคอร์ดที่ถูกเพิ่มเข้าไปในฐานข้อมูล ถือเป็นค่าส่งกลับของเมธอด InsertData()
sqlCom = db.compileStatement(sqlAdd);
sqlCom.bindLong(1, _CustomerID);
sqlCom.bindString(2, _FullName);
sqlCom.bindString(3, _Address);
return sqlCom.executeInsert();
3. ในกรณีที่ไม่สามารถเพิ่มข้อมูลได้ก�ำหนดให้เมธอด InsertData() คืนค่าเป็น -1

return -1;
}
}
4. เมธอด ShowAllCustomers() ท�ำหน้าทีแ่ สดงข้อมูลลูกค้าทัง้ หมดแบบไม่มเี งือ่ นไข โดยสร้างชุดค�ำสัง่

SQL คิวรีข้อมูลแบบไม่มีเงื่อนไขและข้อมูลที่ได้เก็บไว้ในตัวแปรออบเจ็กต์ Cursor ที่ชื่อว่า cur
public List<Customers> ShowAllCustomers() {
try {
List<Customers> CustomersLists = new ArrayList<Customers>();
String strSQL = "SELECT * FROM " + tableName;
Cursor cur = db.rawQuery(strSQL, null);

5. สัง่ ให้วนลูปเพือ่ เก็บข้อมูลลูกค้าทีไ่ ด้ไว้ในตัวแปรออบเจ็กต์ List<Customers> ทีช่ อื่ ว่า Customers
Lists และถือเป็นค่าส่งกลับของเมธอด ShowAllCustomers()
if (cur != null) {
do {
Customers c = new Customers();
c.setCustomerID(cur.getInt(0));
c.setFullName(cur.getString(1));
c.setAddress(cur.getString(2));
CustomersLists.add(c);
}
}
cur.close();
db.close();
return CustomersLists;
6. มาที่ส่วนของการเรียกใช้งานคลาส DbSQLite เริ่มต้นให้สร้างตัวแปรออบเจ็กต์ DbSQLite

ที่ชื่อว่า db ขึ้นมาท�ำหน้าที่อ่านฐานข้อมูลที่สนใจก่อน
\src\com.example.insertandshow\MainActivity.java
@Override
7. ที่ส่วนแสดงผลเราต้องการข้อมูลจากผู้ใช้ 3 อย่างคือ
รหัสลูกค้า ให้อ่านค่ามาเก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชื่อว่า edtCustomerID
ชื่อ-สกุล ให้อ่านค่ามาเก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชื่อว่า edtFullName
ที่อยู่ ให้อ่านค่ามาเก็บไว้ที่ตัวแปรออบเจ็กต์ EditText ที่ชื่อว่า edtAddress
ส่วนปุ่ม ให้เก็บไว้ที่ตัวแปรออบเจ็กต์ Button ที่ชื่อว่า cmd

final EditText edtCustomerID = (EditText) findViewById(R.id.edtCustomerID);
final EditText edtFullName = (EditText) findViewById(R.id.edtFullName);
final EditText edtAddress = (EditText) findViewById(R.id.edtAddress);
Button cmd = (Button) findViewById(R.id.cmdAdd);
8. ในเหตุการณ์ onClick() ของปุม่ cmd ซึง่ ท�ำหน้าทีเ่ พิม่ ข้อมูล ให้อา่ นค่ารหัสลูกค้า, ชือ่ -สกุล และที่
อยูท่ ผี่ ใู้ ช้ปอ้ นในส่วนแสดงผลเก็บไว้ในตัวแปร _CustomerID, _FullName และตัวแปร _Address
ตามล�ำดับก่อน
try {
String CustomerID=edtCustomerID.getText().toString();
int _CustomerID=Integer.parseInt(CustomerID);
String _FullName=edtFullName.getText().toString();
String _Address=edtAddress.getText().toString();

part
9. ท้ายทีส่ ดุ การเพิม่ ข้อมูลเป็นหน้าทีข่ องเมธอด InsertData() โดยต้องการพารามิเตอร์ 3 ตัว ให้ผอู้ า่ น

1
ส่งค่าให้ครบทั้ง 3 ตัวก็จะเป็นการเพิ่มข้อมูลอย่างสมบูรณ์
long r = db.InsertData(_CustomerID,_FullName,_Address);
if (r > 0) {
"เพิ่มข้อมูล 1 รายการแล้ว", Toast.LENGTH_SHORT).show();
การท�ำงานกับระบบฐานข้อมูลที่ผู้เขียนเลือกมาน�ำเสนอในบทนี้ ผู้อ่านสามารถน�ำไปประยุกต์ต่อยอด
ได้มากมาย ขึ้นอยู่กับความต้องการของ App ว่าต้องการเก็บข้อมูลในฐานข้อมูลเพื่อจุดประสงค์ใด

2
part
ตัวอย่างการพัฒนา Android App อย่างง่าย

บทที่ 11 สร้างแอพพลิเคชัน MiniBrowser
บทที่ 12 สร้างแอพพลิเคชันกระจกวิเศษ
บทที่ 13 สร้างแอพพลิเคชันเบอร์โทรฉุกเฉิน
11
สร้างแอพพลิเคชัน MiniBrowser
ในปัจจุบนั การเล่นอินเทอร์เน็ตบนอุปกรณ์ SmartPhone หรือ Tablet ถือเป็นเรือ่ งปกติไปแล้ว ซึง่ ผูอ้ า่ น
สามารถสร้างบราวเซอร์ขนาดเล็กส�ำหรับเล่นอินเทอร์เน็ตบนอุปกรณ์ SmartPhone หรือ Tablet ได้ โดยใช้ widget
ที่ชื่อว่า WebView ดังรูปที่ 11 1
แสดง widget ที่
ชื่อว่า WebView
การสร้างบราวเซอร์ขนาดเล็กมีขั้นตอนดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า MiniBrowser
แสดงส่วน
แสดงผลที่ได้
จากรูปที่ 11-2 ได้สคริปต์ XML ดังต่อไปนี้

สคริปต์ XML ที่ใช้ใน Workshop ที่ชื่อว่า MiniBrowser (\res\layout\activity_main.xml)
<LinearLayout
<EditText
android:id="@+id/edtURL"
android:layout_weight="1"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="@+id/cmdGo"
style="?android:attr/buttonStyleSmall"
android:text="@string/cmdGo" />
</LinearLayout>

<WebView
part
2
android:id="@+id/wvMain"
android:layout_height="match_parent" />
</LinearLayout>

โค้ด JAVA ที่ใช้ใน Workshop ที่ชื่อว่า MiniBrowser (\src\com.example.minibrowser\MainActivity.java)
package com.example.minibrowser;
import android.annotation.SuppressLint;
import android.view.KeyEvent;
import android.view.View.OnKeyListener;
import android.webkit.WebView;
@SuppressLint(“SetJavaScriptEnabled”)
EditText edt;
@Override
edt = (EditText) findViewById(R.id.edtURL);

edt.setOnKeyListener(new OnKeyListener() { 4
public boolean onKey(View arg0, int arg1, KeyEvent arg2) {
if ((arg1 == KeyEvent.KEYCODE_ENTER)
&& (arg2.getAction() == KeyEvent.ACTION_DOWN)) {
if (edt.getText().toString().trim() != “”) {
LoadData();
return true;
}
}
return false;
}
});
Button cmd = (Button) findViewById(R.id.cmdGo);

LoadData();
}
});
}
บทที่ 11 สร้างแอพพลิเคชัน MiniBrowser 241

private void LoadData() { 1
String CurrentURL = edt.getText().toString().trim();
WebView wv = (WebView) findViewById(R.id.wvMain);
wv.getSettings().setJavaScriptEnabled(true);
if ((CurrentURL.startsWith("http://")) || (CurrentURL.startsWith("https://"))) { 2
wv.loadUrl(CurrentURL);
}else {
wv.loadUrl("http://" + CurrentURL);
}
}
@Override
return true;
}
}
ผลการรันโปรเจ็กต์ 4.2 คลิก
MiniBrowser
4.1 กรอก URL
จากรูปที่ 11-3 ผูเ้ ขียนทดสอบเข้าเว็บ google ที่ www.google.com พบว่า เป็นการแสดงเว็บไซต์แบบ

เต็มส่วนแสดงผลปัจจุบัน
1. เริ่มต้นสร้างฟังก์ชันที่ชื่อว่า LoadData() ขึ้นมาท�ำหน้าที่โหลดข้อมูลจากเว็บไซต์ที่ผู้ใช้ป้อนเข้ามา
โดยที่
·อ่าน URL ที่ผู้ใช้ป้อนเข้ามาเก็บไว้ที่ตัวแปร CurrentURL ก่อน
·อ่าน WebView ที่ชื่อว่า wvMain เก็บไว้ที่ตัวแปรออบเจ็กต์ WebView ที่ชื่อว่า wv ก่อน
·ก�ำหนดให้ wv สามารถใช้ภาษา JavaScript ได้ด้วย ผ่านทางเมธอดที่ชื่อว่า setJavaScript
Enabled() ให้มีค่าเท่ากับ true

\src\com.example.minibrowser\MainActivity.java
part
2
private void LoadData() {
String CurrentURL = edt.getText().toString().trim();
WebView wv = (WebView) findViewById(R.id.wvMain);
wv.getSettings().setJavaScriptEnabled(true);
2. ตรวจสอบว่า URL ที่ผู้ใช้ป้อนเข้ามามีค�ำว่า http:// หรือ https:// หรือไม่ โดยที่

ถ้ามีการป้อนเข้ามา ถือว่าเป็น URL ที่สมบูรณ์แล้วสั่งให้โหลดเว็บไซต์ดังกล่าวผ่านทาง
เมธอด loadUrl()
if ((CurrentURL.startsWith("http://")) || (CurrentURL.startsWith("https://"))) {
wv.loadUrl(CurrentURL);
แต่ถ้าไม่มีการป้อนเข้ามา ให้เติมข้อความ http:// ด้านหน้าของตัวแปร CurrentURL ก่อน

แล้วค่อยเรียกเมธอด loadUrl() ให้ท�ำงาน
}else {
wv.loadUrl("http://" + CurrentURL);
}
}
3. ในเหตุการณ์ onCreate() ให้อ่าน EditText ซึ่งท�ำหน้าที่ให้ผู้ใช้ป้อน URL เข้ามาเก็บไว้ที่ตัวแปร

ออบเจ็กต์ edt ก่อน
@SuppressLint("SetJavaScriptEnabled")
EditText edt;
@Override
edt = (EditText) findViewById(R.id.edtURL);
4. การสั่งให้โหลดข้อมูล (สั่งให้ฟังก์ชัน LoadData() ท�ำงาน) มี 2 กรณีคือ

เมื่อผู้ใช้ป้อน URL แล้ว กดปุ่ม ส่งผลให้เกิดเหตุการณ์ onKey() ขึ้นมาก็จะมีการ
ตรวจสอบว่า ถ้าผูใ้ ช้กดปุม่ (พารามิเตอร์ arg1 เท่ากับ KEYCODE_ENTER กับพารามิเตอร์
arg2 เท่ากับ ACTION_DOWN) ก็จะสั่งให้ฟังก์ชัน LoadData() ท�ำงาน
edt.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View arg0, int arg1, KeyEvent arg2) {
if ((arg1 == KeyEvent.KEYCODE_ENTER)
&& (arg2.getAction() == KeyEvent.ACTION_DOWN)) {
บทที่ 11 สร้างแอพพลิเคชัน MiniBrowser 243

if (edt.getText().toString().trim() != "") {
LoadData();
return true;
}
}
return false;
}
});
กรณีคลิกปุ่ม ในส่วนแสดงผลก็จะสั่งให้ฟังก์ชัน LoadData() ท�ำงานเช่นกัน

Button cmd = (Button) findViewById(R.id.cmdGo);
LoadData();
}
});
}
5. ท้ายที่สุดในกรณีนี้เราต้องการติดต่อกับเว็บไซต์ผ่านทางอินเทอร์เน็ตจึงต้องมีการก�ำหนดสิทธิ์
เพิม่ เติมในไฟล์ AndroidManifest.xml ให้กบั โปรเจ็กต์ เพือ่ ให้สามารถเข้าถึงอินเทอร์เน็ตได้นนั่ เอง
ดังรูปที่ 11 4
สิทธิ์เพิ่มเติม

12
สร้างแอพพลิเคชันกระจกวิเศษ
จากที่ผู้เขียนใช้มือถือ HTC One X ซึ่งจะมี App ตัวหนึ่งที่ติดตั้งมากับเครื่อง ท�ำหน้าที่เปลี่ยนมือถือ
ของเราให้กลายเป็นกระจกส่องหน้า ในบทนี้ผู้เขียนจึงจะแนะน�ำให้สร้าง App นี้โดยอาศัย widget ที่ชื่อว่า
SurfaceView ในที่นี้ผู้เขียนตั้งชื่อว่า “กระจกวิเศษ”
แสดง widget ที่ชื่อว่า
SurfaceView
โดยมีขั้นตอนการสร้างดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า MagicMirror

สคริปต์ XML ที่ใช้ใน Workshop ที่ชื่อว่า MagicMirror (\res\layout\activity_main.xml)
<SurfaceView
android:id="@+id/sfMain"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true" />
</RelativeLayout>

โค้ด JAVA ที่ใช้ใน Workshop ที่ชื่อว่า MagicMirror (\src\com.example.magicmirror\MainActivity.java)
package com.example.magicmirror;
import android.graphics.PixelFormat;
import android.hardware.Camera;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity implements SurfaceHolder.Callback { 1
part
2
Camera cam;
boolean IsPreview = false;
SurfaceView sfv;
SurfaceHolder sfh;
@Override
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main); 3
getWindow().setFormat(PixelFormat.UNKNOWN);
sfv = (SurfaceView) findViewById(R.id.sfMain);
sfh = sfv.getHolder();
sfh.addCallback(this);
}
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) { 4
if (IsPreview) {
IsPreview = false;
cam.stopPreview();
}
if (cam != null) { 5
try {
IsPreview = true;
cam.setPreviewDisplay(sfh);
cam.startPreview();
IsPreview = false;
e.printStackTrace();
}
}
}
public void surfaceCreated(SurfaceHolder holder) { 6

int camNum = Camera.getNumberOfCameras();
Camera.CameraInfo camInfo = new Camera.CameraInfo();
for (int i = 0; i < camNum; i++) { 7
Camera.getCameraInfo(i, camInfo);
if (camInfo.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
try {
IsPreview = true;
cam = Camera.open(i);
IsPreview = false;
}
}
}
}
บทที่ 12 สร้างแอพพลิเคชันกระจกวิเศษ 247

public void surfaceDestroyed(SurfaceHolder holder) { 8
IsPreview = false;
cam.stopPreview();
cam.release();
cam = null;
}
@Override
return true;
}
}
ผลการรันโปรเจ็กต์
MagicMirror บน
Android Emulator
จากรูปที่ 12-3 เมื่อโปรเจ็กต์ MagicMirror นี้รัน App บนอุปกรณ์จริงจะไม่มีส่วนแสดงผลแต่อย่างใด

เพราะว่าเป็นการก�ำหนดให้ใช้กล้องหน้าทันทีนั่นเอง
1. เริ่มต้นก�ำหนดให้ MainActivity สืบทอดมาจากคลาสที่ชื่อว่า SurfaceHoloder.Callback จากนั้น
สร้างตัวแปรดังต่อไปนี้
ตัวแปรออบเจ็กต์ Camera ที่ชื่อว่า cam ท�ำหน้าที่แทนกล้องถ่ายภาพ ในกรณีนี้เราสนใจ
แต่กล้องหน้าเท่านั้น
ตัวแปร IsPreview ท�ำหน้าที่บอกสถานะว่า ส่วนแสดงผลปัจจุบันก�ำลังแสดงผลด้วยกล้อง
หรือไม่ ก�ำหนดค่าเริ่มต้นเป็น false ซึ่งหมายถึงส่วนแสดงผลปัจจุบันยังไม่มีการแสดงผล

ด้วยกล้องแต่อย่างใด
ตั ว แปรออบเจ็ ก ต์ SurfaceView ที่ ชื่ อ ว่ า sfv ท� ำ หน้ า ที่ เ ป็ น ตั ว แทน widget ที่ ชื่ อ ว่ า
SurfaceView
ตัวแปรออบเจ็กต์ SurfaceHolder ที่ชื่อว่า sfh ท�ำหน้าที่ผูกการท�ำงานเข้ากับ SurfaceView

\src\com.example.magicmirror\MainActivity.java
part
2
public class MainActivity extends Activity implements SurfaceHolder.Callback {
Camera cam;
boolean IsPreview = false;
SurfaceView sfv;
SurfaceHolder sfh;
2. ในเหตุการณ์ onCreate() ในกรณีนี้ผู้เขียนต้องการใช้พื้นที่ทั้งหมดของส่วนแสดงผลจึงก�ำหนด

เงื่อนไขเพิ่มเติมดังต่อไปนี้
ไม่ต้องแสดงแถบ Title โดยการใช้ฟังก์ชัน requestWindowFeature() ก�ำหนดค่าเป็น
FEATURE_NO_TITLE
แสดงผลแบบเต็มพืน ้ ทีโ่ ดยการใช้เมธอด addFlags() ของฟังก์ชนั getWindow() และก�ำหนด
ค่าเป็น FLAG_FULLSCREEN
@Override
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
3. ผูกการท�ำงานของตัวแปรออบเจ็กต์ sfv กับ sfh เข้าด้วยกัน

getWindow().setFormat(PixelFormat.UNKNOWN);
sfv = (SurfaceView) findViewById(R.id.sfMain);
sfh = sfv.getHolder();
sfh.addCallback(this);
}
การก�ำหนดให้ MainActivity สืบทอดคลาสมาจากคลาส SurfaceHolder.Callback ต้องมีการเขียนโค้ด

ให้กับเมธอด surfaceChanged(), surfaceCreated() และเมธอด surfaceDestroyed()
4. เริ่มที่เมธอด surfaceChanged() เกิดขึ้นในกรณีส่วนแสดงผลเกิดการเปลี่ยนแปลง โดยที่
ถ้าอยู่ในสถานะใช้กล้องหน้าอยู่ (ตัวแปร IsPreview มีค่าเท่ากับ true) สั่งให้มีค่าเป็น false
และหยุดการใช้งานกล้องโดยการใช้เมธอด stopPreview() ของตัวแปรออบเจ็กต์ cam

public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
if (IsPreview) {
IsPreview = false;
cam.stopPreview();
}

5. ตรวจสอบว่าถ้าตัวแปรออบเจ็กต์ cam มีค่าไม่เท่ากับ null ตีความได้ว่ามีการใช้งานกล้องแล้ว ให้
ตรวจสอบต่อว่า
ถ้ายังใช้กล้องได้ให้ใช้ต่อไป แต่สิ่งที่ต้องไม่ลืมคือ ก�ำหนดให้ตัวแปร IsPreview มีค่าเท่ากับ
true ซึ่งหมายถึง ก�ำลังใช้กล้องหน้าอยู่

if (cam != null) {
try {
IsPreview = true;
cam.setPreviewDisplay(sfh);
cam.startPreview();
แต่ถ้าไม่อยู่ในสถานะใช้งานกล้องหน้าได้ก�ำหนดให้ตัวแปร IsPreview มีค่าเท่ากับ false

IsPreview = false;
}
}
}
6. ทีเ่ มธอด surfaceCreate() ท�ำหน้าทีส่ งั่ ให้เริม่ ต้นใช้กล้องก็ตอ้ งมีการตรวจสอบก่อนว่า บนอุปกรณ์

มีกล้องอยู่กี่ตัว กล่าวคือ
อ่านจ�ำนวนกล้องผ่านทางเมธอด getNumberOfCameras() เก็บไว้ทต ่ี วั แปร camNum ก่อน
อ่านรายละเอียดของกล้องเก็บไว้ที่ตัวแปร CameraInfo
public void surfaceCreated(SurfaceHolder holder) {
int camNum = Camera.getNumberOfCameras();
Camera.CameraInfo camInfo = new Camera.CameraInfo();
7. สั่งให้วนลูปตามจ�ำนวนกล้อง (ตัวแปร camNum) ในแต่ละรอบของการวนลูป เราสนใจเฉพาะ

กล้องหน้าเท่านั้น (CAMERA_FACING_FRONT) โดย
ก�ำหนดค่าตัวแปร IsPreview ให้มีค่าเท่ากับ true
สั่งให้ใช้กล้องหน้าด้วยเมธอด open() ตามจ�ำนวนกล้องปัจจุบันที่เก็บอยู่ในตัวแปร i
for (int i = 0; i < camNum; i++) {
Camera.getCameraInfo(i, camInfo);
if (camInfo.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
try {
IsPreview = true;
cam = Camera.open(i);
IsPreview = false;
}
}
}
}

part
8. ในกรณีที่ผู้ใช้ยกเลิกการใช้งาน App เป็นหน้าที่ของเมธอด surfaceDestroyed() โดยให้คืนค่า

2
กลับไป ณ จุดเริ่มต้นกล่าวคือ
·ตัวแปร IsPreview มีค่าเท่ากับ false
·หยุดการใช้งานกล้องหน้าด้วยเมธอด stopPreview()
·คืนทรัพยากรสู่ระบบด้วยเมธอด release() และก�ำหนดค่าเป็น null
public void surfaceDestroyed(SurfaceHolder holder) {
IsPreview = false;
cam.stopPreview();
cam.release();
cam = null;
}
9. โปรเจ็กต์นี้มีการใช้งานกล้องหน้าซึ่งถือเป็น hardware ประเภทหนึ่ง จึงต้องมีการก�ำหนดสิทธิ์

เพิ่มเติมในไฟล์ AndroidManifest.xml ด้วยเช่นกัน ดังรูปที่ 12-4
สิทธิ์ใช้งานกล้อง
หน้า

13
สร้างแอพพลิเคชันเบอร์โทรฉุกเฉิน
การใช้งาน Smartphone ของแต่ละคน ย่อมมีพฤติกรรมทีแ่ ตกต่างกันไปตามสภาพแวดล้อมของตัวเอง
เช่น บางคนสนใจเรื่องอาหาร, การลงทุนซื้อหุ้น, ท่องเที่ยว, ซื้อเสื้อผ้า, ซื้อหนังสือ เป็นต้น ส่งผลให้ความสนใจ
ของแต่ละคนเป็นไปตามความชอบส่วนบุคคล ผู้เขียนจึงสมมติว่าความสนใจในล�ำดับแรกของแต่ละคนก็จะเก็บ
เบอร์โทรศัพท์ของบุคคลหรือสิ่งที่ชอบ สิ่งที่อยู่รอบตัวเราจริงๆ บันทึกไว้ใน Contact หรือรายชื่อติดต่อของเรา
แต่ในบางครั้งบางจังหวะเราอาจจะมีความจ�ำเป็นต้องมีการติดต่อกับสิ่งอื่นๆ ที่อยู่นอกเหนือไปจาก
ความสนใจหลักของเรา จึงน่าที่จะมี App สัก 1 ตัวเข้ามาท�ำหน้าที่เก็บเบอร์โทรศัพท์ติดต่อเหล่านี้ไว้ โดยที่
เราไม่จ�ำเป็นต้องบันทึกไว้ใน Contact ของเรา โดยแยกออกเป็นหมวดหมู่เพื่อสะดวกต่อการค้นหา และใช้งาน
ผูเ้ ขียนไม่ทราบว่าผูอ้ า่ นแต่ละท่านก�ำลังสนใจอะไรอยูบ่ า้ ง ซึง่ ถ้าแยกออกเป็นประเภทก็จะมีมากมายนับ
ไม่ถว้ น ดังนัน้ รูปแบบการน�ำเสนอใน Workshop นี้ จึงเป็นการน�ำเสนอแบบยกตัวอย่างในขัน้ ต้น หากในภายหลัง
ผู้อ่านสนใจในเรื่องใดก็สามารถน�ำไปปรับปรุง ให้เป็นไปตามความต้องการของแต่ละคนเพื่อให้ตรงกับความ
ต้องการของผู้อ่านแต่ละท่าน
ในที่นี้เบอร์โทรศัพท์ที่น�ำเสนอใน Workshop นี้แยกออกเป็น 3 ประเภทคือ
z เบอร์โทรเหตุฉุกเฉิน
z เบอร์โทรสาธารณูปโภค
z เบอร์โทรธนาคาร
โดยมีขั้นตอนการพัฒนาดังนี้
1. สร้างโปรเจ็กต์ Android เวอร์ชัน 4.0.3 ตั้งชื่อว่า EmergencyCall
สคริปต์ XML ที่ใช้ใน Workshop ที่ชื่อว่า EmergencyCall (\res\layout\activity_main.xml)
<TextView
android:text="@+id/tvMain"
android:textSize="20dp" />
</RelativeLayout>

โค้ด JAVA ที่ใช้ใน Workshop ที่ชื่อว่า EmergencyCall (\src\com.example.emergencycall\MainActivity.java)
package com.example.emergency.call;
import android.net.Uri;

String[] MainMenu = { "เหตุฉุกเฉิน", "สาธารณูปโภค", "ธนาคาร" };
String[] Sub2 = new String[] { "การไฟฟ้า", "การประปา", "กลับหน้าแรก" };
String[] Sub3 = new String[] { "ธนาคารกรุงเทพ", "ธนาคารไทยพาณิชย์",
"ธนาคารกรุงไทย", "กลับหน้าแรก" };
String strMain = ""; 2

ArrayAdapter<String> subAdt2;
@Override
subAdt2 = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, Sub2);
}

part
2
if (strMain.trim() == "เหตุฉุกเฉิน") {
Intent it = new Intent(Intent.ACTION_CALL);
it.setData(Uri.parse("tel:191"));
startActivity(it);
} else { 4
if (strMain.trim() == "สาธารณูปโภค") {
setListAdapter(subAdt2);
} else { 5
if (strMain.trim() == "ธนาคาร") {
}
}
}
} else { 6
String strSub = getListView().getItemAtPosition(position)
.toString();
} else if (strSub == "การไฟฟ้า") { 7
startActivity(it);
} else if (strSub == "การปะปา") {
startActivity(it);
} else if (strSub == "ธนาคารกรุงเทพ") {
startActivity(it);
} else if (strSub == "ธนาคารไทยพาณิชย์") {
startActivity(it);
} else if (strSub == "ธนาคารกรุงไทย") {
startActivity(it);
}
}
}
@Override
return true;
}
}
บทที่ 13 สร้างแอพพลิเคชันเบอร์โทรฉุกเฉิน 255

4. กรณีประเภทเบอร์โทรฉุกเฉิน ผู้เขียนคิดว่าด้วยความที่เป็นเหตุฉุกเฉินก็ต้องเป็นการกดเพียง
ครั้งเดียวแล้วโทรออกไปที่เบอร์ 191 เลย ผู้ใช้ไม่ควรกดเลือกอะไรอีก ดังรูปที่ 13-2
กรณีกดประเภท
เบอร์เหตุฉุกเฉิน 4.1 เลือก
ใน Android
Emulator
5. ในกรณีประเภทสาธารณูปโภคควรจะมีให้เลือกว่า เราจะโทรออกไปที่การไฟฟ้า หรือการประปา

เป็นต้น
กรณีเลือกที่เมนู
สาธารณูปโภค
5.1 เลือก 5.2 เลือก
6. กรณีเลือกเมนูธนาคารผู้เขียนก�ำหนดไว้ 3 ธนาคาร
กรณีเลือกที่เมนู
ธนาคาร

part
2
1. เริ่มต้นให้แยกส่วนแสดงผลออกเป็น 2 ส่วนใหญ่ๆ คือ
เมนูหลัก เก็บไว้ในตัวแปรที่ชื่อว่า MainMenu ในกรณีนี้ผู้เขียนก�ำหนดไว้เพียง 3 ประเภท
เมนูย่อย มีเพียง 2 เมนูคือ เมนูสาธารณูปโภคเก็บไว้ในตัวแปร Sub2 ส่วนเมนูธนาคาร
เก็บไว้ในตัวแปร Sub3
\src\com.example.emergencycall\MainActivity.java
String[] MainMenu = { "เหตุฉุกเฉิน", "สาธารณูปโภค", "ธนาคาร" };
String[] Sub2 = new String[] { "การไฟฟ้า", "การประปา", "กลับหน้าแรก" };
String[] Sub3 = new String[] { "ธนาคารกรุงเทพ", "ธนาคารไทยพาณิชย์",
"ธนาคารกรุงไทย", "กลับหน้าแรก" };
จากโค้ด JAVA ข้างต้นผู้อ่านสามารถเพิ่มเมนูหลักและเมนูย่อยได้ตามที่ต้องการ

2. ให้ใช้ตัวแปรออบเจ็กต์ ArrayAdapter เข้ามาท�ำหน้าที่ผูกแต่ละรายการตามจ�ำนวนเมนูที่เรามีอยู่
ทั้งหมด ในกรณีนี้มีทั้งหมด 3 เมนู (เมนูหลัก 1 เมนูส่วนเมนูย่อยมีอีก 2 เมนู) โดยที่
เมนูหลัก อยู่ในความรับผิดชอบของตัวแปรออบเจ็กต์ mainAdt
เมนูย่อยสาธารณูปโภค อยู่ในความรับผิดชอบของตัวแปรออบเจ็กต์ subAdt2
เมนูย่อยธนาคาร อยู่ในความรับผิดชอบของตัวแปรออบเจ็กต์ subAdt3
String strMain = "";
@Override
}
3. ในกรณีที่ส่วนแสดงผลก�ำลังแสดงเมนูหลัก (mainAdt) แล้วผู้ใช้คลิกที่เหตุฉุกเฉินเราจะก�ำหนด

ให้เข้าสู่การโทรออกไปที่เบอร์ 191 เลย โดยที่
อ่านข้อความของรายการที่ถูกคลิกเลือกเก็บไว้ที่ตัวแปร strMain ก่อน
ตรวจสอบว่าถ้าตัวแปร strMain เก็บข้อความ “เหตุฉก ุ เฉิน” สัง่ ให้โทรออกด้วยตัวแปรออบเจ็กต์

Intent ที่ชื่อว่า it ก�ำหนดค่าเป็น ACTION_CALL ไปที่เบอร์ 191 ผ่านทางเมธอด setData()

if (strMain.trim() == "เหตุฉุกเฉิน") {
startActivity(it);
4. แต่ถ้าตัวแปร strMain เก็บค�ำว่า “สาธารณูปโภค” สั่งให้แสดงเมนูย่อยที่อยู่ในตัวแปรออบเจ็กต์

subAdt2
} else {
if (strMain.trim() == "สาธารณูปโภค") {
5. แต่ถา้ ตัวแปร strMain เก็บค�ำว่า “ธนาคาร” สัง่ ให้แสดงเมนูยอ่ ยทีอ่ ยูใ่ นตัวแปรออบเจ็กต์ subAdt3
} else {
if (strMain.trim() == "ธนาคาร") {
}
}
}
6. แต่ถ้าส่วนแสดงผลก�ำลังแสดงเมนูย่อยอยู่ ให้อ่านรายการที่ถูกคลิกเลือกเก็บไว้ที่ตัวแปร strSub

ก่อนจากนั้นตรวจสอบว่า
ถ้าตัวแปร strSub เก็บข้อความ “กลับหน้าแรก” หมายถึง ผู้ใช้ต้องการย้อนกลับไปเมนูหลัก
ก็จะสัง่ ให้สว่ นแสดงผลกลับไปแสดงเมนูหลักผ่านทางฟังก์ชนั setListAdapter() โดยก�ำหนด

ให้ใช้ค่าของตัวแปรออบเจ็กต์ mainAdt
} else {
String strSub = getListView().getItemAtPosition(position)
.toString();
7. แต่ถ้าตัวแปร strSub เก็บข้อความอื่นๆ ให้ตรวจสอบตามข้อความของเมนูย่อยเพื่อโทรออกไปยัง

เบอร์ที่เราก�ำหนดไว้ซึ่งถือเป็นรายการเมนูย่อยเท่าที่เรามีอยู่
} else if (strSub == "การไฟฟ้า") {
startActivity(it);
} else if (strSub == "การปะปา") {

part
2
startActivity(it);
} else if (strSub == "ธนาคารกรุงเทพ") {
startActivity(it);
} else if (strSub == "ธนาคารไทยพาณิชย์") {
startActivity(it);
} else if (strSub == "ธนาคารกรุงไทย") {
startActivity(it);
}
}
}
จากโค้ด JAVA ข้างต้นเพราะความที่มีเมนูย่อยไม่มาก ผู้เขียนจึงเลือกตรวจสอบเงื่อนไขด้วยค�ำสั่ง

if...else if เพื่อให้ง่ายต่อการน�ำเสนอ แต่ในทางปฏิบัติในกรณีที่ต้องการเพิ่มเมนูหลัก และเมนูย่อยมากกว่านี้
ขอให้เปลี่ยนไปใช้ค�ำสั่ง switch ตรวจสอบเงื่อนไขแทนเพื่อให้เกิดประสิทธิภาพสูงสุด
8. Workshop นี้ต้องก�ำหนดสิทธิ์เพิ่มเติมเพื่อให้โปรเจ็กต์สามารถโทรออกได้นั่นเอง โดยการก�ำหนด
ในไฟล์ AndroidManifest.xml ดังรูปที่ 13-5
สิทธิ์เพิ่มเติมใน
ไฟล์ Android-
Manifest.xml

9. ในกรณีที่น�ำตัวอย่างนี้ไปใช้ใน Smartphone จริง ให้ผู้อ่านคัดลอกไฟล์ apk ไว้ในเครื่องก่อน
กรณี Copy ไฟล์
apk เข้าไปไว้ใน
Smartphone จริง
10. แสดงการติดตั้งลงใน Smartphone จริง ดังรูปที่ 13-7

ใช้งานจริง
10.2 คลิก

11. หลังจากที่ติดตั้งเสร็จสมบูรณ์แล้ว App เบอร์ฉุกเฉินจะปรากฏในรายการ App ดังรูปที่ 13-8
part
2
แสดง App เบอร์
ฉุกเฉินใน Smart-
phone จริง
แสดง App บนอุปกรณ์มือถือจริง
12. เมื่อเปิดใช้งานจะปรากฏหน้าจอใน Smartphone จริง ดังรูปที่ 13-9

เมื่อปรากฏใน
Smartphone จริง
สรุปท้ายเล่ม
เนือ้ ทีน่ ำ� เสนอในหนังสือเล่มนีผ้ เู้ ขียนคิดว่าอย่างน้อยทีส่ ดุ เป็นการเตรียมความพร้อมเพือ่ เป็นรากฐานที่
ส�ำคัญก่อนเข้าสู่การพัฒนา Android App ที่มีความซับซ้อน มีขนาดใหญ่ขึ้น และมีการเรียกใช้งานฟีเจอร์ต่างๆ
ของ Android SDK เพิ่มมากขึ้นในระดับต่อไป
หากผู้อ่านท่านใดที่มีปัญหาในการเขียน Android App สามารถสอบถามปัญหาได้ที่แฟนเพจของ
ผู้เขียนที่ http://www.facebook.com/thaivb.net สวัสดีครับ...^_^

ภาคผนวก ก
การเตรียมไฟล์ apk ให้พร้อมใช้งานจริง
หลังจากที่เราเขียนโค้ดพัฒนาโปรเจ็กต์ Android App จนเสร็จสมบูรณ์แล้ว เป้าหมายสุดท้ายที่นัก
พัฒนาทุกคนต้องการเห็นก็คือ การใช้งาน Android App ดังกล่าวในอุปกรณ์จริงไม่ว่าจะเป็น Smartphone หรือ
Tablet ทีต่ ดิ ตัง้ ระบบปฏิบตั กิ าร Android โดยทีข่ อบเขตของหนังสือเล่มนีใ้ ช้กบั Android เวอร์ชนั ตัง้ แต่ 4.0.3 ขึน้ ไป
ไฟล์ติดตั้ง Android App มีนามสกุล .apk เปรียบเทียบกับไฟล์ติดตั้งของระบบปฏิบัติการ

Windows แล้วก็คือ .exe นั่นเอง
การสร้างไฟล์ apk มีจุดประสงค์ 2 อย่างคือ

1. เพื่อใช้งาน Android App บนอุปกรณ์จริง
2. เตรียมความพร้อมก่อนอัพโหลดเข้าสู่ตลาด Play Store เพื่อจัดจ�ำหน่าย
ขอบเขตของการน�ำเสนอในหนังสือเล่มนี้เน้นเฉพาะทางเลือกที่ 1 เท่านั้น ซึ่งมีขั้นตอนดังนี้
1. เปิดโปรเจ็กต์ Android ที่ต้องการสร้างไฟล์ apk ในโปรแกรม Eclipse
2. ให้คลิกขวาเลือกค�ำสัง่ Android Tools > Export Signed Application Package... เพือ่ เริม่ ต้นสร้าง
ไฟล์ apk ที่ผ่านการตรวจสอบและรับรอง ดังรูปที่ 1
รูปที่ 1
แสดงขั้นตอน
การเริ่มต้นสร้าง
ไฟล์ apk
2 เลือก
3. ตั้งชื่อ Android App ตามที่ต้องการ ดังรูปที่ 2
Android App
ปัจจุบัน
3.1 ตั้งชื่อ
3.2 คลิก

4. สร้างไฟล์ keystore ใหม่ขึ้นมาส�ำหรับ Android App โดยก�ำหนดชื่อไฟล์และพาธที่จัดเก็บ
part
2
ดังรูปที่ 3
พาธจัดเก็บไฟล์
keystore 4.2 คลิก
เลือก 4.1
4.3 เลือกพาธ
4.4 คลิก
5. ก�ำหนดรหัส Password ส�ำหรับไฟล์ keystore ปัจจุบัน

รหัส Password
5.1 กรอก Password
5.2 คลิก
ภาคผนวก ก การเตรียมไฟล์ apk ให้พร้อมใช้งานจริง 265

6. ใส่ข้อมูลของผู้พัฒนาให้กับ App ที่ส�ำคัญคือ การก�ำหนดรหัส Password และการก�ำหนดระยะ
เวลายินยอมให้ใช้ App โดยก�ำหนดค่าต�่ำสุดคือ 25 ปี
แสดงการก�ำหนด 6.1 กรอกข้อมูล
ข้อมูลของผู้พัฒนา
ให้กับ App ปัจจุบัน
6.2 คลิก
7. ท้ายที่สุดคลิกปุ่ม เพื่อเลือกพาธให้กับไฟล์ apk ที่จะสร้างขึ้นมา ดังรูปที่ 6

พาธจัดเก็บไฟล์ 7.1 คลิก
apk ที่ได้
7.2 คลิก
ให้ใช้ Android
จากรูปที่ 7 ไฟล์ apk ที่ได้จากขั้นตอนนี้สามารถน�ำไปติดตั้งบนอุปกรณ์ Android จริงได้เลย และยัง

รวมไปถึงอัพโหลดเข้า Play Store เพื่อจัดจ�ำหน่ายได้อีกด้วย
ภาคผนวก ข
การติดตั้งไฟล์ apk บนอุปกรณ์จริง
การติดตั้ง App บนอุปกรณ์ Android มี 2 วิธีคือ
1. ติดตั้งจากตลาด Play Store ของ Google
2. ติดตั้งจากไฟล์ apk โดยตรง
ในกรณีนี้ผู้เขียนสนใจเฉพาะวิธีที่ 2 เท่านั้นโดยมีขั้นตอนดังนี้
1. หลังจากที่เราได้ไฟล์ apk ที่ผ่านการตรวจสอบและรับรองจาก Eclipse แล้วให้ Copy ไฟล์เข้าสู่
อุปกรณ์ Smart Phone หรือ Tablet
ขั้นตอนการ Copy ไฟล์ apk เข้าไปในอุปกรณ์ Android ของแต่ละรุ่นแต่ละยี่ห้อมีขั้นตอนไม่

เหมือนกัน บางรุ่นต้องท�ำผ่านทาง Software ที่มาจากบริษัทผู้ผลิต บางยี่ห้อสามารถ Copy เก็บไว้
ที่ SD-Card ได้เลย ขอให้ผู้อ่านศึกษาจากคู่มือประจ�ำอุปกรณ์ (ในที่นี้ผู้เขียนขอละส่วนนี้ไว้)
แสดงไฟล์ apk
บนอุปกรณ์
Android จริง
จากรูปที่ 1 พบว่าไฟล์ MagicMirror.apk อยู่บนอุปกรณ์ที่ติดตั้ง Android 4.0.3 แล้ว

2. การติดตั้ง App จากไฟล์ apk โดยตรงต้องมีการก�ำหนดให้อุปกรณ์ดังกล่าวยินยอมติดตั้ง App
จากไฟล์ apk ได้โดยตรงเสียก่อน
ส�ำหรับ Android เวอร์ชนั 4.0.x ให้ผอู้ า่ นเลือก Setting (หรือการตัง้ ค่า) ทีห่ วั ข้อ ความปลอดภัย ดังรูปที่ 2
แสดงการก�ำหนดให้ติดตั้ง
ไฟล์ apk ได้โดยตรง
2.2 เลือก
2.1 เลือก
2.3 เลือก

จากรูปที่ 2 การก�ำหนดให้อุปกรณ์สามารถติดตั้ง App ด้วยไฟล์ apk ได้โดยตรง ถือเป็นความเสี่ยง
part
2
เช่นกัน แต่ในกรณีนี้ เป็น App ที่เราเป็นผู้พัฒนาเองจึงไม่มีปัญหาแต่อย่างใด
3. ให้คลิกไฟล์ apk ในเครื่องเพื่อเริ่มติดตั้ง App ซึ่งจะมีหน้าต่างแสดงให้เราเห็นว่า App ต้องการ
สิทธิ์อะไรบ้างซึ่งเป็นไปตามที่เราก�ำหนดในไฟล์ AndroidManifest.xml
แสดงการติดตั้ง App จากไฟล์ apk โดยตรง
3.1 เลือก
3.2 เลือก
ภาคผนวก ข การติดตั้งไฟล์ apk บนอุปกรณ์จริง 269

จากรูปที่ 3 พบว่า การติดตั้งจากไฟล์ apk โดยตรงมีลักษณะเช่นเดียวกับติดตั้งผ่าน Play Store ของ
Google
แสดง App ที่ชื่อว่า
“กระจกวิเศษ” ที่ได้
จากไฟล์ apk โดยตรง
บนอุปกรณ์จริง
App ที่เกิดจากการติดตั้งด้วยไฟล์ apk

INDEX
Symbols F
<corners>...</corners>......................................... 144 findViewById..............................................................44
<gradient>...</gradient>..........................................48 findViewById()...........................................................36
<LinearLayout>...</LinearLayout>........................83
<padding>...</padding>....................................... 144 G
<RelativeLayout>...</RelativeLayout>.................81 getCount()............................................................... 162
<shape>...</spape>..................................................48 getItem().........................................................107, 162
<SlidingDrawer>...</SlidingDrawer>....................96 getItemAtPosition()............................................... 150
<stroke>...</stroke>.............................................. 144 getItemId()............................................................... 162
<TableLayout>...</TableLayout>..........................85 getListAdapter()..................................................... 120
<TableRow>...</TableRow>...................................87 getMenuInflater()................................................... 182
getNumberOfCameras()...................................... 250
A getReadableDatabase()....................................... 224
Action Bar......................................................183, 186 getRequestedOrientation()....................................89
activity_main..............................................................36 getStringArray()...................................................... 107
add().................................................................131, 225 getText()......................................................................41
addFlags()............................................................... 249 getView().................................................................. 115
ADT.................................................................................9 getWindow()........................................................... 249
Alert Dialog................................................................67 getWritableDatabase()......................................... 232
Android Developer Tool...........................................9 GridView................................................................... 165
Android Visual Device............................................20
ArrayAdapter........................................................... 101 H
ArrayList................................................................... 131 HashMap................................................................. 131
AVD..............................................................................20 I
B inflate()..................................................................... 114
bindLong()............................................................... 233 Input Dialog...............................................................75
bindString()............................................................. 233 L
C LinearLayout..............................................................83
CheckBox................................................................ 165 ListActivity..................................................................99
compileStatement().............................................. 233 Listener().....................................................................36
loadUrl()................................................................... 243
E
Emulator......................................................................20 M
execSQL()................................................................ 224 MainActivity...............................................................36
MainActivity.this........................................................45
makeText().................................................................45
moveToFirst()......................................................... 225
Index 271
O SlidingDrawer............................................................94
onClick()......................................................................36 Spinner............................................................147, 150
onCreate()..............................................36, 213, 224 SQLite....................................................................... 211
onCreateOptionsMenu()...................................... 179 startActivity().......................................................... 199
onDrawerClosed()....................................................97 surfaceChanged().................................................. 249
onDrawerOpened()..................................................97 surfaceCreated().................................................... 249
onItemClick().......................................................... 226 surfaceDestroyed()......................................249, 251
OnItemClickListener().......................................... 126
T
onItemSelected()................................................... 150
TableLayout...............................................................85
OnItemSelectedListener()................................... 149
Toast............................................................................45
onListItemClick()...........................................107, 120
Toast.LENGTH_LONG............................................45
onMenuItemClick()................................................ 183
Toast Notification.....................................................78
onNothingSelected()............................................ 150
onOptionsItemSelected().................................... 186
onUpgrade()............................................................ 213
open()....................................................................... 250
P
Popup....................................................................... 180
PopupMenu............................................................ 180
R
R....................................................................................36
RelativeLayout...........................................................81
requestWindowFeature()..................................... 249
R.layout.activity_main.............................................36
S
setAdapter()............................................................ 126
setBackgroundResource().....................................51
setChecked().......................................................... 170
setChoiceMode()................................................... 137
setContentView().............................................. 36, 51
setJavaScriptEnabled()........................................ 242
setListAdapter()............................................107, 120
setOnClick..................................................................36
setOnItemSelectedListener()............................. 149
setRequestedOrientation()............................. 89, 93
setText().............................................................. 36, 41
show()..........................................................................45

ISBN 978-616-200-363-9

Basic Android Programming

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Android Programming

Uploaded by

Copyright:

Available Formats

Basic Android Programming

ผู้แต่ง ศุภชัย สมพานิช http://www.facebook.com/thaivbnet

II Basic Android Programming

ความรู้พื้นฐานการพัฒนา Android App

การเตรียมสภาพแวดล้อมในการพัฒนา Android App

ไฟล์ดาวน์โหลดทุกไฟล์ที่น�ำเสนอในหนังสือเล่มนี้อยู่ในโฟลเดอร์ \Tools ใน CD-ROM ที่แถม

1. เข้าสู่เว็บไซต์ http://www.eclipse.org/downloads/ เพื่อดาวน์โหลดโปรแกรม Eclipse

4 Basic Android Programming

จากรูปที่ 1-2 ให้ดับเบิลคลิกไฟล์ eclipse.exe เพื่อเปิดโปรแกรม Eclipse

จากรูปที่ 1-3 เมื่อเปิดโปรแกรม Eclipse ขึ้นมาครั้งแรกจะมีการสอบถามว่า ต้องการเก็บโปรเจ็กต์ไว้

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 5

ดาวน์โหลดและติดตั้ง Android SDK

2. ให้ดบั เบิลไฟล์ทดี่ าวน์โหลดมาได้ในข้อ 1 ในทีน่ ชี้ อื่ installer_r20.0.3-windows.exe หรือมีชอื่ ตาม

6 Basic Android Programming

2.2 คลิก 2.3 คลิก

ส�ำหรับขอบเขตของหนังสือเล่มนี้ผู้เขียนเลือกใช้ Android ตั้งแต่เวอร์ชัน 4.0.3 ขึ้นไปเพราะ

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 7

จากรูปที่ 1-6 รายการที่มีข้อความ Installed หมายถึง รายการที่ถูกติดตั้งแล้ว ส่วนรายการที่มีค�ำว่า

(เอกสารส่วนช่วยเหลือ) ได้ และสามารถเลือกติดตั้งได้ในภายหลัง

ปัญหาที่ส�ำคัญอีกประการหนึ่งของนักพัฒนา Android App ก็คือ การทดสอบรันโปรเจ็กต์ในเวอร์ชัน

8 Basic Android Programming

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 9

4. เลือกพาธที่จัดเก็บไฟล์ ADT ในกรณีนี้ผู้เขียนเลือก C:\Android

10 Basic Android Programming

5. คลิกเลือกรายการของ ADT ทุกรายการที่ปรากฏขึ้นมา

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 11

ณ จุดนี้โปรแกรม Eclipse สามารถสร้างโปรเจ็กต์ Android App ได้แล้ว

12 Basic Android Programming

เริ่มต้นสร้าง Hello World App

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 13

4. เข้าสู่ขั้นตอนการก�ำหนดรายละเอียดของ Android App ในขั้นต้นโดยที่

 ·ช่อง Project Name หมายถึง ชื่อ Android Project โดยมีข้อแนะน�ำว่าควรมีชื่อ

14 Basic Android Programming

ปฏิบตั กิ าร Android หลายเวอร์ชนั ขอให้ผอู้ า่ นระบุเวอร์ชนั

6. เลือกสีของไอคอนโดยการเลือกสีที่ Foreground Color ดังรูปที่ 1-19

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 15

8. ก�ำหนดรายละเอียดขั้นต้นของประเภท App ในขั้นต้นนี้ให้ระบุชื่อ App ในช่อง Title ซึ่งหมายถึง

ณ จุดนี้โปรแกรม Eclipse จะสร้าง Android Project ว่างๆ ขึ้นมาให้

16 Basic Android Programming

จากรูปที่ 1-22 การเลือก Android Application เพื่อบอกโปรแกรม Eclipse ว่าต้องการรันโปรเจ็กต์

ในส่วนนี้ผู้เขียนขออธิบายโดยสมมติว่ามีการสร้าง AVD ไว้แล้ว ซึ่งผู้อ่านสามารถศึกษาการ

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 17

การรันระบบปฏิบัติ Android จ�ำลองบนเครื่องคอมพิวเตอร์ในครั้งแรกจะใช้ระยะเวลาพอสมควร

18 Basic Android Programming

จากนั้นกดปุ่ม All Program เพื่อไปหน้าโปรแกรมรวม ดังรูปที่ 1-26

5.3 Hello World App

ส�ำหรับเนื้อหาในล�ำดับถัดไปเมื่อผู้เขียนจะกล่าวถึงระบบปฏิบัติการ Android จ�ำลอง โดยใช้ค�ำว่า

ในกรณีที่ผู้อ่านไม่มีการสร้าง Android Emulator ไว้ก่อนการรันโปรเจ็กต์ โปรแกรม Eclipse

การรัน Android Application ต้องรันอยู่บนระบบปฏิบัติการ Android ตามเวอร์ชันที่ก�ำหนด

2. จะปรากฏหน้าต่าง Android Virtual Device Manager ให้คลิกปุ่ม เพื่อสร้างระบบ

20 Basic Android Programming

ในที่นี้ในขณะที่ผู้เขียนติดตั้งคอมโพเนนต์ต่างๆ ให้กับโปรแกรม Eclipse

จากรูปที่ 1-30 เมื่อคลิกปุ่ม จะเริ่มต้นสร้างระบบปฏิบัติการ Android จ�ำลองขึ้นมาบน

การรัน Android Project เกิดข้อผิดพลาด

จากรูปที่ 1-31 โปรแกรม Eclipse ไม่ทราบว่าต้องท�ำอย่างไรกับไฟล์ activity_main.xml จึงสร้างไฟล์

22 Basic Android Programming

 ·ตัวเลือก Clean projects selected below หมายถึง ต้องการ Clean โปรเจ็กต์เฉพาะที่

การบันทึก Android Project

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 23

4. เลือกโปรเจ็กต์ที่ต้องการ Export ในกรณีนี้คือ โปรเจ็กต์ HelloWorld App โดยเลือกทุกไฟล์ของ

จากรูปที่ 1-36 สมมติว่าผู้เขียนต้องการบันทึกไว้ที่ desktop ในรูปแบบไฟล์ zip

24 Basic Android Programming

บทที่ 1 เตรียมตัวก่อนพัฒนา Android App 25

26 Basic Android Programming

·ช่อง Project Name หมายถึง ชื่อ Android Project โดยมีข้อแนะน�ำว่าควรมีชื่อ

·ตัวเลือก Clean projects selected below หมายถึง ต้องการ Clean โปรเจ็กต์เฉพาะที่

·พารามิเตอร์ที่ 2 หมายถึง ข้อความที่ปรากฏขึ้นมาเหนือส่วนแสดงผลปัจจุบัน

·พารามิเตอร์ที่ 3 Toast.LENGTH_LONG หมายถึง ระยะเวลาปรากฏของข้อความเหนือ