Android App Development ฉบับสมบูรณ์

5. จะปรากฏไดอะลอ็ กบอ็ กซ์ Create new Android Virtual Device (AVD) เพอ่ื ใหก้ ำ� หนดคณุ สมบตั ิ
ต่างๆ ของ AVD
6. ตั้งชื่อ AVD ในทนี่ ีต้ ้งั ชอ่ื เปน็ avd
7. ในสว่ นของ Target: คลกิ เลอื ก Android 4.0.3 ทั้งนี้ผู้อ่านสามารถเลอื กรุน่ อ่นื ๆ ได้
8. ในส่วนของ SD Card: คลิกเลือก Size
9. กรอกความจขุ องหน่วยความจำ� ในท่นี ้กี รอกขนาด 1024 MiB (เมกะไบต์)
10. ในส่วนของ Skin: คลิกเลอื ก Built-in:
11. คลกิ เลอื ก WVGA800 ย่อมาจาก Wide Video Graphics Array ซึ่งเปน็ การเลอื กขนาดหนา้ จอ
แสดงผลของแอพพลเิ คชัน ซ่งึ ผูอ้ า่ นควรเลือกตามขนาดของหน้าจอโทรศัพทท์ ี่ใช้งาน
12. คลิกปุ่ม เพอ่ื สร้าง AVD

6 กรอกชื่อ 7 เลือก

เลอื ก 8 9 ระบขุ นาด

เลือก 10 11 เลอื ก

12 คลกิ

13. จากน้นั จะมชี อ่ื AVD ท่ีเราสร้างไว้แสดงข้ึนมาในรายการ
14. คลกิ เลือก AVD ท่ีสร้างไว้
15. คลกิ ปมุ่ เพอ่ื เปดิ เครื่อง AVD

14 เลอื ก คลกิ 15

40 Android App Development ฉบับสมบูรณ์

16. จะปรากฏไดอะลอ็ กบ็อกซ์ Launch Options ขนึ้ มา
17. คลิกปมุ่ เพ่ืออนญุ าตให้ AVD สามารถทำ� งานได้

17 คลกิ

18. จะปรากฏหนา้ ตา่ ง Command
Prompt ข้ึนมา เพื่อติดต้ัง
AVD ให้รอสักครู่ Emulator
จะสามารถใช้งานได้

บทท่ี 2 การติดต้ังเครื่องมือส�ำหรับการพัฒนาแอพพลิเคชันบน Android 41

ส�ำหรับการรัน AVD ในครั้งแรกจะใช้เวลาค่อนข้างนาน เช่น 2-3 นาที อย่างไรก็ตามระยะเวลาจะ
น้อยลงในครั้งต่อๆ ไป ซึ่งในการพัฒนาแอพพลิเคชันทุกครั้งไม่ควรเปิดปิด Emulator บ่อยๆ ซึ่งจะทำ� ให้
เสียเวลาในการรันค่อนข้างมาก

สรุปท้ายบท

ในบทนเี้ ปน็ การอธบิ ายถงึ ขนั้ ตอนตา่ งๆ ในการตดิ ตง้ั เครอื่ งมอื สำ� หรบั พฒั นาแอพพลเิ คชนั บน Android
เพอื่ เตรยี มความพร้อมก่อนพฒั นาแอพพลิเคชันต่อไป เชน่ การติดต้งั JDK (Java Development Kit), การติด
ตั้งโปรแกรม Eclipse, การติดตง้ั Android SDK, การติดตง้ั ADT และการสรา้ ง AVD

แบบฝึกหัดท้ายบท

z หลังจากที่ผู้อ่านติดต้ังเครื่องมือต่างๆ ที่ใช้ในการพัฒนาแอพพลิเคชันเรียบร้อยแล้ว ให้ผู้อ่าน
ศกึ ษาเมนูการใช้งานต่างๆ ทั้งหมด เช่น ปมุ่ Menu, Home, Back และ Zoom รวมไปถงึ การ
ต้งั คา่ ต่างๆ วา่ มีการท�ำงานอยา่ งไร

z ใหผ้ ู้อ่านทดลองสร้าง AVD ทีม่ คี ุณสมบตั ิตา่ งกัน 2 เครอ่ื ง

42 Android App Development ฉบับสมบูรณ์

3

เร่ิมต้นพัฒนาแอพพลิเคชัน

เน้ือหาในบทน้ี มีวัตถุประสงค์เพ่ือให้ผู้อ่านเร่ิมฝึกพัฒนาแอพพลิเคชันบนระบบ Android ได้ และ
เปน็ การเรม่ิ ตน้ เรยี นรกู้ ารใชง้ านเครอื่ งมอื ตา่ งๆ ไปพรอ้ มๆ กนั ซงึ่ ในทนี่ จี้ ะเรมิ่ สอนการพฒั นาแอพพลเิ คชนั แสดง
ขอ้ ความ Hello World ซง่ึ เปน็ แอพพลเิ คชนั แรกๆ ทถี่ กู ใชเ้ ปน็ ตวั อยา่ งในการพฒั นาเบอื้ งตน้ ของการเขยี นโปรแกรม

นอกจากนแ้ี อพพลเิ คชนั Hello World ยงั ถกู ใชเ้ ปน็ ตวั ตรวจสอบการทำ� งานของคอมไพเลอร์ (Compiler)
และส่วนส�ำคัญต่างๆ ของเคร่ืองมือที่ได้ติดต้ังในบทที่ผ่านมา อีกท้ังยังเป็นตัวช่วยในการตรวจสอบข้อผิดพลาด
ระหวา่ งการตดิ ตงั้ IDE (Integrated Development Environment) อกี ดว้ ย ดงั นน้ั การฝกึ พฒั นาแอพพลเิ คชนั ใน
บทน้ี จึงเปน็ พื้นฐานสำ� หรบั การพฒั นาแอพพลเิ คชันประยกุ ตใ์ นขน้ั สงู ตอ่ ไป

ทงั้ น้กี ารฝกึ พฒั นาแอพพลเิ คชันจะเป็นการเรียนรูด้ ว้ ยตัวอยา่ ง ซึง่ ผ้อู า่ นสามารถพัฒนาแอพพลเิ คชัน
ตามขั้นตอนและสามารถน�ำไปใช้งานได้จริง โดยไม่มุ่งเน้นถึงการอธิบายในรายละเอียดเชิงลึกของการใช้งาน
แตล่ ะฟงั กช์ นั เนอ่ื งจากผอู้ า่ นสามารถหาขอ้ มลู เพม่ิ เตมิ ไดจ้ ากเวบ็ ไซตต์ า่ งๆ เชน่ http://developer.android.com/
guide/developing/tools/emulator.html เปน็ ต้น

ซึ่งเนอ้ื หาในบทน้ี ผู้เขยี นจะแบ่งออกเป็นข้นั ตอนดงั นี้
1. เริ่มตน้ สรา้ งโปรเจก็ ต์
2. ออกแบบหน้าจอแอพพลเิ คชนั
3. เขยี นโค้ดกำ� หนดการทำ� งานของแอพพลเิ คชนั
4. ทดสอบการทำ� งานของแอพพลิเคชนั ผา่ นโทรศพั ทจ์ �ำลอง (Emulator)
5. การส่งออกและนำ� เขา้ โปรเจก็ ต์ใน Eclipse

เร่ิมต้นสร้างโปรเจ็กต์

ข้ันตอนแรกในการพัฒนาแอพพลิเคชันทุกครั้งก็คือ การสร้างโปรเจ็กต์ ซึ่งผู้อ่านสามารถท�ำได้ตาม
ข้นั ตอนดังตอ่ ไปน้ี

1. เปิดโปรแกรม Eclipse
2. คลิกเมนู File > New > Android Project

2 เลือก

ในกรณีที่ผู้อ่านไม่พบ Android Project หลังจากคลิกเมนู File > New ให้ผู้อ่านท�ำตามข้ันตอนดังน้ี
1. คลิกเมนู Window > Customize Perspective...

1 เลอื ก

2. จะปรากฏไดอะล็อกบ็อกซ์ Customize Perspective ข้ึนมา
3. คลิกแท็บ Shortcuts
4. คลิกเลือก Android ท่ีกล่องเมนู Shortcut Categories: ท่ีอยู่ทางด้านซ้าย
5. จะปรากฏรายการ Shortcut ท่ีเมนูทางด้านขวา ให้คลิกเลือก Android Project
6. คลิกปุ่ม

44 Android App Development ฉบับสมบูรณ์

เลือก 4 3 คลิก
5 เลือก

6 คลกิ

7. เมื่อคลิกเมนู File > New อีกครั้ง จะปรากฏเมนู Android Project ให้เลือกดังรูป
7 เลือก

3. จะปรากฏไดอะล็อกบ็อกซ์ New 4 ตัง้ ชอ่ื โปรเจ็กต์
Android Project ในสว่ นแรกสำ� หรบั 5 เลือก
ก�ำหนดช่อื และรปู แบบของโปรเจ็กต์
6 คลิก
4. ต้ังชือ่ โปรเจ็กต์ ในทน่ี ต้ี ั้งช่อื ว่า Hello
World 7 คลกิ

5. ในส่วนของ Contents คลิกเลือก
Create new project in workspace
เพอื่ สร้างโปรเจก็ ตใ์ หม่

6. คลกิ เครอื่ งหมายถกู หนา้ Use default
location เพ่ือพัฒนาแอพพลิเคชัน
ในต�ำแหน่งท่ีอยู่เดียวกันกับโปรเจ็กต์
Eclipse

7. คลกิ ปุ่ม

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 45

8. จะปรากฏไดอะลอ็ กบอ็ กซ์ New Android Project ในสว่ นทสี่ อง สำ� หรบั เลอื กเวอรช์ นั ของ Android
9. คลิกเลอื กเวอรช์ นั ของ Android ทีจ่ ะพฒั นา ในทน่ี เ้ี ลอื ก 4.0.3
10. คลิกปุ่ม

9 เลอื ก

10 คลกิ

11. จะปรากฏไดอะล็อกบ็อกซ์ New Android Project ในสว่ นทีส่ าม ส�ำหรับก�ำหนดรายละเอียดของ
แอพพลิเคชัน
12. ตงั้ ช่ือของแอพพลเิ คชนั คือ Hello World
13. ชือ่ แพ็คเกจจะอยู่ในรูปแบบของ xxx.xxx... ซ่ึงในทน่ี ้ตี ้ังชื่อแพ็คเกจเปน็ com.app.helloworld

14. ต้ังช่ือ Activity ในท่ีน้ีตั้งชื่อเป็น
HelloWorldActivity
15. ในส่วนของ Minimum SDK: คลิก 12 ตั้งช่ือแอพพลิเคชัน
13 ต้ังชื่อแพ็คเกจ
เลือกเวอร์ชัน 15 ซึ่งเป็นเวอร์ชัน 14 ตง้ั ชื่อแอ็คทิวิต้ี
เดียวกันกบั API Level ท่เี ลือกใน
ขอ้ 9
16. คลกิ ปุม่ ซึง่ ถอื เป็นอัน 15 เลอื กเวอร์ชัน

เสรจ็ สนิ้ การสร้างโปรเจ็กต์

16 คลกิ

46 Android App Development ฉบับสมบูรณ์

กฎการต้ังช่ือ Activity มีหลักดังนี้
1. ชื่อต้องไม่มีช่องว่าง
2. ชื่อต้องไม่มีเครื่องหมายพิเศษ
3. ชื่อต้องไม่มีเคร่ืองหมายทางคณิตศาสตร์ต่างๆ
4. ชื่อไม่สามารถขึ้นต้นด้วยตัวเลขได้
ตัวอย่างเช่น HelloWorld และ SendSMS เป็นต้น
17. จะปรากฏโปรเจก็ ตท์ ่ี Package Explorer ซง่ึ แสดงถงึ โครงสรา้ งของโปรเจก็ ตท์ ไี่ ดส้ รา้ งขน้ึ มาดงั รปู

ในกรณีที่สร้างโปรเจ็กต์แล้วมีสัญลักษณ์ Error ที่ช่ือโปรเจ็กต์ ซ่ึงมีรายละเอียดดังน้ี
ผู้อ่านสามารถแก้ไขได้ดังนี้
1. เปิดโปรแกรม Eclipse คลิกเมนู Window > Preferences

1 เลอื ก

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 47

2. จะปรากฏไดอะล็อกบ็อกซ์ Preferences ข้ึนมา
3. คลิกเลือก Android > Build
4. จดจ�ำพาธในส่วนของ Default debug keystore:

เลือก 3

4 จดจำ�พาธ

5. ลบไฟล์ debug.keystore จากพาธที่อยู่ในข้อ 4
5 ลบ

6. ปิดโปรแกรม Eclipse
7. เปิด Control Panel คลิกไอคอน Region and Language

6 คลิก

48 Android App Development ฉบับสมบูรณ์

8. คลิกแท็บ Formats 9 เลือก
9. ในส่วนของ Format: คลิกเลือก English (United States)

คลกิ 8

10. คลิกแท็บ Location
11. ในส่วนของ Current location: ให้คลิกเลือก United States
12. คลิกปุ่ม

10 คลิก

11 เลือก

12 คลกิ

บทท่ี 3 เริ่มต้นพัฒนาแอพพลิเคชัน 49

13. จากนั้นเปิดโปรแกรม Eclipse 14 เลอื ก
14. คลิกเมนู Project > Clean...

15. จะปรากฏไดอะล็อกบ็อกซ์ Clean ขึ้นมา
16. คลิกเลือก Clean all projects
17. คลิกปุ่ม

เลอื ก 16

17 คลิก
18. สงั เกตไดว้ า่ สญั ลกั ษณ์ Error ทชี่ อื่ โปรเจก็ ตห์ ายไปแลว้ ซง่ึ แสดงวา่ สามารถรนั โปรเจก็ ตไ์ ดแ้ ลว้ นน่ั เอง

50 Android App Development ฉบับสมบูรณ์

ในข้ันตอนต่อไปจะเป็นการเริ่มพัฒนาแอพพลิเคชัน โดยท่ีมีไฟล์หลักๆ ท่ีส�ำคัญที่ต้องแก้ไข 2 ไฟล์
คอื main.xml และ HelloWorld.java

1. ไฟล์ main.xml ซงึ่ เปน็ ไฟลส์ ำ� หรบั การออกแบบหนา้ จอแอพพลเิ คชนั โดยกำ� หนดใหม้ รี ปู แบบตาม
ความต้องการของผู้ใช้งาน เช่น มีปุ่มท่ีใช้ประเภทใดบ้าง มีกล่องข้อความประเภทใด โดยปกติ
แล้วไฟล์ main.xml จะถกู สรา้ งข้ึนเองโดยอัตโนมตั หิ ลงั จากท่ผี อู้ า่ นไดส้ รา้ งโปรเจก็ ต์ และผู้อ่าน
สามารถแกไ้ ขเพม่ิ เตมิ ได้ในภายหลงั

2. ไฟล์ HelloWorld.java ซึ่งเป็นไฟล์หลักที่ใช้ส�ำหรับก�ำหนดการท�ำงานของแอพพลิเคชัน ให้
แอพพลิเคชันท�ำงานได้ตามความต้องการของนักพัฒนา

แอค็ ทวิ ติ ี้ (Activity) ถกู ใชส้ ำ� หรบั การสรา้ งสว่ นตอ่ ประสานกบั ผใู้ ช้ (User Interface) เชน่ เมนู (Menu)
ปมุ่ กด (Button) และกลอ่ งขอ้ ความ (Text Box) เปน็ ตน้ ซงึ่ ในแอพพลเิ คชนั หนง่ึ ๆ จะสามารถสรา้ งแอค็ ทวิ ติ ี้
ได้มากกว่า 1 แอ็คทิวิต้ี อย่างไรก็ตามจะต้องมีเพียง 1 แอ็คทิวิต้ีที่ใช้เป็นแอ็คทิวิต้ีหลัก

ทงั้ นจี้ ากตวั อยา่ งแอพพลเิ คชนั Hello World การสรา้ งโปรเจก็ ตม์ กี ารสรา้ งแอค็ ทวิ ติ ชี้ อ่ื HelloWorld
ซ่ึงหมายความว่าผู้อ่านได้สร้างคลาส (Class) HelloWorld ท่ีสืบทอดคุณสมบัติต่างๆ ทั้งหมดของคลาส
แอ็คทิวิต้ีและก�ำหนดให้คลาส HelloWorld เป็นแอ็คทิวิต้ีหลักของโปรแกรมน่ันเอง

ออกแบบหน้าจอแอพพลิเคชัน

แอพพลิเคชันในบทน้ีเป็นแอพพลิเคชันแสดงข้อความแจ้งเตือนทางหน้าจอ เมื่อผู้อ่านคลิกปุ่มกด
โดยแอพพลเิ คชันจะดงึ ข้อมูลท่พี ิมพล์ งใน EditText มาแสดง เชน่ “Hello World : ตามด้วยขอ้ ความ” ซ่ึงมีการ
ออกแบบหน้าจอดังนี้

อลิ เิ มนต์ EditText

อิลเิ มนต์ Button

หน้าจอแอพพลิเคชัน Hello World

การออกแบบหนา้ จอแอพพลเิ คชนั เปน็ การแกไ้ ขโค้ดในไฟล์ XML (Extensible Markup Language)
ซึ่งส่วนของแอพพลิเคชัน Hello World นจ้ี ะแกไ้ ขทีไ่ ฟล์ main.xml ซึ่งเป็นไฟล์หลกั สำ� หรบั การออกแบบหน้าจอ
ของแอพพลเิ คชนั ซึ่งมีข้นั ตอนการแกไ้ ขดังน้ี

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 51

1. ดับเบิลคลิกไฟล์ main.xml ทอ่ี ยูใ่ นสว่ นของ res/layout
2. จะปรากฏ Layout ทางดา้ นขวามอื

1 ดับเบิลคลิก

2 แสดง Layout

3. ผอู้ ่านสามารถสลับจากรูปแบบ Layout เป็นแบบโคด้ XML ได้ โดยคลกิ แทบ็ main.xml ซ่งึ มโี คด้
xml ดงั น้ี

3 คลกิ

52 Android App Development ฉบับสมบูรณ์

4. ในสว่ นของการออกแบบแอพพลิเคชัน ใหผ้ อู้ ่านคลิกแท็บ Graphical Layout
5. คลกิ ท่ี Text Fields
6. คลิกเลอื กอิลเิ มนต์ (Element) EditText โดยคลิกค้างไว้ แล้วลากมาวางทห่ี นา้ จอออกแบบทาง

ด้านขวา เพื่อสร้างกลอ่ งขอ้ ความบนหนา้ จอ

5 คลกิ

6.1 ลากวาง

6.2 แสดงผล

4 คลกิ

7. คลิกเลือกอิลิเมนต์ Button แล้วลากมาวางที่หน้าจอออกแบบทางด้านขวา เพ่ือสร้างปุ่มกดบน
หน้าจอ

7.1 ลากวาง

7.2 แสดงผล

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 53

8. ในกรณีท่ีผู้อ่านสร้างหน้าจอเสร็จส้ินแล้ว ผู้อ่านสามารถปรับแต่งหรือแก้ไขหน้าจอให้ดูเรียบร้อย
สวยงามตามท่อี อกแบบไวไ้ ด้ เชน่ แก้ไขขอ้ ความ หรอื ปรบั ขนาดความกว้างและความยาว โดย
ใหค้ ลกิ ขวาทีอ่ ลิ เิ มนต์ แลว้ เลอื กคำ� ส่ัง Properties
8.1 คลกิ ขวา

8.2 เลือก
9. จะปรากฏแท็บ Properties ด้านล่างดงั น้ี

9 แทบ็ Properties

54 Android App Development ฉบับสมบูรณ์

ผอู้ า่ นสามารถปรบั เปลย่ี นตำ� แหนง่ ของหนา้ ตา่ ง Properties ได้ โดยคลกิ แทบ็ Properties คา้ งไว้ แลว้
ลากไปยังต�ำแหน่งท่ีต้องการดังนี้

ลากวาง
แสดงผล

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 55

10. แกไ้ ขข้อความของอลิ เิ มนต์ Button โดยคลิกเลือกอิลิเมนต์ Button
11. ในส่วนของพร็อพเพอร์ตี้ Text แก้ไขขอ้ ความจาก Button เปน็ Show
12. ขอ้ ความของอลิ ิเมนต์ Button จะเปลีย่ นไป

10 เลือก 11 แก้ไข
12 แสดงข้อความ

13. ผู้อ่านยังสามารถปรับเปล่ียนขนาดของจอและการหมุนได้ จากกลุ่มเมนูที่อยู่ด้านบนของส่วน
Layouts เช่น รปู แบบแนวต้ังหรือแนวนอน ท้ังนีห้ น้าจอของ Emulator ก็จะเปลี่ยนแปลงไปตาม
การก�ำหนดค่าของผู้อ่าน

13.1 เลือก
13.2 แสดงผล

56 Android App Development ฉบับสมบูรณ์

จากการออกแบบหน้าจอท่ผี ่านมา โปรแกรม Eclipse จะสรา้ งโคด้ XML ให้โดยอัตโนมตั ดิ งั นี้

กำ�หนดคณุ สมบัติของ TextView
กำ�หนดคณุ สมบัติของ EditText
ช่ืออลิ ิเมนต์ EditText
กำ�หนดคณุ สมบตั ขิ อง Button
ชื่ออลิ ิเมนต์ Button

นอกจากนี้ผ้อู ่านสามารถเขียนโคด้ XML เพ่อื ออกแบบหน้าจอโดยตรงจากไฟล์ main.xml ก็ได้ แต่
ในความคิดเห็นส่วนตัวของผู้เขียนแล้ว การเริ่มต้นพัฒนาแอพพลิเคชันบน Android นั้น การแก้ไขหน้าจอ
แอพพลิเคชันโดยการคลิกแล้วลากมาวางบนพ้ืนท่ีบนหน้าจอ ถือว่าเป็นวิธีที่ง่ายที่สุด ซึ่งไม่มีความจ�ำเป็นต้อง
แกไ้ ขสว่ นโคด้ ของ XML แต่อยา่ งใด และลดโอกาสทจ่ี ะเกดิ ข้อผดิ พลาดใหน้ ้อยลงดว้ ยเชน่ กัน

ขนั้ ตอนต่อไปจะอธิบายถงึ เครอื่ งมอื ชว่ ยเหลอื ในการสรา้ งหนา้ จอให้มีความง่ายยิ่งขน้ึ ดังน้ี
z Outline เปน็ กลอ่ งเครอื่ งมือทางขวามือที่ชว่ ยในการสร้าง ลบ จดั

ล�ำดับก่อนหลังของอิลิเมนต์ต่างๆ ภายในหน้าจอ เช่น การปรับ
ให้อลิ เิ มนต์ EditText ไวด้ า้ นลา่ งอลิ ิเมนต์ Button ท�ำได้โดยลาก
อิลเิ มนต์ EditText ลงในตำ� แหนง่ ทต่ี อ้ งการดงั รูป
z P roperties เป็นกล่อง
เคร่ืองมือส�ำหรับการก�ำหนด
คณุ สมบตั ติ า่ งๆ ของอลิ เิ มนต์
เช่น แก้ไขข้อความ สีตัว
อักษร ความกว้าง ความสูง
โดยเคร่ืองมือนี้จะช่วยลด
ความยงุ่ ยากในการเขียนโคด้
XML ไดม้ ากเลยทเี ดียว

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 57

นอกจากกล่องเคร่ืองมือ Properties แล้ว ส่วนด้านล่างสุดได้รวมเครื่องมือช่วยในการพัฒนา
แอพพลเิ คชนั อนื่ ๆ เชน่ Problems, Javadoc, Declaration และ Console เอาไวด้ ว้ ย ซง่ึ จะถกู ใชส้ ำ� หรบั การทำ� งาน
ในสว่ นอ่นื ๆ ตอ่ ไป เช่น ส่วน Problems จะรายงานปัญหาตา่ งๆ ในการท�ำงานของแอพพลเิ คชัน เปน็ ตน้

ส�ำหรับการพัฒนาโปรแกรมบนเคร่ืองมือ Eclipse น้ัน บ่อยคร้ังท่ีกล่องเคร่ืองมือต่างๆ จะหายไป
ผู้อ่านสามารถเรียกใช้กล่องเคร่ืองมือต่างๆ ได้จากการคลิกเมนู Window > Show View จากน้ันเลือก
เคร่ืองมือท่ีต้องการดังรูป

เขียนโค้ดก�ำหนดการท�ำงานของแอพพลิเคชัน

เมอื่ ผอู้ า่ นไดอ้ อกแบบหนา้ จอโทรศพั ทจ์ ำ� ลองหรอื Emulator เรยี บรอ้ ยแลว้ ขน้ั ตอนตอ่ ไปคอื การเขยี น
โคด้ กำ� หนดการทำ� งานของแอพพลเิ คชัน โดยเขียนโค้ดในไฟล์ HelloWorld.java เพื่อกำ� หนดใหแ้ อพพลเิ คชนั
แสดงผลค�ำว่า Hello World ออกทางหน้าจอ ซึง่ มีขนั้ ตอนดงั นี้

1. ดบั เบลิ คลกิ ไฟล์ HelloWorldActivity.java ในไดเรค็ ทอรี src/com.app.helloword/HelloWorld
Activity.java เพอื่ เปดิ ไฟลข์ น้ึ มา ซงึ่ มโี คด้ เรม่ิ ตน้ แสดงดงั รปู
1 ดบั เบิลคลิก

58 Android App Development ฉบับสมบูรณ์

2. เขยี นโคด้ กำ� หนดการทำ� งานของแอพพลเิ คชันเพิม่ เติมดงั น้ี

การสร้างปมุ่ กด
เขยี นโค้ดเพิ่มเตมิ

อธิบายโคด้ การท�ำงานของแอพพลเิ คชัน

1. ในบรรทดั ที่ 16 พจิ ารณาคำ� สง่ั setContentView(R.layout.main); ซง่ึ เปน็ ฟงั กช์ นั วาดหนา้ จอ โดย
อ้างองิ จากไฟล์ main.xml ท่ีผ้อู า่ นไดอ้ อกแบบไว้ในหวั ขอ้ ที่ผา่ นมาน่นั เอง

2. ในบรรทดั ที่ 20 และ 23 ทั้งสองสว่ นเปน็ การอ้างอิงไปยังอิลิเมนต์ต่างๆ บน Emulator เพือ่ ให้
โปรแกรมสามารถทำ� งานไดอ้ ยา่ งถกู ตอ้ ง เชน่ การดกั จบั เมอื่ คลกิ ปมุ่ (button.setOnClickListener)
และการดึงคา่ ขอ้ มลู มาใช้งาน (Toast.makeText) เป็นต้น ซึง่ การทำ� งานในสว่ นนีจ้ ะเปน็ การเพิ่ม
เหตกุ ารณ์หรอื อีเวนต์ (Event) ใหก้ บั ปุ่มกด (Button)

หากผอู้ า่ นสงั เกตจะเหน็ ไดว้ า่ โคด้ ทเ่ี ขยี นขนึ้ นนั้ ในบางครงั้ จะไมม่ กี ารจดั รปู แบบทเี่ หมาะสม เชน่ การ
ใช้เครื่องหมายแท็บหรือการเว้นวรรค ดังน้ัน ผู้อ่านสามารถจัดรูปแบบของโค้ดได้โดยคลิกเมนู Source >
Format หรือกดปุ่ม + + ซ่ึงผู้อ่านสามารถเลือกส่วนท่ีจะจัดรูปแบบหรือเลือกทั้งหมดใน
ไฟล์นั้นๆ ก็ได้
เลอื ก

บทท่ี 3 เริ่มต้นพัฒนาแอพพลิเคชัน 59

ผลลัพธเ์ ม่ือจัดรปู แบบของโคด้ ดว้ ยคำ�สง่ั Format

ทดสอบการท�ำงานของแอพพลิเคชันผ่านโทรศัพท์
จ�ำลอง (Emulator)

หลังจากการพัฒนาโปรแกรมเสร็จส้ิน ขั้นตอนต่อไปคือ การคอมไพล์และรันแอพพลิเคชัน ทั้งน้ี
เน่อื งจากแอพพลิเคชนั จะทดสอบการทำ� งานผา่ น Emulator ดังน้ัน เมือ่ ผูอ้ ่านพฒั นาแอพพลเิ คชนั เสร็จแล้วก็
สามารถทดสอบแอพพลเิ คชนั ได้หลายวิธี ซึ่งวธิ ีที่ผเู้ ขยี นแนะนำ� มขี ั้นตอนดงั นี้

1. คลิกขวาทโ่ี ปรเจ็กต์ แลว้ เลือกค�ำส่ัง Run As > Android Application

1.1 คลกิ ขวา

1.2 เลือก

60 Android App Development ฉบับสมบูรณ์

ในกรณีท่ีผู้อ่านสร้าง AVD ไว้หลายเคร่ือง ผู้อ่านสามารถเลือกรันเคร่ืองท่ีต้องการตามข้ันตอนดังนี้
1. คลิกขวาท่ีโปรเจ็กต์ แล้วเลือกค�ำส่ัง Run As > Run Configurations...

1.1 คลิกขวา

1.2 เลอื ก

2. จะปรากฏไดอะลอ็ กบอ็ กซ์ Run Configurations เพอื่ ใหก้ ำ� หนดคา่ ตา่ งๆ สำ� หรบั การรนั แอพพลเิ คชนั
3. ในส่วนของ Android Application คลิกเลือกโปรแกรม Hello World
4. คลิกแท็บ Target
5. คลกิ เลอื ก AVD ทจี่ ะใชส้ ำ� หรบั รนั ในกรณที ผ่ี อู้ า่ นสรา้ ง AVD ไวห้ ลายเครอ่ื ง ระบบกจ็ ะแสดงเครอ่ื งตา่ งๆ
ใหเ้ ลอื กใชใ้ นการรนั หรอื ผอู้ า่ นอาจจะเลอื กแบบอตั โนมตั ิ (Automatic) กไ็ ดเ้ ชน่ กนั
6. คลิกปุ่ม

4 คลิก

เลอื ก 3

5 เลอื ก

6 คลกิ

บทท่ี 3 เริ่มต้นพัฒนาแอพพลิเคชัน 61

2. รอสักครู่ ก็จะปรากฏหนา้ จอของ Emulator และแอพพลเิ คชัน Hello World ทีถ่ ูกโหลดเขา้ ไป

ทง้ั นใ้ี หส้ งั เกตเมนใู นสว่ นบนของโทรศพั ทว์ า่ มสี ญั ลกั ษณ์ 3G และคา่ สญั ญาณแสดงความแรง (Signal
Strength) ของเครอื ข่ายไรส้ ายหรือไม่ ในกรณีทไี่ มม่ สี ญั ญาณให้ผอู้ ่านปิดและเปิด AVD ใหม่อกี คร้งั หนงึ่

3. ในกรณีทโ่ี ทรศพั ทถ์ ูกล็อคไว้ ผอู้ ่านสามารถเปิด Emulator โดยลากปมุ่ ล็อค Emulator จากทาง
ซา้ ยมอื ไปยงั ทางขวามอื ซึง่ กจ็ ะคล้ายกบั การใชง้ านโทรศัพทจ์ ริงนน่ั เอง
3 ลากไปทางขวา

62 Android App Development ฉบับสมบูรณ์

4. เม่ือผูอ้ า่ นเปิด Emulator รวมไปถงึ การปลดลอ็ คเรยี บร้อยแล้ว แอพพลเิ คชนั Hello World จะถกู
โหลดขึ้นมาโดยอัตโนมตั ิ

5. กรอกข้อความลงไปในกล่องข้อความ
6. คลกิ ปุม่ Show
7. จะมขี อ้ ความปรากฏขึ้นมาทางด้านล่างว่า Hello World : และตามดว้ ยขอ้ ความทผี่ ูอ้ ่านกรอกลง

ในกล่องข้อความน่ันเอง ในกรณนี ี้ผ้เู ขียนกรอกคำ� ว่า Android กจ็ ะปรากฏคำ� ว่า Hello World :
Android ดงั รปู

คลกิ 6 5 กรอกข้อความ

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

คลกิ

บทท่ี 3 เริ่มต้นพัฒนาแอพพลิเคชัน 63

ผู้อ่านยังสามารถคลิกปุ่ม เพ่ือเปิดเมนูของแอพพลิเคชันย่อยๆ ของ Android ทั้งหมดข้ึนมา
แสดง ซง่ึ กจ็ ะรวมไปถงึ แอพพลิเคชัน Hello World ท่ผี อู้ ่านพฒั นาข้นึ มาดว้ ย และผู้อา่ นสามารถดบั เบลิ คลิกท่ี
แอพพลิเคชนั ต่างๆ เพ่ือเข้าใช้งานไดเ้ หมือนกันกบั กรณที กี่ ลา่ วมาแลว้ ในขน้ั ต้น

คลกิ

คลกิ
โปรแกรม Hello World

หรอื จะเรยี กใชง้ านอินเทอร์เน็ต โดยคลกิ ปุ่ม

คลิก

64 Android App Development ฉบับสมบูรณ์

สว่ นสำ� คญั อกี สว่ นหนง่ึ ทผี่ อู้ า่ นอาจจะประสบปญั หาเมอื่ เปดิ Emulator คอื ไมส่ ามารถใชง้ านอนิ เทอรเ์ นต็
ได้ ในส่วนนี้เป็นปัญหาหลักของ Android โดยเฉพาะเมื่อผู้อ่านใช้งานเครือข่ายผ่านเคร่ืองบริการแทน
หรอื เครอื่ งพรอ็ กซ่ี (Proxy) ซง่ึ ในกรณีนจ้ี ะต้องสอบถามกบั ผใู้ หบ้ รกิ ารเครอื ข่ายของผ้อู า่ น ในกรณขี อง
ผเู้ ขยี นจะเชอ่ื มตอ่ อนิ เทอรเ์ นต็ ผา่ นเครอ่ื งพรอ็ กซที่ ม่ี คี า่ ไอพี (IP) = xxx.xx.xx.xxx ทพี่ อรต์ (Port) 8088
ดงั นน้ั ในสว่ นของ Additional Emulator Command Line Options จะตอ้ งเขยี นเพม่ิ เตมิ ดงั น้ี -http-proxy
xxx.xx.xx.xxx:8088 ซงึ่ ผอู้ า่ นกส็ ามารถปรบั เปลย่ี นคา่ ไดต้ ามความเหมาะสม

เขียนคำ�ส่งั เพิม่

ทั้งนผี้ ้อู ่านไม่สามารถโทรเข้าและโทรออก Emulator น้ีได้จริง

การส่งออกและน�ำเข้าโปรเจ็กต์ใน Eclipse

สำ� หรับผู้อ่านทม่ี คี วามคนุ้ เคยกบั โปรแกรม Eclipse แลว้ ก็สามารถข้ามหวั ข้อน้ไี ปได้ อย่างไรกต็ าม
ส�ำหรับผู้ทีเ่ ร่ิมพฒั นาแอพพลเิ คชนั นัน้ ฟงั ก์ชนั การนำ� เขา้ และสง่ ออก (Import/Export) โปรเจ็กตจ์ ะมปี ระโยชน์
มากเลยทเี ดยี ว

ท้ังน้ีการน�ำเข้าและส่งออกน้ันสามารถท�ำได้หลายรูปแบบ เช่น การเก็บแบบถาวร (Archive), การ
เลือกเก็บในแต่ละโปรเจ็กต์หรือเก็บทั้งหมด แต่วิธีที่ผู้เขียนสังเกตเห็นได้ว่ามีประโยชน์ก็คือ การส่งออกแบบ
Archive File และน�ำเขา้ กลับมาในรปู แบบเดิม เชน่ ในหนังสอื เล่มน้มี ไี ฟล์ตวั อยา่ ง .zip แนบมาดว้ ยกับ CD ซ่ึง
ผู้อ่านสามารถคลายไฟล์ออก และสามารถน�ำเข้ามาใช้งานได้ทันที เพื่อตรวจสอบความถูกต้องในการพัฒนา
โปรแกรม อยา่ งไรก็ตามผเู้ ขยี นแนะน�ำให้ผอู้ า่ นทดลองพัฒนาโปรแกรมด้วยตนเองก่อน

บทท่ี 3 เริ่มต้นพัฒนาแอพพลิเคชัน 65

การส่งออกโปรเจ็กต์เป็น Archive File

จากโปรเจก็ ตท์ ไ่ี ด้พัฒนาไวส้ มบูรณแ์ ลว้ ผู้เขยี นจะแนะน�ำการส่งออกโปรเจก็ ต์เป็น Archive File กอ่ น
ซึ่งมีขั้นตอนการส่งออก (Export) ไปยงั Archive File ช่อื Backup_Hello_World.zip ดังนี้

1. คลกิ เมนู File > Export...

1 เลอื ก

2. จะปรากฏไดอะล็อกบ็อกซ์ Export ขึ้นมา
3. คลกิ เลอื ก General/Archive File
4. คลิกปุม่

3 เลือก

4 คลกิ

66 Android App Development ฉบับสมบูรณ์

5. คลกิ ปุม่ เพอื่ เลือกตำ� แหน่งจัดเกบ็ Archive File

5 คลิก

6. จะปรากฏไดอะล็อกบอ็ กซ์ Export to Archive File ขน้ึ มา
7. ในท่นี ้ีจะเกบ็ ไว้ที่ E:\IDC\Android\Android\ED\Ex
8. ตง้ั ชือ่ ไฟล์ ในท่นี ้ผี ูเ้ ขยี นต้ังช่ือไฟล์คอื Backup_Hello_World.zip
9. คลิกปุม่

7 เลือกพาธ

8 ตั้งชอื่

9 คลิก

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 67

10. เลอื กโปรเจ็กตท์ ต่ี ้องการจดั เกบ็ ซ่งึ ในตวั อย่างน้ีตอ้ งการจดั เก็บโปรเจก็ ต์ Hello World ดังนนั้ ให้
คลิกเลือกทางซา้ ยมอื

11. คลกิ เลอื กไฟล์ทเ่ี กยี่ วขอ้ งทางขวามอื ด้วย เชน่ .classpath และ AndroidManifest.xml เปน็ ต้น
12. คลกิ ปมุ่

10 เลอื ก

11 เลอื ก

12 คลิก

13. ได้ Archive File ในตำ� แหน่งทกี่ �ำหนดไว้

68 Android App Development ฉบับสมบูรณ์

การน�ำเข้าโปรเจ็กต์จาก Archive File

ขน้ั ตอนตอ่ ไปเปน็ ขน้ั ตอนการนำ� เขา้ (Import) Archive File ทชี่ อ่ื Backup_Hello_World.zip ทไี่ ดจ้ าก
หัวขอ้ ทผ่ี า่ นมา ทัง้ น้ีเนอ่ื งจากเดมิ มโี ปรเจก็ ต์ Hello World อยู่ในโปรแกรม Eclipse ให้ผู้อา่ นลบโปรเจก็ ต์เดิม
ออกกอ่ น ซงึ่ สามารถทำ� ได้โดยคลกิ ขวาทโี่ ปรเจ็กต์ แลว้ เลอื กคำ� ส่ัง Delete

ข้อควรระวังคือ ผู้อ่านควรตรวจสอบให้แน่ใจว่า การส่งออกโปรเจ็กต์นั้นสมบูรณ์หรือไม่ เพราะเมื่อ
ลบโปรเจ็กต์แล้ว จะไม่สามารถกู้ข้อมูลคืนมาได้อีก

1 คลิกขวา 3 คลิก 4 คลกิ
2 เลอื ก

เมื่อลบโปรเจ็กต์ Hello World ออกแลว้ ขั้นตอนตอ่ ไปจะเป็นการน�ำเขา้ โปรเจก็ ต์ ซ่ึงมีขัน้ ตอนดงั น้ี
1. คลิกเมนู File > Import...

1 เลอื ก

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 69

2. จะปรากฏไดอะลอ็ กบ็อกซ์ Import 3 เลอื ก
ขน้ึ มา

3. คลิกเลือก General/Existing Proj-
ects into Workspace

4. คลิกป่มุ

5. คลิกเลอื ก Select archive file: 4 คลิก
6. คลิกปุ่ม เพ่ือเลือกไฟล์ คลิก 6
Archive File ท่ีตอ้ งการนำ� เข้ามา ซง่ึ ใน
ตวั อยา่ งนอ้ี ยทู่ ี่ E:\IDC\Android\Android\
ED\Ex 5 เลือก

7. คลิกเลือกไฟล์ช่ือ Backup_ 7 เลอื ก
Hello_World.zip ซง่ึ เปน็ ไฟล์ คลกิ 8
ท่ีได้จากหัวข้อท่ผี า่ นมา

8. คลกิ ปมุ่
70 Android App Development ฉบับสมบูรณ์

9. จะปรากฏโปรเจก็ ต์ Hello World ขนึ้ มา
10. คลิกปุ่ม

9 โปรเจก็ ต์ Hello World

10 คลิก

11. จะไดโ้ ปรเจ็กต์ Hello World เขา้ มา

ผู้อ่านที่สนใจการพัฒนาแอพพลิเคชันจากตัวอย่าง สามารถศึกษาโค้ดเพิ่มเติมได้จากเว็บไซต์ดังน้ี 71
z http://developer.android.com/resources/samples/index.html
z h ttp://code.google.com/p/apps-for-android/
z h ttp://code.google.com/hosting/search?q=label%3aAndroid
ทงั้ นเี้ วบ็ ไซตด์ งั กลา่ วจะมตี วั อยา่ งโคด้ ประเภทตา่ งๆ ใหผ้ อู้ า่ นสามารถดาวนโ์ หลดไดฟ้ รจี ากทาง Google
เชน่ Bluetooth Chat, BusinessCard, Contact Manager, Live Wallpaper, Searchable Dictionary,
Snake Game และ Wiktionary เปน็ ตน้ นอกจากนท้ี างบรษิ ทั ยงั มกี ารสอนใหฝ้ กึ พฒั นาแอพพลเิ คชนั ได้
อยา่ งงา่ ย (Tutorial) ดว้ ย เชน่ Hello World และ NotePad ซง่ึ ผอู้ า่ นสามารถศกึ ษาเพมิ่ เตมิ ไดจ้ ากเวบ็ ไซต์
z http://developer.android.com/resources/tutorials/hello-world.html
z h ttp://developer.android.com/resources/tutorials/notepad/index.html

บทท่ี 3 เริ่มต้นพัฒนาแอพพลิเคชัน

เร่ิมต้นพัฒนาแอพพลิเคชันบน Tablet

ในหัวข้อท่ีผ่านมา เป็นการอธิบายข้ันตอนการพัฒนาแอพพลิเคชัน Android บนโทรศัพท์เคลื่อนท่ี
ในหวั ขอ้ นี้ผูเ้ ขยี นจะแนะน�ำขั้นตอนการพัฒนาแอพพลเิ คชัน Android บน Tablet บา้ ง ซ่งึ มีข้ันตอนแตกต่างกัน
เฉพาะขัน้ ตอนการสรา้ งโทรศัพทจ์ �ำลอง (Emulator) เท่านัน้ สว่ นขั้นตอนอน่ื ๆ จะไม่แตกต่างกนั เลย ไม่วา่ จะเป็น
ขั้นตอนการออกแบบหน้าจอหรือการเขียนโปรแกรมกต็ าม

ในที่น้ขี ออธิบายขนั้ ตอนการพัฒนาแอพพลิเคชันบน Tablet โดยสรุปดงั นี้
1. สร้าง Emulator ใหม่ โดยก�ำหนดคณุ สมบตั ิดงั นี้

ขนาดของ Tablet ทตี่ อ้ งการ

2. จะมชี ื่อ AVD ทส่ี รา้ งไว้ดงั รปู
3. คลกิ ปุ่ม เพื่อเปิดเคร่อื ง AVD

3 คลิก

72 Android App Development ฉบับสมบูรณ์

4. รอสกั ครู่ Emulator จะสามารถใชง้ านไดด้ งั รูป

5. รนั โปรเจก็ ต์ Hello World ใหมอ่ กี ครัง้ โดยเลือก AVD เปน็ AVD-tablet ทสี่ รา้ งขึ้น จะไดห้ นา้ จอ
แอพพลิเคชันดงั น้ี

5.1 กรอกข้อมูล
5.2 คลกิ

5.3 แสดงผล

จากข้ันตอนที่กล่าวมา จะสังเกตได้ว่าการพัฒนาแอพพลิเคชัน Android บนโทรศัพท์เคลื่อนท่ีกับ
การพฒั นาแอพพลิเคชนั Android บน Tablet แตกตา่ งกนั เพียงการสรา้ ง AVD ส�ำหรบั Tablet และการเลือก
AVD ทใี่ ช้รันแอพพลิเคชนั เท่านน้ั

บทท่ี 3 เร่ิมต้นพัฒนาแอพพลิเคชัน 73

สรุปท้ายบท

ในบทนี้เป็นการอธิบายถึงการเร่ิมต้นพัฒนาแอพพลิเคชัน โดยอธิบายผ่านแอพพลิเคชันชื่อ Hello
World ซึ่งเป็นการแสดงข้อความออกทางหน้าจอโทรศัพท์ รวมไปถึงเทคนคิ ต่างๆ ในการพฒั นาโปรแกรม เช่น
การส่งออกและน�ำเขา้ โปรเจก็ ต์ใน Eclipse เปน็ ตน้

แบบฝึกหัดท้ายบท

แบบฝึกหัดในส่วนน้ีให้ผู้อ่านพัฒนาแอพพลิเคชันโดยมีกล่องข้อความจ�ำนวน 2 กล่อง และปุ่มกด
1 ปุ่ม ซึ่งมีการท�ำงานดงั น้ี

เมอื่ ผอู้ า่ นพมิ พข์ อ้ ความลงในกลอ่ งทง้ั สองแลว้ และคลกิ ปมุ่ Click Me! ใหแ้ อพพลเิ คชนั แสดงขอ้ ความ
โดยการนำ� ขอ้ ความทงั้ สองขอ้ ความมาตอ่ กนั และเวน้ วรรคดว้ ย 1 ชอ่ งวา่ ง (Space) เชน่ พมิ พ์ Hello และ Chakchai
จากนัน้ แสดงผล Hello Chakchai เป็นต้น

74 Android App Development ฉบับสมบูรณ์

4

พัฒนาแอพพลิเคชันอย่างง่าย

เนอื้ หาในบทท่ี 4 น้ีจะเป็นสว่ นเพมิ่ เตมิ จากบทที่ 3 จุดประสงคเ์ พือ่ ให้ผ้อู ่านฝึกพฒั นาแอพพลเิ คชนั ทม่ี ี
ความซบั ซอ้ นเพมิ่ ขนึ้ เพอ่ื ใหเ้ ขา้ ใจในรายละเอยี ดพน้ื ฐานสำ� หรบั การพฒั นาแอพพลเิ คชนั โดยทจ่ี ะเปน็ การพฒั นา
แอพพลเิ คชนั แปลงคา่ ระยะทางจากหนว่ ยกโิ ลเมตร (Kilometer) เปน็ หนว่ ยไมล์ (Mile) และทำ� งานในทางกลบั กนั ได้

นอกจากนี้เน้ือหาในบทนี้จะอธิบายถึงส่วนขยาย ส�ำหรับการก�ำหนดรายละเอียดของแอตทริบิวต์
(Attribute) เพมิ่ เตมิ เพอ่ื น�ำมาใช้ในการอ้างอิงในไฟล์ main.xml

สำ� หรบั ตัวอยา่ งในบทน้ี จะเป็นการประยกุ ต์ใชพ้ ้นื ฐานความรู้เรื่องระบบเมตริกซ์ (Metric System) ซงึ่
เปน็ ระบบการวดั ท่ใี ชโ้ ดยนานาชาติ ซ่ึงต่อมาหนว่ ยงาน SI (Systèem International d’Unités) ได้ยอมรบั เป็น
มาตรฐานและไดม้ กี ารนำ� ไปใชใ้ นหลายประเทศ ยกเวน้ ในประเทศพมา่ ไลบเี รยี และสหรฐั อเมรกิ า ซง่ึ หนว่ ยวดั แบบ
เมตรกิ ซน์ นั้ โดยทว่ั ไปแลว้ จะถกู ใชใ้ นงานทางดา้ นวทิ ยาศาสตร์ (Science) และงานทวั่ ไป รวมไปถงึ ดา้ นธรุ กจิ ตา่ งๆ
เช่น หนว่ ยเมตร กโิ ลกรัม และวินาที (meter-kilogram-second) อกี ดว้ ย

อยา่ งไรกต็ ามกย็ งั มมี าตรฐานการวดั อกี ประเภทหนง่ึ ทเี่ รยี กวา่ Imperial Units หรอื Imperial Systems
โดยมีต้นก�ำเนิดและใช้กนั ทั่วไปทปี่ ระเทศองั กฤษ และกลุ่มท่ีเคยถกู ปกครองโดยประเทศอังกฤษ เชน่ ไมล์ (Mile)
หรอื หลา (Yard) และมีการนำ� มาใช้งานในชีวิตประจ�ำวันเช่นเดียวกนั

โดยเน้ือหาในบทน้ีจะแบง่ ออกเปน็ ขั้นตอนหลักๆ ดังนี้
1. เรม่ิ ต้นสรา้ งโปรเจ็กต์
2. ออกแบบหนา้ จอแอพพลิเคชนั
3. เขียนโค้ดก�ำหนดการท�ำงานของแอพพลเิ คชนั
4. ทดสอบการทำ� งานของแอพพลเิ คชันผ่านโทรศพั ท์จ�ำลอง (Emulator)

เริ่มต้นสร้างโปรเจ็กต์

ข้ันตอนแรกในการพัฒนาแอพพลิเคชันทุกครั้งก็คือ การสร้างโปรเจ็กต์ ซ่ึงผู้อ่านสามารถกระท�ำได้
ตามขัน้ ตอนดังต่อไปนี้

1. เปิดโปรแกรม Eclipse
2. คลิกเมนู File > New > Android Project

2 เลือก

3. จะปรากฏไดอะลอ็ กบ็อกซ์ New Android Project เพ่ือกำ� หนดรายละเอยี ดต่างๆ ของโปรเจ็กต์
4. ต้งั ชือ่ โปรเจก็ ต์ ในท่ีนี้ตั้งชอ่ื วา่ ChangeBath
5. ในสว่ นของ Contents คลกิ เลือก Create new project in workspace เพ่อื สรา้ งโปรเจ็กตใ์ หม่
6. คลกิ เครอื่ งหมายถกู หนา้ Use default location เพอื่ พฒั นาแอพพลเิ คชนั ในตำ� แหนง่ ทอี่ ยเู่ ดยี วกนั

กับโปรเจ็กต์ Eclipse
7. คลิกปุ่ม

เลือก 5 4 ตงั้ ชื่อโปรเจก็ ต์
คลกิ 6

7 คลกิ

76 Android App Development ฉบับสมบูรณ์

8. จะปรากฏไดอะลอ็ กบอ็ กซ์ New Android Project ในสว่ นทสี่ อง สำ� หรบั เลอื กเวอรช์ นั ของ Android
9. คลกิ เลอื กเวอร์ชนั ของ Android ทจ่ี ะพฒั นา ในที่น้เี ลือก 4.0.3
10. คลิกปมุ่

เลือก 9

10 คลิก

11. จะปรากฏไดอะลอ็ กบอ็ กซ์ New Android Project ในสว่ นท่ีสาม ส�ำหรับกำ� หนดรายละเอียดของ
แอพพลิเคชัน
12. ต้ังชอื่ ของแอพพลเิ คชนั คอื ChangeBath
13. ชอ่ื แพ็คเกจจะอยูใ่ นรปู แบบของ xxx.xxx... ซ่ึงในทน่ี ต้ี ้ังชอื่ แพ็คเกจเป็น com.app.changebath
14. ตั้งช่อื Activity ในทนี่ ต้ี ้งั ชอื่ เปน็ ChangeBathActivity
15. ในสว่ นของ Minimum SDK: คลกิ เลอื กเวอรช์ นั 15 ซง่ึ เปน็ เวอรช์ นั เดยี วกนั กบั API Level ทเี่ ลอื ก
ในข้อ 9
16. คลกิ ปุ่ม ซึ่งถอื เป็นอัน
เสรจ็ สิ้นการสรา้ งโปรเจก็ ต์ 12 ต้ังชื่อแอพพลิเคชัน
13 ตั้งช่อื แพค็ เกจ

14 ต้งั ชอื่ แอค็ ทวิ ติ ้ี

15 เลือกเวอร์ชนั

16 คลิก

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 77

17. จะปรากฏโปรเจก็ ตท์ ่ี Package Explorer ซง่ึ แสดงถงึ โครงสรา้ งของ
โปรเจ็กตท์ ไ่ี ดส้ รา้ งขึ้นมา

ข้นั ตอนตอ่ ไปจะเป็นการแก้ไขไฟล์หลักๆ ซ่ึงในบทนี้จะมี 3 ไฟลด์ ังน้ี
1. ไฟล์ main.xml ซึ่งจะใชเ้ ปน็ ไฟลส์ ำ� หรับการออกแบบหน้าจอท่อี ย่บู นแอพพลเิ คชัน
2. ไฟล์ string.xml ซง่ึ เปน็ ไฟล์ทส่ี ามารถก�ำหนดรายละเอยี ดของแอตทริบวิ ต์ (Attribute) ซ่งึ อยทู่ ี่

ไดเรค็ ทอรี “res/values/string.xml” โดยไฟล์น้ีจะถกู ใชส้ ำ� หรบั อ้างองิ รายละเอยี ดตา่ งๆ จากไฟล์
อ่นื ๆ ด้วย เชน่ สามารถเรียกใช้งานคา่ ตา่ งๆ ผา่ นไฟล์ main.xml ได้
3. ไฟล์ ChangeBath.java ซึ่งเปน็ ไฟล์หลักทใี่ ชส้ ำ� หรบั กำ� หนดการทำ� งานของแอพพลเิ คชัน

ออกแบบหน้าจอแอพพลิเคชัน

การออกแบบหน้าจอแอพพลิเคชันเป็นการแก้ไขไฟล์ XML ส�ำหรับแอพพลิเคชันการแปลงค่าระยะ
ทางน้ัน จะตอ้ งแก้ไขไฟล์ 2 ไฟล์ย่อยๆ คือ ไฟล์ main.xml และไฟล์ string.xml

การแก้ไขไฟล์ main.xml

การแกไ้ ขไฟล์ XML (Extensible Markup Language) ซง่ึ สว่ นของแอพพลเิ คชนั ChangeBath น้ี ไฟล์
main.xml จะเปน็ ไฟลห์ ลักส�ำหรบั การออกแบบหนา้ จอของแอพพลิเคชนั ซงึ่ มขี น้ั ตอนการแกไ้ ขดงั น้ี

1. ดบั เบลิ คลกิ ไฟล์ main.xml ท่ีอยู่ในสว่ นของ res/layout
2. จะปรากฏ Layout ทางด้านขวามือ

2 แสดง Layout

1 ดับเบลิ คลิก

78 Android App Development ฉบับสมบูรณ์

3. ผู้อา่ นสามารถสลบั จากรูปแบบ Layout เป็นแบบ XML ได้ โดยคลิกแทบ็ main.xml ซงึ่ มีโค้ด xml
ดังน้ี

3 คลิก
4. ในส่วนของการออกแบบแอพพลิเคชัน ให้ผู้อ่านคลิกแทบ็ Graphical Layout
5. คลิกท่ี Form Widgets
6. คลกิ เลอื กอลิ เิ มนต์ต่างๆ เพอื่ ออกแบบแอพพลิเคชนั ดังรปู

5 คลิก

4 คลกิ

EditText
RadioButton

RadioButton
Button

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 79

7. คลกิ แทบ็ main.xml จะไดโ้ ค้ด XML ดงั นี้

กำ�หนดคุณสมบตั ิ EditText
กำ�หนดคณุ สมบัติ
RadioButton ตัวท่ี 1
กำ�หนดคณุ สมบตั ิ
RadioButton ตัวที่ 2
กำ�หนดคณุ สมบตั ิ Button

การแก้ไขไฟล์ string.xml

ในสว่ นนเี้ ปน็ ส่วนเพ่ิมเตมิ สำ� หรับช่วยในการอา้ งอิงถงึ รายละเอียดตา่ งๆ ของแอตทริบวิ ต์ (Attribute)
ใหม้ คี วามสะดวกในการเรยี กใช้งาน โดยเฉพาะเม่ือมกี ารเรยี กใช้จากไฟล์ main.xml ซ่ึงไฟล์ string.xml จะอยู่
ที่ไดเร็คทอรี “res/values/string.xml”

แสดงรายการอิลเิ มนต์ แสดงโคด้ XML

โดยลกั ษณะการกำ� หนดคา่ ตา่ งๆ จะคลา้ ยกนั กบั ไฟล์ main.xml โดยแบง่
ออกเปน็ 2 แบบคือ แบบ XML และแบบ Layout

ซ่ึงตวั อยา่ งในบทน้ีจะเป็นการเพมิ่ เติมค่า myColor, Change to miles, Change to kilometers และ
Calculate ซง่ึ ระบเุ ปน็ คา่ สตริง (String) ไวด้ งั นี้

ส่วนเพมิ่ เตมิ

80 Android App Development ฉบับสมบูรณ์

จากการเพมิ่ โค้ด XML ดังกล่าวได้ผลลพั ธด์ ังนี้

ส่วนเพ่ิมเติม

จากนน้ั เมอื่ กำ� หนดคา่ ตา่ งๆ ในไฟล์ string.xml เรยี บรอ้ ยแลว้ ขน้ั ตอนตอ่ ไปจะเปน็ การแกไ้ ขไฟล์ main.xml
ท่จี ะเรยี กใช้งานแอตทรบิ ิวต์ตา่ งๆ โดยแก้ไขไฟล์ main.xml ดงั นี้

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/myColor">

<EditText

android:id="@+id/EditText01"

android:layout_height="wrap_content" 1 กำ�หนดคุณสมบตั ิ EditText
2 กำ�หนดคณุ สมบตั ิ RadioButton
android:layout_width="fill_parent"
กำ�หนดคณุ สมบัติ Button
android:inputType="numberSigned|numberDecimal">

</EditText>



<RadioGroup

android:id="@+id/RadioGroup01"

android:layout_width="wrap_content"

android:layout_height="wrap_content">



<RadioButton

android:id="@+id/RadioButton01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/kilometers"

android:checked="true">

</RadioButton>

<RadioButton

android:id="@+id/RadioButton02"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/miles">

</RadioButton>

</RadioGroup>



<Button

android:id="@+id/Button01"

android:layout_height="wrap_content" 3
android:onClick="@string/buttonHandler"

android:layout_width="wrap_content"

android:text="@string/calc">

</Button>

</LinearLayout>

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 81

จากการเพ่ิมโค้ด XML ดังกล่าวไดผ้ ลลัพธ์ดงั น้ี

เขียนโค้ดก�ำหนดการท�ำงานของแอพพลิเคชัน

เมือ่ ผอู้ า่ นสรา้ งหนา้ จอแอพพลิเคชนั เรียบร้อยแล้ว ขัน้ ตอนต่อไปคอื การเขยี นโค้ดกำ� หนดการท�ำงาน
ของแอพพลิเคชนั ในไฟล์ ChangeBathActivity.java เพือ่ ใช้ในการแปลงค่าระยะทาง โดยมีขั้นตอนดังตอ่ ไปนี้

1. เปดิ ไฟล์ ChangeBathActivity.java ซงึ่ มโี คด้ ดังนี้

2. แกไ้ ขโค้ดในไฟล์ ChangeBathActivity.java ดังนี้

package com.app.changebath;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;

public class ChangeBath extends Activity {
private EditText text;

/** Called when the activity is first created. */

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

text = (EditText) findViewById(R.id.EditText01);

}

public void myClickHandler(View view) { 1

switch (view.getId()) { กรณีกดปมุ่
case R.id.Button01:

RadioButton milesButton = (RadioButton)

findViewById(R.id.RadioButton01);

82 Android App Development ฉบับสมบูรณ์

RadioButton kilometersButton = (RadioButton)

findViewById(R.id.RadioButton02);

if (text.getText().length() == 0) {

Toast.makeText(this,

ตรวจสอบกา รกรอกข้อมูล "TIonavsatl.iLdENNGuTmHb_eLrO"N,G).show();

return;

}

Float inputValue = Float.parseFloat
(text.getText().toString());

ตร วจสอบวา่ เล อื ก if (milesButton.isChecked()) {
RadioB utton ตัวใด text.setText(String.valueOf

(convertToKilometers(inputValue)));
} else {
text.setText(String.valueOf
(convertToMiles(inputValue)));
}
// Switch to the other button

สล บั การเลอื ก RadioBu tton if (milesButton.isChecked()) {

milesButton.setChecked(false);
kilometersButton.setChecked(true);
} else {
milesButton.setChecked(true);
kilometersButton.setChecked(false);
}
break;
}
}

private float convertToKilometers(float miles) { 2
return (float) (miles * 1.609344);
}

private float convertToMiles(float kilometers) {
return (float) (kilometers * 0.621371192);
}
}

อธบิ ายโคด้ การทำ� งานของแอพพลิเคชัน

1. ฟงั กช์ นั myClickHandler เปน็ ฟงั กช์ นั ก�ำหนดคณุ ลักษณะ รวมไปถงึ ขนั้ ตอนการด�ำเนินงานตา่ งๆ
ท่ีจะเกดิ ขึน้ เม่อื มีการคลกิ ปุ่ม Button ซึ่งมีโค้ดดังนี้

public void myClickHandler(View view) {

switch (view.getId()) {

case R.id.button1:

RadioButton milesButton = (RadioButton)

findViewById(R.id.radioButton1);

RadioButton kilometersButton = (RadioButton)

findViewById(R.id.radioButton2);

if (text.getText().length() == 0) {

Toast.makeText(this,

"Invalid Number",

Toast.LENGTH_LONG).show();

return;

}

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 83

float inputValue = Float.parseFloat
(text.getText().toString());
if (milesButton.isChecked()) {
text.setText(String.valueOf
(convertToKilometers(inputValue)));
} else {
text.setText(String.valueOf
(convertToMiles(inputValue)));
}
// Switch to the other button
if (milesButton.isChecked()) {
milesButton.setChecked(false);
kilometersButton.setChecked(true);
} else {
milesButton.setChecked(true);
kilometersButton.setChecked(false);
}
break;
}
}

จะสงั เกตได้วา่ แอพพลเิ คชันมกี ารตรวจสอบค่า RadioButton เพ่ือเปลย่ี นแปลงค่าจากไมล์ (Miles)
เปน็ กโิ ลเมตร (Kilometers) และในทางกลบั กนั คอื เปลย่ี นแปลงคา่ จากกโิ ลเมตร (Kilometers) เปน็ ไมล์ (Miles)

จากนน้ั เงอื่ นไข milesButton.isChecked() จะถกู ใชง้ าน เพอื่ เรยี กฟงั กช์ นั ในการแปลงคา่ ระยะทางให้
ทำ� งาน

2. ฟงั กช์ นั แปลงคา่ จะทำ� งาน เม่อื มีการคลกิ ปุ่ม โดยทก่ี ารแปลงคา่ น้นั จะอ้างองิ จากการค�ำนวณค่า 1
ไมล์ = 1.609344 กโิ ลเมตร และ 1 กิโลเมตร = 0.621371192 ไมล์ ซ่ึงมี 2 ฟังกช์ ันดังน้ี

private float convertToKilometers(float miles) {
return (float) (miles * 1.609344);
}

private float convertToMiles(float kilometers) {
return (float) (kilometers * 0.621371192);
}

ทดสอบการท�ำงานของแอพพลิเคชันผ่านโทรศัพท์

จ�ำลอง (Emulator)

หลังจากการพัฒนาแอพพลิเคชัน เลอื ก 1
เสรจ็ สน้ิ แลว้ ขน้ั ตอนตอ่ ไปคอื การคอมไพลแ์ ละ
รนั แอพพลเิ คชนั ทง้ั นเ้ี นอ่ื งจากแอพพลเิ คชนั จะ
รนั โปรแกรมผา่ น Emulator ดงั นนั้ จะมขี นั้ ตอน
ต่างๆ ดังต่อไปนี้

1. สรา้ ง AVD ใหมข่ ้ึนมา โดยคลิก
เมนู Window > AVD Manager

84 Android App Development ฉบับสมบูรณ์

2. จะปรากฏไดอะล็อกบ็อกซ์ Android Virtual Device Manager ข้ึนมา
3. คลิกปุ่ม เพื่อสรา้ ง AVD

3 คลกิ

4. จะปรากฏไดอะลอ็ กบอ็ กซ์ Create new Android Virtual Device (AVD) เพอ่ื ใหก้ ำ� หนดคณุ สมบตั ิ
ต่างๆ ของ AVD
5. ตัง้ ชอื่ AVD ในทนี่ ้ชี อ่ื วา่ changemetric
6. ในส่วนของ Target: คลกิ เลือก Android 4.0.3 ทัง้ น้ีผูอ้ ่านสามารถเลือกรุ่นอื่นๆ ได้
7. ในส่วนของ SD Card: คลกิ เลือก Size:
8. กรอกความจุของหน่วยความจ�ำ ในที่น้กี รอกขนาด 1024 MiB (เมกะไบต)์
9. ในสว่ นของ Skin: คลิกเลือก Built-in:
10. คลกิ เลอื ก HVGA ยอ่ มาจาก Half-size Video Graphics
Array ซึ่งเป็นการเลือกขนาดหน้าจอแสดงผลของ 5 กรอกชอื่

แอพพลิเคชัน ซึ่งผู้อ่านควรเลือกตามขนาดของ 6 เลือก
หน้าจอโทรศัพท์ทใ่ี ชง้ าน
11. คลกิ ปมุ่ เพอ่ื สร้าง AVD เลือก 7 8 ระบขุ นาด

10 เลือก

เลอื ก 9

11 คลกิ

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 85

12. จากนนั้ จะมชี อ่ื AVD ที่สรา้ งไว้แสดงขน้ึ มาในรายการ
12 AVD ทสี่ ร้างไว้

13. คลกิ ขวาทโี่ ปรเจ็กต์ แลว้ เลือกคำ� สั่ง Run As > Run Configurations...

13.1 คลิกขวา

13.2 เลอื ก

86 Android App Development ฉบับสมบูรณ์

ในกรณีที่ไม่มีช่ือโปรเจ็กต์ ให้คลิกปุ่ม 1 เลือก
เพอื่ เลอื กโปรเจก็ ต์ ChangeBath แลว้ คลกิ ปมุ่ 2 คลิก

จะปรากฏโปรเจ็กต์ดังนี้

14. จะปรากฏไดอะลอ็ กบอ็ กซ์ Run Configurations เพอ่ื ใหก้ ำ� หนดคา่ ตา่ งๆ สำ� หรบั การรนั แอพพลเิ คชนั
15. ในสว่ นของ Android Application คลิกเลือกแอพพลเิ คชันท่ตี อ้ งการรัน
16. คลกิ แทบ็ Target
17. คลกิ เลอื ก AVD ที่จะใช้
สำ� หรบั รัน 16 คลกิ

18. คลกิ ปุม่ เลอื ก 15

17 เลือก

18 คลิก

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 87

19. รอสักครู่ ก็จะปรากฏหน้าจอของ Emulator และแอพพลเิ คชัน ChangeBath กจ็ ะถูกโหลดขึ้นมา
โดยอัตโนมัติ

ในกรณที โ่ี ทรศพั ทถ์ กู ลอ็ คไว้ ผอู้ า่ นสามารถเปดิ Emulator โดยลากปมุ่ ลอ็ ค Emulator จากทางซา้ ยมอื
ไปยงั ทางขวามอื และเรยี กใชแ้ อพพลเิ คชนั Change miles to kilometers ได้ ซงึ่ กจ็ ะคลา้ ยกบั การใชง้ าน
โทรศัพท์จริงนั่นเอง
20. ทดสอบการทำ� งานของแอพพลเิ คชนั ไดผ้ ลลัพธด์ ังน้ี

เลอื กการเปลยี่ นหนว่ ย 2 1 กรอกขอ้ มูลตวั เลขระยะทาง
3 คลกิ

88 Android App Development ฉบับสมบูรณ์

4 แสดงผล

เลือกการเปลี่ยนหนว่ ย 6 5 กรอกข้อมลู ตวั เลขระยะทาง
7 คลกิ

8 แสดงผล

1 ไมล์ = 1.609344 กิโลเมตร
1 กิโลเมตร = 0.621371192 ไมล์

บทท่ี 4 พัฒนาแอพพลิเคชันอย่างง่าย 89